0

我正在尝试从我的商店中调用 2 个值，并将其设置styles在div我将其放入html:项目中的 in 中。商店从 Web API 加载数据，该 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'
    }

});
4

1 回答 1

0

这里有几个问题...

首先，您的主类myapp.view.Main是在其中嵌套项目，并且这些项目配置不正确。如果您希望项目不是 的默认类型，您items: ...应该在 中config，并且每个项目都应该有一个。在您当前的代码中，您在第一个项目上有一个配置，您将. 这会产生一个嵌套组件，这不是您想要的。xtypecontaineritems: ..html

此外，html当您真正想要使用模板时，您正在使用 ,。当您有固定的数据集（或对象）时，可以使用componentwithtpl和data; 当store对数据使用 a 时，您将使用dataview带有itemTpl配置的 a，它将为商店中的每个项目重复该模板。目前，您的顶级项目默认为 a container，您正在使用store配置，目前不会做任何事情。

因此，修复步骤：

  1. 将顶级项目移动到config属性中
  2. 将顶级项目更改为dataview
  3. 将html嵌套项移出并itemTpl作为 XTemplate 进入属性（即itemTpl: new Ext.XTemplate('<div ...')）
于 2013-09-12T12:51:37.380 回答