CODEWITHSUNDEEP
sencha-touchsencha-touch-2
Akshatha
Akshatha

Reputation: 319

How to dynamically set itemTpl based on the items in some other store in sencha touch?

I have 2 stores. SortStore and WorkStore.

This is my WorkStore fields in the model:

          {name: 'domainName',type:'string',mapping:'DomainName'},
          {name: 'objectId',type:'string',mapping:'ObjectID'},
          {name: 'serverName',type:'string',mapping:'ServerName'}, 
          {name: 'sourceWorkset',type:'string',mapping:'SourceWorkset'},
          {name: 'sourceWorkstep',type:'string',mapping:'SourceWorkstep'},

This is my SortStore fields in the model:

         ['name', 'value']

I want to display data from workstore in a list based on the items in the sortstore. if sort store has domain name and object id. The list should populate only those values from the workstore. Stores are getting dynamically loaded by webservice call. 

       {
            xtype:'list',
            id:'workitemlist',
             // store:'WorkitemStore',
            itemTpl:'<table><tr><td valign="top"><img src="{workitemImage}" width=20px height=22px />' +
                '&nbsp;&nbsp;</td><td><span><b>{workitemName}</b></span> <br/>' +
                '<span class="label">Object Id:</span> {objectId} <br /><span class="label">' +
                'Source Workstep: </span>{sourceWorkstep}</td> </tr></table>'


        }

Instead of printing all these in itemTpl I need only those present in sortstore to get populated. How to dynamically set this itemTpl based on the items in some other store. Any help is appreciated.

Upvotes: 1

Views: 3025

Answers (2)

ThinkFloyd
ThinkFloyd

Reputation: 5021

Not sure if that's the best way but the way I have implemented it in past was to keep JSON of templateId(using differentiating field e.g. "tpl_"+field) & templateContent for my app and load it on startup in a variable(tpls). Once it is loaded I can refer it from anywhere like this:

var styleTemplate = eval('tpls.tpl_' + rec.field);

and then pass it to list like this:

{
xtype: 'list',
itemTpl : styleTemplate,
store : listStore,
id : 'ilid',
layout : 'fit'
}

Upvotes: 0

Akshatha
Akshatha

Reputation: 319

We can dynamically set itemTpl this way:

  var template = '<table><tr><td valign="top"><img src="{Image}"' +
        ' width=20px height=22px />' +
        '&nbsp;&nbsp;</td><td><span><b>{Name}</b></span> <br/>';
    var myStore = Ext.getStore('RealStore');
    if (myStore != null) {
        myStore.each(function (record) {
            if (record.get('field')) {
                template += '<span class="label">Domain Name:</span>' +
                    ' {field} <br/>';
            }
  }

Upvotes: 1

Related Questions