Extjs 5 XTemplate with JSON store data

Question

I need help with my xtemplate and store with proxy. No matter what I am trying, I am stuck in this problem. The xtemplate is only showing data from a store without using a proxy.

Working store:

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

Working Xtemplate and data config

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

But when I am changing the data for the template so it will load data from the Statistics store, the following error occurs in the console.log: Uncaught TypeError: Cannot read property 'getAt' of undefined.

Data config:

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

Statistics store:

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'
}
});

Produces the following JSON:
[{"statistic":"1"}, {"statistic":"2"}]

The store is loaded in the viewModel:

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

I think the problem is that the store is not loaded at that moment. But I don't know how to solve this problem. I know that 'Ext.getStore('statisticsStore').getAt(0).data.statistic' works in the console.log when the store is loaded.

Answer 1

You probably need to set autoLoad: true on your store.

Answer 2

Use an Ext.view.View, that's exactly what the class is for:

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 3

An event listener on the store in my viewModel solves the problem.

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

When the store is loaded, the event will be fired which updates the Xtemplate with new data