如何将json文件加载到Sencha Touch中?

时间:2012-04-20 07:03:02

标签: javascript mobile sencha-touch sencha-touch-2

我正在尝试将json文件加载到列表中。谁能看到我做错了什么?我没有收到任何错误。

Data.js:

Ext.regModel('Contact', {
    fields: ['bandName', 'playDate']
});

ListDemo.ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters: 'bandName',
    getGroupString : function(record) {
        return record.get('bandName')[0];
    },

    /*data: [
        { bandName: "Bandname",      playDate: "Thursday 20:00" }
    ]*/

    proxy: {
        type: 'scripttag',
        url: 'http://domain.com/artists.json',
        reader : {
            type : 'json',
        },
        autoLoad: true
    }
});

Index.js:

ListDemo = new Ext.Application({     名称:“ListDemo”,

launch: function() {

    ListDemo.detailPanel = new Ext.Panel({
        id: 'detailpanel',
        tpl: 'Hello, {bandName}!',
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [{
                    text: 'back',
                    ui: 'back',
                    handler: function() {
                        ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
                    }
                }]
            }
        ]
    });

    ListDemo.listPanel = new Ext.List({
        id: 'disclosurelist',
        store: ListDemo.ListStore,
        itemTpl: '<div class="contact">{bandName}<br /><span style="font-size:12px;">{playDate}</span></div>',
        grouped: true,
        onItemDisclosure: function(record, btn, index) {
            ListDemo.detailPanel.update(record.data);
            ListDemo.Viewport.setActiveItem('detailpanel');
        }
    });

    ListDemo.Viewport = new Ext.Panel ({
        fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'slide',
        items: [ListDemo.listPanel, ListDemo.detailPanel]
    });

}
});

我的json文件:

[
    { "id": 1, "bandName": "Moe", "playDate": "Thursday" },
    { "id": 2, "bandName": "Larry", "playDate": "Thursday" },
    { "id": 3, "bandName": "Curly", "playDate": "Thursday" }    
]

谁能看到我做错了什么?

2 个答案:

答案 0 :(得分:0)

您的JSON文件采用数组格式。添加具有此数组值的节点,然后将Sencha Touch文件中的(代理的)数据节点设置为此节点。 JSON看起来如下:

"data": [
    { "id": 1, "bandName": "Moe", "playDate": "Thursday" },
    { "id": 2, "bandName": "Larry", "playDate": "Thursday" },
    { "id": 3, "bandName": "Curly", "playDate": "Thursday" }    
]

答案 1 :(得分:0)

您应该使用Chrome浏览器和Chrome开发者工具来调试代码。你的json文件是正确的。