Nie można pobrać jSon dataStore do wykresu ExtJS (Sencha Touch): wyświetla błąd „nie można odczytać właściwości„ długość ”undefined”
EDYCJA Używam próbki wykresów dotykowych Sencha dla wykresów kolumnowych. Kod jest taki jak poniżej
<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>
EDYTOWANE: Teraz mogę załadować dane json, gdy sprawdzę to w debuggerze, ale mój wykres nadal nie jest wyświetlany. Oto mój zaktualizowany kod
<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>
doceniam, jeśli ktoś mógłby mi powiedzieć, czy robię coś złego.
STARY POST: Używam wyjścia json do powiązania z moim wykresem Sencha Column. Mój kod jest następujący:
<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>
To są dane json, które są zwracane z adresu URL
<code>{ data: [ {School:'Dukes',wins:'3'}, {School:'Emmaus',wins:'10'}, {School:'Maryland',wins:'5'}, {School:'Virginia',wins:'2'} ] } </code>
Ale to nie wyświetla wykresu zamiast tego otrzymuję błąd javascript „Nieprzechwycony błąd typu: nie można odczytać długości właściwości niezdefiniowanej” w pliku sencha-touch.js.
Jeśli utrudnię kodowanie danych bezpośrednio z wyjścia json, to działa
<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>
Również po załadowaniu jsonStore z ExtDesigner działa poprawnie. Kiedy kopiuję ten sam kod w moim pliku indeksowym Secha index.js, nie działa.
Czy ktoś może mi powiedzieć, co robię źle w moim kodzie?