Não é possível obter o jSon dataStore no gráfico ExtJS (Sencha Touch): exibe o erro “não é possível ler o comprimento da propriedade 'de indefinido”
EDITADO Estou usando a amostra de gráficos de toque do Sencha fornecida para gráficos de colunas. O código é como abaixo
<code>new Ext.chart.Panel({ fullscreen: true, title: 'Column Chart', dockedItems: [{ xtype: 'button', iconCls: 'help', iconMask: true, ui: 'plain', handler: onHelpTap }, { xtype: 'button', iconCls: 'shuffle', iconMask: true, ui: 'plain', handler: onRefreshTap }], items: { cls: 'column1', animate: { easing: 'bounceOut', duration: 750 }, store: window.store1, shadow: false, gradients: [{ 'id': 'v-1', 'angle': 0, stops: { 0: { color: 'rgb(212, 40, 40)' }, 100: { color: 'rgb(117, 14, 14)' } } }, { 'id': 'v-2', 'angle': 0, stops: { 0: { color: 'rgb(180, 216, 42)' }, 100: { color: 'rgb(94, 114, 13)' } } }, { 'id': 'v-3', 'angle': 0, stops: { 0: { color: 'rgb(43, 221, 115)' }, 100: { color: 'rgb(14, 117, 56)' } } }, { 'id': 'v-4', 'angle': 0, stops: { 0: { color: 'rgb(45, 117, 226)' }, 100: { color: 'rgb(14, 56, 117)' } } }, { 'id': 'v-5', 'angle': 0, stops: { 0: { color: 'rgb(187, 45, 222)' }, 100: { color: 'rgb(85, 10, 103)' } } }], axes: [{ type: 'Numeric', position: 'left', fields: ['wins'], minimum: 0, maximum: 10, label: { renderer: function (v) { return v.toFixed(0); } }, title: 'Wins' }, { type: 'Category', position: 'bottom', fields: ['School'], title: 'School' }], series: [{ type: 'column', axis: 'left', highlight: true, renderer: function (sprite, storeItem, barAttr, i, store) { barAttr.fill = colors[i % colors.length]; return barAttr; }, label: { field: 'wins' }, xField: 'School', yField: 'wins' }], interactions: [{ type: 'panzoom', axes: ['bottom'] }] } }); } </code>
EDITADO: Agora posso carregar os dados do json quando verifico isso no depurador, mas meu gráfico ainda não está sendo exibido. Aqui está meu código atualizado
<code>Ext.regModel('Details', { fields: [{ name: 'School' }, { name: 'wins'}] }); // create the Data Store window.store1 = new Ext.data.Store({ model: 'Details', proxy: { type: 'scripttag', url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset', reader: { root: 'data', type: 'json' } }, autoLoad: true }); </code>
Aprecio se alguém poderia me informar se estou fazendo algo errado.
POST ANTIGO: Eu estou usando uma saída json para vincular ao meu gráfico de colunas Sencha. Meu código é o seguinte -
<code>Ext.regModel('details', { idProperty: 'name', fields: ['School', 'wins'] }); // create the Data Store window.store1 = new Ext.data.Store({ model: 'details', autoLoad: true, proxy: { type: 'ajax', method: 'POST', url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset', reader: { type: 'json', root: 'data' } }, listeners: { load: function (obj, records) { Ext.each(records, function (rec) { console.log(rec.get('name')); }); } } }); </code>
Estes são os dados do json que são retornados do URL
<code>{ data: [ {School:'Dukes',wins:'3'}, {School:'Emmaus',wins:'10'}, {School:'Maryland',wins:'5'}, {School:'Virginia',wins:'2'} ] } </code>
Mas isso não exibe o gráfico, em vez disso, recebo um erro de javascript "Erro de tipo não detectado: não é possível ler o comprimento da propriedade de undefined" no arquivo sencha-touch.js.
Se eu codificar os dados da saída json diretamente, então ele funciona
<code>window.store1 = new Ext.data.JsonStore({ root: 'data', fields: ['School', 'wins'], autoLoad: true, data: [ {School:'Dukes',wins:'3'}, {School:'Emmaus',wins:'10'}, {School:'Maryland',wins:'5'}, {School:'Virginia',wins:'2'} ] }); </code>
Além disso, quando eu carrego o jsonStore do ExtDesigner ele funciona bem. Quando copio o mesmo código no meu arquivo index.js do Secha charts, ele não funciona.
Alguém por favor pode me dizer o que estou fazendo de errado no meu código?