Extjs 5 XTemplate with JSON storage data
I need help with my xtemplate and proxy storage. No matter what I try, I am stuck with this issue. The xtemplate only displays data from the store without using a proxy.
Work shop:
Ext.create('Ext.data.Store', {
storeId : 'viewStore',
model : 'dataview_model',
data : [
{statistic: '213213', description: 'Hallo'},
{statistic: '534345', description: 'Alloh'},
]
});
Working with Xtemplate and Data Configuration
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 change the data for the template to load data from the stats store, the following error is thrown in the console.log: Uncaught TypeError: Cannot read property getAt from undefined.
Data configuration:
data: [{
description: 'the description',
statistic: Ext.getStore('statisticsStore').getAt(0).data.statistic
}],
Statistics:
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 into the viewModel:
stores: {
Statistics: {
type: 'statistics',
autoLoad: true
}
}
I think the problem is that the store is not loaded at this point. But I don't know how to solve this problem. I know that "Ext.getStore (" statistics "). GetAt (0) .data.statistic 'works in console.log when the store loads.
source to share
Use Ext.view.View
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'
source to share
The store event listener in my Model View 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 an event will be fired which will update the Xtemplate with new data
source to share