Extjs 5 XTemplate with JSON store data - json

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

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 2

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

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