Extjs 5中使用JSON数据存储的XTemplate

Question

我需要关于xtemplate和带有代理的store的帮助。无论我尝试什么，我都陷入了这个问题。xtemplate只显示来自一个没有使用代理的store的数据。

有效的store：

Ext.create('Ext.data.Store', {
    storeId : 'viewStore',
    model    : 'dataview_model',
    data    : [
        {statistic: '213213', description: 'Hallo'},
        {statistic: '534345', description: 'Alloh'},
   ]
});

使用Xtemplate和数据配置进行开发

    xtype: 'component',
    cls: 'kpi-tiles',
    id: 'statisticsBoxes',
    height: 100,

    tpl: [
        '<div class="kpi-meta">',
            '<tpl for=".">',
                '<span>',
                    '<div class="statsDiv">{statistic}</div> {description}',
                '</span>', 
            '</tpl>',
        '</div>'
    ],

    data: [{
        description: Ext.getStore('statisticsStore').getAt(0).data.statistic,
        statistic: Ext.getStore('viewStore').getAt(0).data.statistic
    },{
        description: Ext.getStore('viewStore').getAt(1).data.description,
        statistic: Ext.getStore('viewStore').getAt(1).data.statistic
    }],

但是当我更改模板的数据以便从统计数据存储中加载数据时，控制台会出现以下错误: Uncaught TypeError: Cannot read property 'getAt' of undefined。

数据配置:

data: [{
    description: 'the description',
    statistic: Ext.getStore('statisticsStore').getAt(0).data.statistic
}],

统计存储:

Ext.define('ExecDashboard.store.Statistics', {
extend: 'Ext.data.Store',
alias: 'store.statistics',
storeId: 'statisticsStore',
model: 'ExecDashboard.model.Statistics',

proxy: {      
    type: 'ajax',
    url: '/statistics',
    reader: 'json'
}
});

生成以下JSON：
[{"statistic":"1"}, {"statistic":"2"}]

store已在viewModel中加载：

    stores: {
    Statistics: {
        type: 'statistics',
        autoLoad: true
    }
}

我认为问题在于那个时候商店没有被加载。但是我不知道如何解决这个问题。我知道当商店被加载时，'Ext.getStore('statisticsStore').getAt(0).data.statistic' 在 console.log 中可以正常工作。

- Jurgen

---

那么商店是如何加载的？ - dbrin

该存储库已在viewModel中加载。 - Jurgen

我认为你对时间问题的直觉是正确的，你需要在存储加载事件上设置一个监听器，并在加载完成时触发其他逻辑。 - dbrin

谢谢！在我的viewModel中，存储器上的事件监听器“load”解决了这个问题。 - Jurgen

你正在使用错误的组件。请使用 Ext.view.View 组件。 - Evan Trimboli

我正在使用Ext.view.View。 - Jurgen

Answer 1

使用Ext.view.View，这正是该类的用途：

xtype: 'dataview',
cls: 'kpi-tiles kpi-meta',
id: 'statisticsBoxes',
height: 100,
itemSelector: '.statsDiv',
tpl: [
    '<tpl for=".">',
        '<span>',
            '<div class="statsDiv">{statistic}</div> {description}',
        '</span>'
    '</tpl>'
],
store: 'statisticsStore'

- Evan Trimboli

---

谢谢，我会尝试一下。我已经尝试过类似的方法，但没有得到有效的结果。 - Jurgen

Answer 2

你可能需要在你的数据源上设置autoLoad: true。

- rixo

---

商店已在viewModel中加载，并且autoLoad为true。 - Jurgen

Answer 3

在我的viewModel中，存储器上的事件监听器解决了这个问题。

    Statistics: {
        type: 'statistics',
        autoLoad: true,
        listeners: {
            load: function(){
                var data = [{"description": "New", "statistic" : this.data.items[0].data.statistic}];
                Ext.getCmp('statisticsBoxes').update(data);              
            }
        }
    }

当商店被加载时，事件将被触发，更新Xtemplate的新数据。

- Jurgen