View Full Version : TPL for Multiselect Not working

13 Jun 2013, 5:11 AM
Hi I have a Multiselect, whose list item's color should change according to a flag(attribute) in each of the record.

I tried implementing this way, as I implemented for a combobox, it worked very fine with the combo, but the multiselect doesnt take the Template at all!!

No matter what i put, it still has the default color.

I have seen some forum asking to use listConfig, and Itemtpl, i have even tried that code, which is commented below, and even that didnt do any change

Any Help?

Ext.create('Ext.ux.form.MultiSelect',{ id: 'newMulti'
width: 250,
// listConfig: {
// itemTpl: '<div class="x-boundlist-item" style="color:Blue">{listValue}</div>',
// },
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<ul><li class="x-boundlist-item" style="color:Blue">{listValue}</li></ul>',
'<tpl switch="displayAttribute">',
'<tpl case="R">',
'<div class="x-boundlist-item" data-qtip="ReadOnly value" style="color:Red">{listValue}</div>',
'<tpl default>',
'<div class="x-boundlist-item" style="color:Blue">{listValue}</div>',
fieldBodyCls :'multiSelectCls',
store: Ext.data.StoreManager.lookup('multiStore'),
displayField: 'listValue',
valueField: 'listValueId',
allowBlank: this.getAllowBlank(field),
msgTarget: 'side',
fieldLabel: this.getLabelText(field),
margin: '0 15 5 25'


16 Jun 2013, 9:34 PM
You can do one of two things:

listConfig: {
itemTpl: '<div style="color:Blue">{listValue}</div>'

That injects the content of itemTpl inside of the divs used by the dataview (which are already classed with x-boundlist-item) so you'll have a div with the content of your itemTpl there (nested divs).

Or you can do the following:

listConfig: {
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-boundlist-item" style="color:Blue">{listValue}</div>',

Here you're taking control of the iterating over the dataview's store's items and applying the template completely - in which case you'll add your own div with a class of x-boundlist-item and value inside if it is just the styled value. This seems the better course since you don't need two nested divs - you just want one with some styling applied to it.