无法获取jSon dataStore到ExtJS（Sencha Touch）图表：显示错误“无法读取未定义的属性的长度” [英] Can't get jSon dataStore into ExtJS (Sencha Touch) chart: displays error "cannot read property 'length' of undefined"
问题描述
已完成
我使用Sencha触图提供给柱形图。代码如下
EDITED I am using Sencha touch charts sample provided for column charts. The code is as below
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']
}]
}
});
}
EDITED：
我现在能够加载json数据，当我在调试器中检查这个，但我的图表仍然没有显示。这是我更新的代码
EDITED: I am now able to load the json data when I check this in the debugger but my chart is still not getting displayed. Here is my updated 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
});
如果有人可以让我知道，如果我做错了什么。
appreciate if anyone could let me know if I am doing anything wrong.
OLD POST：
我使用一个json输出绑定到我的Sencha Column图表。我的代码如下 -
OLD POST: I am using a json output to bind to my Sencha Column chart. My code is as belows -
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'));
});
}
}
});
这是从URL返回的json数据
This is the json data that is returned from the url
{
data: [
{School:'Dukes',wins:'3'},
{School:'Emmaus',wins:'10'},
{School:'Maryland',wins:'5'},
{School:'Virginia',wins:'2'}
]
}
但这不显示图形，而是我收到一个javascript错误未捕获类型错误：
But this doesn't display the graph instead I get a javascript error "Uncaught type error: Cannot read property lenght of undefined" in sencha-touch.js file.
如果我直接硬编码来自json输出的数据，那么它会工作
If i hard code the data from the json output directly then it works
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'}
]
});
此外，当我从ExtDesigner加载jsonStore它工作正常。当我复制相同的代码在我的Secha图表index.js文件，它不工作。
Also when I load the jsonStore from the ExtDesigner it works fine. When I copy the same code in my Secha charts index.js file it doesn't work.
有人可以让我知道我在代码中做错了什么吗？
Can someone please let me know what I am doing wrong in my code?
推荐答案
我在Sencha的帮助下解决了这个问题。谢谢丹。
以下是解决方案：
I solved this issue with the help of a Sencha folk. Thanks Dan. Here is the solution:
- 在Web服务器上运行示例，因为从文件系统加载JSON文件有时会导致问题
{
"data": [
{
"School": "Dukes",
"wins": "3"
},
{
"School": "Emmaus",
"wins": "10"
},
{
"School": "Maryland",
"wins": "5"
},
{
"School": "Virginia",
"wins": "2"
}
]
}
使用以下数据存储
Use the below data store
window.store1 = new Ext.data.Store({
model: 'Details',
proxy: {
type: 'ajax',
url: 'GetDataset.json',
reader: {
root: 'data',
type: 'json'
}
},
autoLoad: true
});
这篇关于无法获取jSon dataStore到ExtJS（Sencha Touch）图表：显示错误“无法读取未定义的属性的长度”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
