无法让jSon dataStore进入ExtJS (Sencha )图表:显示错误“无法读取未定义属性的‘长度’”

Question

编辑的，我正在使用Sencha图表示例，为列图表提供。代码如下

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

但这并不显示图形，相反，我得到了一个javascript错误"Uncaught type error:无法读取未定义的属性长度“在sencha-touch.js .js文件中。

如果我硬编码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'}
    ]
});

另外，当我从jsonStore加载ExtDesigner时，它工作得很好。当我在我的Secha图表index.js文件中复制相同的代码时，它不工作。

有人能告诉我我的代码做错了什么吗？

Answer 1

我在一位神州人的帮助下解决了这个问题。谢谢丹。以下是解决办法：

1. 在web服务器上运行示例，因为从文件系统加载JSON文件有时会导致问题。
2. 构造json数据如下所示 {“数据”：{“学校”：“杜克斯”，“胜利”："3“}，{”学校“："Emmaus"，"wins"："10”}，{“学校”：“马里兰”，“赢”："5“}，{”学校“：”弗吉尼亚“，”赢“："2”}
3. 使用下面的数据存储区 window.store1 =新的Ext.data.Store({ Ext.data.Store：'Details'，代理：{ type：'ajax'，url：'GetDataset.json'，阅读器：{Ext.data.Store：'data'，类型：'json‘}，autoLoad: true }；

Answer 2

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

proxy: {
    type: 'rest',
    url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset', 
    reader: {
        root: 'data'
    }

},

现在，您需要为代理定义回调函数。有一种使用某些配置的优雅方法，但我很荣幸地不知道如何做到这一点，因此我找到了一种不同的解决方案，即艰难的方法，即包装您的服务返回的JSON (就像他们做的这里一样)：

Ext.data.JsonP.callback1();

如果所有这些都不起作用，也可以考虑将以下内容添加到代理中，并作为JSON响应的一部分发出一个“总计”。

totalProperty: 'total'

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

试着阅读这和这。最重要的是，祝你好运，这就是我的大副。还请看一下这的帖子。

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

欢呼里万诺夫