Can'；t将jSon数据存储到ExtJS（Sencha Touch）图表中：显示错误“；无法读取属性'；长度'；“未定义”的定义；

已编辑 我正在使用Sencha touch charts为柱形图提供的示例。代码如下

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']
            }]
        }
    });

}

编辑： 我现在可以在调试器中检查json数据，但我的图表仍然没有显示出来。这是我的更新代码

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
});

如果有人能告诉我我做错了什么，我将不胜感激

旧帖子： 我使用json输出绑定到Sencha柱形图。我的代码如下-

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数据

{
   data: [
       {School:'Dukes',wins:'3'},
       {School:'Emmaus',wins:'10'},
       {School:'Maryland',wins:'5'},
       {School:'Virginia',wins:'2'}
   ]
}

但这并没有显示图形，而是在sencha-touch.js文件中出现了一个javascript错误“Uncaught type error:Cannot read property length of undefined”

如果我直接从json输出硬编码数据，那么它就工作了

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 charts index.js文件中复制相同的代码时，它不起作用

---

有人能告诉我我的代码哪里做错了吗？

我在这里猜，但这似乎是我以前遇到过的问题。我相信问题出在代理人身上。 尝试：

现在，您需要为代理定义回调函数。有些配置有一种优雅的方式，但我真的不知道怎么做，所以我当时找到了一种不同的解决方案，一种艰难的方式，就是将服务返回的JSON封装在其中（就像他们那样）：

如果没有这样的工作，也可以考虑将以下内容添加到代理中，并发出一个“总数”作为JSON响应的一部分。

totalProperty: 'total'

但请记住，我真的不认为这会有多大帮助，我只是根据一个工作样本抛出这些想法

试着阅读和阅读。最重要的是，祝你好运，这就是我的头儿。 也可以看看帖子

我希望这能为你指明正确的方向。就像我说的，我不确定，这是我最好的猜测。我可能错了

干杯

---

里瓦诺夫

我在这里猜测，但这似乎是我以前遇到过的问题。我相信问题出在代理人身上。 尝试：

现在，您需要为代理定义回调函数。有些配置有一种优雅的方式，但我真的不知道怎么做，所以我当时找到了一种不同的解决方案，一种艰难的方式，就是将服务返回的JSON封装在其中（就像他们那样）：

如果没有这样的工作，也可以考虑将以下内容添加到代理中，并发出一个“总数”作为JSON响应的一部分。

totalProperty: 'total'

但请记住，我真的不认为这会有多大帮助，我只是根据一个工作样本抛出这些想法

试着阅读和阅读。最重要的是，祝你好运，这就是我的头儿。 也可以看看帖子

我希望这能为你指明正确的方向。就像我说的，我不确定，这是我最好的猜测。我可能错了

干杯

---

里瓦诺夫

我在一个僧茶人的帮助下解决了这个问题。谢谢你，丹。 以下是解决方案：

在web服务器上运行该示例，因为从文件系统加载JSON文件有时会导致问题

按如下方式构造json数据

{
    "data": [
        {
            "School": "Dukes",
            "wins": "3"
        },
        {
            "School": "Emmaus",
            "wins": "10"
        },
        {
            "School": "Maryland",
            "wins": "5"
        },
        {
            "School": "Virginia",
            "wins": "2"
        }
    ]
}

使用下面的数据存储

window.store1 = new Ext.data.Store({
    model: 'Details',
    proxy: {
        type: 'ajax',
        url: 'GetDataset.json',
        reader: {
            root: 'data',
            type: 'json'
        }
    },
    autoLoad: true
});

---

我在一个僧茶人的帮助下解决了这个问题。谢谢你，丹。 以下是解决方案：

在web服务器上运行该示例，因为从文件系统加载JSON文件有时会导致问题

按如下方式构造json数据

{
    "data": [
        {
            "School": "Dukes",
            "wins": "3"
        },
        {
            "School": "Emmaus",
            "wins": "10"
        },
        {
            "School": "Maryland",
            "wins": "5"
        },
        {
            "School": "Virginia",
            "wins": "2"
        }
    ]
}

使用下面的数据存储

window.store1 = new Ext.data.Store({
    model: 'Details',
    proxy: {
        type: 'ajax',
        url: 'GetDataset.json',
        reader: {
            root: 'data',
            type: 'json'
        }
    },
    autoLoad: true
});

---

你的模型是什么样子的？这是我的模型-Ext.regModel（'details'，{idProperty:'name'，fields:['School'，'wins']}）；'“名称”，您的

idProperty

，不在字段列表中！将其替换为“School”。是的，即使在替换idProperty之后，它仍然会在sencha-touch.js文件中显示javascript错误。嗨，这有点紧急。如果有人能尽快帮助我，我将不胜感激。您的模型是什么样子的？这是我的模型-Ext.regModel（'details'，{idProperty:'name'，fields:['School'，'wins']}）；'“名称”，您的

idProperty

，不在字段列表中！将其替换为“School”。是的，即使在替换idProperty之后，它仍然会在sencha-touch.js文件中显示javascript错误。嗨，这有点紧急。如果有人能尽快帮我，我将不胜感激。谢谢你的建议。我现在可以加载json数据，但我的图表仍然无法显示。下面是修改后的代码-Ext.regModel（'Details'，{fields:[{name:'School'}，{name:'wins'}]}）；//创建数据存储窗口.store1=new Ext.Data.Store（{model:'Details'，proxy:{type:'scripttag'，url:''，reader:{root:'Data'，type:'json'}}，autoLoad:true}）；如果我遗漏了什么，请告诉我。请提供一些关于如何显示图表的见解。请参阅我编辑的帖子，其中包含将数据存储绑定到柱状图的代码。谢谢您的建议。我现在可以加载json数据，但我的图表仍然无法显示。下面是修改后的代码-Ext.regModel（'Details'，{fields:[{name:'School'}，{name:'wins'}]}）；//创建数据存储窗口.store1=new Ext.Data.Store（{model:'Details'，proxy:{type:'scripttag'，url:''，reader:{root:'Data'，type:'json'}}，autoLoad:true}）；如果我遗漏了什么，请告诉我。请提供一些关于如何显示图表的见解。请参阅我编辑的帖子，其中包含将数据存储绑定到柱状图的代码。