Question

我正在尝试从我的商店调用2个值，并将其设置在styles中的div内，我将其放在html:项目中。商店从Web API加载数据，这是正常工作（我已经使用fiddler测试并且返回响应是正确的）但是我无法让商店中的数据在html项目中工作。

以下是我的观点：

Ext.define('myapp.view.Main', {
   extend: 'Ext.tab.Panel',

   requires:['myapp.store.Style'],

   items: [
      {
         id: 'firstpage',
         title: 'Welcome',
         store: 'styleStore',
         styleHtmlContent: true,
         scrollable: true,

         items: [
            {
               html: ['<div id="testStr1" style="font-style:{FontStyle}; color:{Color};">',
                      'This is a test string.',
                      ' Go to the settings to change the style',
                      '</div>'
                    ].join("")
            }
            ]
        },
      }
   ]
}

我的商店：

Ext.define('myapp.store.Styles', {
   extend: 'Ext.data.Store',

   requires:[
      'myapp.model.Style'
   ],

   config: {
      autoLoad: true,
      model: 'myapp.model.Style',
      storeId: 'styleStore',
      clearOnPageLoad:false,

      proxy:
      {
         type: 'ajax',
         listeners: {
         exception:{
            fn: function(pxy, response, operation, options){console.log("We've got a problem...");}
         }
      },

         url: 'http://localhost/styleapi/api/styles',
         reader: {
            type: 'json',
            rootProperty: 'data',
         }
      }
   }
});

我的模特：

Ext.define('myapp.model.Style', {
extend: 'Ext.data.Model',

    fields:[
        {
            name: 'Id',
            type: 'int'
        },
        {
            name: 'FontStyle'
        },
        {
            name: 'Color'
        },

    ],

    proxy: {
        type: 'rest',
        url: 'http://localhost/styleapi/api/styles'
    }

});

Answer 1

这里有一些问题......

首先，您的主要类myapp.view.Main正在其中嵌套项目，并且这些项目未正确配置。如果您希望该项目不是items: ...的默认类型，则config应位于xtype内，并且每个项目应该有container。在您当前的代码中，您的第一个项目上有items: ..个配置，您将放置html。这会导致嵌套组件，而不是您想要的组件。

此外，当您确实想要使用模板时，您正在使用html。当您拥有固定的数据集（或对象）时，可以使用component tpl和data;当您使用store数据时，您将使用dataview和itemTpl配置，这将为商店中的每个项目重复该模板。目前，您的顶级项目默认为container，您正在使用store配置，目前暂不执行任何操作。

所以，要修复的步骤：

将顶级项目移至config属性
将顶级项目更改为dataview
将html移出嵌套项目并作为XTemplate移至itemTpl属性（即itemTpl: new Ext.XTemplate('<div ...')）

在普通的选项卡面板中调用商店中的数据

1 个答案: