How to load Sencha list itemtpl values according to incoming JSON from web service

Question

I am new to Sencha touch and have stuck into a problem. I want to show image in itemtpl of Sencha List. And that image's url will depend upon JSON values coming from web-service.

For Ex: If animalType= cat then I need to show cat's image and if animalType= dog, I want to show dog's image. There is lot of customization like these I need to do.

I know that Sencha take Store and HTML code to create itemtpl but am not able figure out where I need to put these codes to have my results.

Any help with example will be deeply appreciated. Thanks in advance. Here is my code.

App/Controller

  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/View

    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'
            }]
 }

App/Store

  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

You can use conditional statements OR Template member functions in XTemplate, that way one template will serve for any kind of data you receive.