如何根據來自Web服務的傳入JSON加載Sencha list itemtpl值

Question

我是Sencha touch的新手，並且陷入了一個問題。我想在Sencha List的itemtpl中顯示圖像。該圖片的網址將取決於來自網絡服務的JSON值。

對於防爆：如果animalType =貓然後我需要表現出貓的形象，如果animalType =狗，我想說明的狗的形象。有很多像我需要做的定製。

我知道Sencha需要Store和HTML代碼才能創建itemtpl，但我無法弄清楚需要將這些代碼放在哪裏才能得到我的結果。

任何與示例有關的幫助將深受讚賞。提前致謝。 這是我的代碼。

應用程序/控制器

Ext.define("Abc.controller.InstancesController", { 
extend: 'Ext.app.Controller', 

config: { 
    refs: { 
     main: 'mainpanel', 
     instances: '#instanceList' 
    }, 
    control: { 
     Instances: { 
      initialize: 'initializePanel' 
     } 
    } 
}, 

initializePanel: function() { 
var mainComponent = Ext.getCmp('instanceList'); 
var me = this, 
searchtrains = me.getInstances(); 
mainComponent.setTitle(mainComponent.prop1+" : Running List"); 
searchtrains.setMasked({ 
     xtype: 'loadmask', 
     message: 'Searching...' 
    }); 
    var url='http://abc.com/test.json?'; 
    for (var i = 0; i < mainComponent.prop2.length; i++) { 
     if(i==0) 
     url+='keys[]='+mainComponent.prop1+'_'+mainComponent.prop2[i]; 
     else 
     url+='&keys[]='+mainComponent.prop1+'_'+mainComponent.prop2[i]; 

    } 
    var instanceURL=url; 
var instanceStore = Ext.create('Abc.store.InstancesStore'); 
instanceStore.load({ 
    url:instanceURL, 
    scope: this, 
     callback : function(records, operation, success) { 
     debugger; 
     searchtrains.setMasked(false); 
     console.log('JSON returned:::::::::::::'); 
     this.getInstances().setStore(instanceStore); 
    } 
}); 

應用程序/查看

Ext.define('Abc.view.InstancesView', { 
    extend: 'Ext.List', 
    xtype: 'InstancesList', 
    requires: ['Abc.store.InstancesStore','Ext.data.proxy.JsonP',], 

config: { 
title: 'Running Days', 
id: 'instanceList', 
itemTpl: '<div class="serached_listview">'+ 
     '<div>{key} {key} </div>' + 
     '<div><b>{am_type}</b> </div>' +   ////And so on....... 
     '<div> {app}</div>' + 
     '</div>' 
     , 
     onItemDisclosure: true, 
     store: 'InstanceStore', 
      listeners: [{ 
       fn: 'initialize', 
       event: 'initialize' 
      }] 
} 

應用/商店

Ext.define('Abc.store.InstancesStore', { 
extend: 'Ext.data.Store', 
requires: [ 
    'Ext.data.proxy.JsonP' 
], 
    config: { 
    fields: [ 
    { 
     name: 'key', mapping: 'key' 
    }, 
    { 
     name: 'am_type', mapping: 'am_type' 
    }, 
     { 
     name: 'app', mapping: 'rm.app' 
    }    ////And so on....... 
], 
storeId: 'InstanceStore', 
autoLoad :false, 
proxy: { 
    type:'jsonp',        
    reader: { 
     type: 'json' 
    }, 
    pageParam: undefined, 
    startParam: undefined 
} 
} 
}); 

Answer 1

您可以使用conditional statements OR Template member functions in XTemplate，這樣一個模板將用於您收到的任何類型的數據。