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

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-03-11T05:50:14

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

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

1 Answers