sencha touch ajax加载列表

Here is my code I want to load some data by Jsonp and display as list items.

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

The JSONP data looks like this:

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

but the reslut is the page only display two empty lines .

You should use the itemTpl property on the list, instead of tpl, like this:

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