0

私は Sencha touch を初めて使用し、問題が発生しました。Sencha Listのitemtplに画像を表示したい。その画像の URL は、Web サービスからの JSON 値に依存します。

例: animalType= catの場合は猫の画像を表示する必要があり、animalType= dogの場合は犬の画像を表示する必要があります。私がしなければならないこれらのような多くのカスタマイズがあります。

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

1 に答える 1

0

XTemplate で条件ステートメントまたは Template メンバー関数を使用できます。これにより、1 つのテンプレートが、受信するあらゆる種類のデータに対応します。

于 2013-03-11T05:50:14.377 に答える