sencha touch ajax加载列表

Question

这是我的代码，我想通过Jsonp加载一些数据并显示为列表项。

Ext.setup({
    onReady: function(){

        Ext.regModel('Provinces', {
            fields: [{
                name: 'ProvinceID',
                type: 'int'
            }, {
                name: 'ProvinceName',
                type: 'string'
            }]
        });

        var store = new Ext.data.Store({
            autoLoad: true,
            model: 'Provinces',
            fields:['ProvinceName', 'ProvinceID'], 
            proxy: {
                url: 'http://172.19.44.122/BC/Home/GetProvices',
                type: 'jsonp'  
            },
              autoLoad:true
        });

        new Ext.List({
            fullscreen: true,
            itemSelector: '.province',
            tpl: '<tpl for="."><div class="province">{ProvinceName} - {ProvinceID}</div></tpl>',
            store: store
        });
    }
});

JSONP数据如下所示：

Ext.data.JsonP.callback1([{"ProvinceID":1,"ProvinceName":"shanghai"},"ProvinceID":2,"ProvinceName":"zhejiang"}]);

但结果是该页面仅显示两个空行。

Answer 1

您应该在列表上使用itemTpl属性，而不是tpl，如下所示：

new Ext.List({
    fullscreen: true,        
    itemTpl: '{ProvinceName} - {ProvinceID}',
    store: store
});