XTemplate Question

[gmeans]

I had hard coded a JSON type array for developing my application similar to this:

App.JSONArray = [{
key: 'value',
key2: 'value2'
},{
key: 'value',
key2: 'value2'
}];

I then created a Ext.data.Store object, and used App.JSONArray as the data.

Where I ran into an issue was trying to use the App.JSONArray as the values for an XTemplate operation. The template would render for each item in the array, but wouldn't render any of the values.

I noticed that if I don't use App.JSONArray as the data element of the store, everything works fine.

1 ) Why does Ext.data.Store do something to the data array that renders it unusable by XTemplate?
2 ) Is there a way to do this without having to create 2 hard coded arrays?

Thanks!

[evant]

Not really sure what you're saying, this works as I would expect:



Ext.setup({
onReady: function(){
var data = [{
key: 'value-1',
key2: 'value2-1'
}, {
key: 'value-2',
key2: 'value2-2'
}];

Ext.regModel('Foo', {
fields: ['key', 'key2']
});

new Ext.data.Store({
model: 'Foo',
data: data
});

var tpl = new Ext.XTemplate('<tpl for="."><div>{key} - {key2}</div></tpl>');
tpl.overwrite(document.body, data);
}
});

[EthanEtienne]

I just ran into this.

This works:

Ext.getCmp('content').update(opts.tpl.apply(listHome));
Ext.getCmp('buttonBack').disable();

But this doesn't

myStore.loadData(listHome,false);
Ext.getCmp('content').update(opts.tpl.apply(listHome));
Ext.getCmp('buttonBack').disable();

I see the 4 rows rendered, but all the values are blank


var myStore = new Ext.data.ArrayStore({
// store configs
autoDestroy: false,
storeId: 'myStore',
// reader configs
fields: [
'id', 'parentId', 'order','type','imgurl','title','subtitle'
]
});

tpl: new Ext.XTemplate('<div class="spacer"></div><tpl for="."><div class="div1" order="{order}"><img src="{imgurl}" class="image1"><div class="title1">{title}</div></div></tpl>')