PDA

View Full Version : How to write conditional in List template?



bundinho
24 Jul 2011, 11:34 PM
Hi, I have a model like that:


tagip.models.Fleet = Ext.regModel('tagip.models.Fleet', {
fields: [
{name: 'tag_id', type: 'int'},
{name: 'tag_name', type: 'string'},
{name: 'nbMoving', type: 'int'},
{name: 'nbStopped', type: 'int'},
{name: 'nbOffline', type: 'int'},
{name: 'nbBlackout', type: 'int'},
{name: 'item_type', type: 'string'},
{name: 'alert_id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'alert_type', type: 'string'},
{name: 'vehicle', type: 'string'},
{name: 'description', type: 'string'},
{name: 'time', type: 'string'},
{name: 'latitude', type: 'float'},
{name: 'longitude', type: 'float'},
{name: 'speed', type: 'float'}

],
proxy: {
type: 'fleetstorage'
}
});



and a view like that :

tagip.views.Home = Ext.extend(Ext.Panel,{
fullscreen : false,
width: 320,
layout: {
type:'vbox',
align: 'center'},
baseCls :'general',
scroll: false,

items : [
{xtype: 'header'},
{
xtype: 'list',
emptyText: 'Aucune flotte disponible',
store: tagip.stores.fleets,
itemTpl: '{tag_name}',
flex: 1,
width: 300
},
{xtype: 'footer'}
],

initComponent: function () {
tagip.stores.fleets.load();

tagip.views.Home.superclass.initComponent.apply(this, arguments);
}


});

All I want to do now is to customize 'itemTpl' according to data 'item_type' value, such as :


if(item_type == 'title'){
....
} else if(item_type == 'fleet') {
...
} else if (item_type == 'alert') {
...
}

Can anyone help me writing the Xtemplate corresponding code please ?

Thanks

ITS Telco
25 Jul 2011, 4:50 AM
Hi bundinho,

I am not sure, if it that would you mean.
But it is possible to make a condition in the tpl.
First you initialize the template with the XTemplate class:

senchaTpl = new Ext.XTemplate(
<tpl if="{item_type} &eq; 'title'">',
'<p>{tag_name}</p>',
..........
'</tpl>',);

To update the panel with this template you can use
tagip.views.Home.update(senchaTpl.applyTemplate(tagip.models.Fleet));

I did not try it by myself. So do not angry if it is the wrong way.
Thank you very much.

best regards
Thomas

jjerome
25 Jul 2011, 4:52 AM
You can find out how to write conditional templates on the Sencha Touch API (http://dev.sencha.com/deploy/touch/docs/) under XTemplate.

Here is another example:


var tpl = new Ext.XTemplate(
'<tpl if="values.item_type == 'title' ">'+
//do formatting here
'</tpl>'+
'<tpl if="values.item_type == 'fleet' ">'+
//etc etc
'</tpl>'
);




Hi bundinho,

I am not sure, if it that would you mean.
But it is possible to make a condition in the tpl.
First you initialize the template with the XTemplate class:

senchaTpl = new Ext.XTemplate(
<tpl if="{item_type} &eq; 'title'">',
'<p>{tag_name}</p>',
..........
'</tpl>',);

Thomas


When I tried using the &eq; or &lt; / &gt; it always seemed to break because of the semicolon. So ive been sticking with the way I posted above..

bundinho
26 Jul 2011, 10:49 PM
Thanks for your help!

slmd
25 Oct 2011, 1:45 AM
Hi!

I want to do the same but this time by checking intervals. Here is some code


'<tpl if="rating >= 2 && rating < 3">'+
'<div class="note">' +
'<img src="" alt="" />'+
'</div>'+
'</tpl>',

It seems like working but i have this showing up : = 2 && rating < 3
Thx

slmd
25 Oct 2011, 3:50 AM
I figured that out



'<tpl if="rating &gt;= 2 && rating &lt; 3">'+
'<div class="note">' +
'<img src="" alt="2" />'+
'</div>'+
'</tpl>',