View Full Version : tpl--having to iterate additional times when using store as opposed to inline data

23 Oct 2014, 7:54 AM
I need an explanation on why I have to iterate multiple times when using a store for my tpl and not when using inline data using "data" property.

Inside my DataView initComponent:

this.tpl = new Ext.XTemplate(
'<table border="1" width="100%">',
// '<tpl for = ".">',
'<tpl for="COLUMNS">',
'<th style="color:white;">{.}</th>',
// '</tpl>',
// '<tpl for=".">',
'<tpl for="ROWS">',
'<tpl for=".">',
'<td align="center" style="background-color:{[this.getHeatColor(values.HEAT)]}">{VAL}</td>',

when using a store, im having to iterate using <tpl for="."> (commented out above) before looping through COLUMNS array and again before looping ROWS array. I wanted to know why I need to iterate twice because both COLUMNS and ROWS are in the same data root.

When using inline data i can use above tpl as is, with the <tpl for="."> commented out.

JSON data:

{ "data" : {
"Column 1",
"Column 2",
"Column 3"

"ROWS": [
[{"VAL":"R1C1", "HEAT":1}, {"VAL":"R1C2", "HEAT":3}, {"VAL":"R1C3", "HEAT":2}],
[{"VAL":"R2C1", "HEAT":1}, {"VAL":"R2C2", "HEAT":1}, {"VAL":"R2C3", "HEAT":4}]

23 Oct 2014, 11:38 PM
It may help to see your code demonstrated. Can you share a test case at https://fiddle.sencha.com showing how you're processing each use case?

24 Oct 2014, 2:10 PM

here is the fiddle for the inline data use case. Will post use case using json data from store shortly

27 Oct 2014, 4:40 PM
Here is the fiddle for the use case using a store. However, I am unable to run it because of the following error--
document[root].slice is not a function. I am only getting this error in fiddle. Its working as expected inside my app.


29 Oct 2014, 2:44 PM
The store is expecting to be able to read in unique records and apply the data from those records to the view template.
For this sort of data I'd use Ext.Ajax.request() to pull the data down and then apply it to the dataview.