Reputation: 65
Is there a way to set color of last item (or last two items) of combobox items, i tried to use TPL but didn't work. Here is the TPL defination with XTeplate which was defined before i updated. Thanks a lot.
var resultTplHesap103Ekod = new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item">',
'<h3><span> {val} </h3>',
'<span style="color:blue"> {dsc} </span>', '</div></tpl>'
);
From @MMT,
I changed codes like this.
var resultTplHesap360Ekod = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="(xindex ) > (xcount-1)">',
'<tpl>',
'<div class="x-combo-list-item">',
'<h3> {val} </h3>',
'<span style="color:red"> {dsc} </span>',
'</div>',
'</tpl>',
'</tpl>',
'<tpl if="(xindex ) < (xcount-2)">',
'<tpl>',
'<div class="x-combo-list-item">',
'<h3> {val} </h3>',
'<span style="color:blue"> {dsc} </span>',
'</div>',
'</tpl>',
'</tpl>',
'</tpl>'
);
var comboHsp360EkodHarcama = new Ext.form.ComboBox({
fieldLabel : '',
labelSeparator : '',
triggerAction : 'all',
mode : 'local',
store : storeHesapTasinirHeskod360,
displayField : 'dsc',
valueField : 'val',
emptyText : 'Damga Vergisi Türü',
forceSelection : true,
hidden : true,
forceSelection : true,
tpl : resultTplHesap360Ekod,
width : 300,
listClass : 'x-combo-list-item'
});
var storeHesapTasinirHeskod360 = new Ext.data.JsonStore({
url : '../gen/hesapTasinir.ajax',
root : 'list',
fields : ['dsc', 'val']
});
Now code is working thank a lot @MMT, the last item (for now) is red that was important for me, but now i have another problem. When i select this last RED item it appears black in text fiel at the top ob box. Could you please help me to make it remain RED. Regards.
Upvotes: 0
Views: 5282
Reputation: 2216
try this
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="(xindex ) > (xcount-2)">',
'<tpl>',
'<div class="x-combo-list-item">',
'<h3> {value} </h3>',
'<span style="color:red"> {name} </span>',
'</div>',
'</tpl>',
'</tpl>',
'<tpl if="(xindex ) < (xcount-2)">',
'<tpl>',
'<div class="x-combo-list-item">',
'<h3> {value} </h3>',
'<span style="color:blue"> {name} </span>',
'</div>',
'</tpl>',
'</tpl>',
'</tpl>'
);
Upvotes: 2