Как загрузить значения itemtpl списка Sencha в соответствии с входящим JSON из веб-сервиса

Question

Я новичок в прикосновении Сенча и застрял в проблеме. Я хочу показать изображение в itemtpl из списка Sencha. И URL этого изображения будет зависеть от значений JSON, поступающих от веб-сервиса.

Например: если animalType = cat, то мне нужно показать изображение кошки, а если animalType = dog, я хочу показать изображение собаки. Мне нужно сделать много таких настроек.

Я знаю, что Сенча использует 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);
    }
});

App/ Посмотреть

    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

Вы можете использовать условные операторы ИЛИ функции-члены шаблона в XTemplate, таким образом, один шаблон будет служить для любого типа данных, которые вы получаете.