Question

我需要帮助我的xtemplate并使用代理存储。无论我在尝试什么，我都陷入了这个问题。 xtemplate仅显示来自商店的数据而不使用代理。

工作店：

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
    }],

但是当我更改模板的数据以便从Statistics存储中加载数据时，console.log中会出现以下错误：Uncaught TypeError：无法读取属性＆＃39; getAt＆＃39;未定义的。

数据配置：

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：
[{＆＃34;统计＆＃34;：＆＃34; 1＆＃34;}，{＆＃34;统计＆＃34;：＆＃34; 2＆＃34;}]

商店加载在viewModel：

中

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

我认为问题在于当时没有加载商店。但我不知道如何解决这个问题。我知道＆＃39; Ext.getStore（＆＃39; statisticsStore＆＃39;）。getAt（0）.data.statistic＆＃39;加载商店时，在console.log中工作。

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'

Answer 2

您可能需要在商店中设置autoLoad: true。

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

使用JSON存储数据Extjs 5 XTemplate

3 个答案: