html - ExtJS: data[root].slice is not a function error after adding tpl and store to dataview -

html - ExtJS: data[root].slice is not a function error after adding tpl and store to dataview -

i have template, store , simple dataview add together store , tpl. im unable run , getting next error: data[root].slice not function.

heres fiddle https://fiddle.sencha.com/#fiddle/cc9

thanks.

your store in wrong format, can't have dynamic columns way setting when model static.

this should prepare problems:

var store = ext.create("ext.data.store",{ fields:["val", "heat"], autoload:true, proxy:{ type:"ajax", url:"data1.json", reader:{ type:"json", root:"data.rows" } } }); var mytpl = new ext.xtemplate( '<table border="1px" border-color="#444444" width="100%">', '<tr>', '<th>val</th>', '<th>heat</th>', '</tr>', '<tpl for=".">', '<tr>', '<td align="center">{val}</td>', '<td align="center">{heat}</td>', '</tr>', '</tpl>', '</table>' ); var dataview = ext.create("ext.view.view",{ store: store, tpl:mytpl, itemselector:"", renderto:ext.getbody() });

and data1.json

{ "data" : { "columns": [ "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} ] } }

html extjs