0

我是 Sencha touch 的新手，遇到了一个问题。我想在 Sencha List 的 itemtpl 中显示图像。该图像的 url 将取决于来自网络服务的 JSON 值。

例如：如果animalType= cat那么我需要显示 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 中使用条件语句或模板成员函数，这样一个模板将服务于您收到的任何类型的数据。

于 2013-03-11T05:50:14.377 回答