PDA

View Full Version : Combobox displaylabels in different color.



sagi.kiran
30 Mar 2012, 1:06 AM
Hi,

I am having combobox and according to requirement it need to show few items in blue color font (in Dropdown item list).
Please find attachment of prototype.
33343
I am using Extjs MVC and my combobox piece of code is as below :

{
xtype : 'combobox',
qid : 'plItemListComboFamilyBlock',
name : 'productLineItemFamilyBlock',
store : 'familyblocks.PlItemListFamilyBlock',

editable : false,
fieldStyle : 'background-image:none; background-color:#FFFFCC;',
displayField : 'label',
valueField : 'value',

fieldLabel : '*Product Line (Item) or New Program',
queryMode : 'local',
emptyText : 'Select Product Line Item ...',
allowBlank : false,
grow : true
}

Please help.

Jad
30 Mar 2012, 2:53 AM
hi,you can use tpl and css



tpl: Ext.create('Ext.XTemplate', '<tpl for="."><div class="x-boundlist-item" >{lastName} {firstName}' + '{[ values["phoneNumber"] != "" ? " (" + values["phoneNumber"] + ")" : "" ]}' + '</div></tpl>'),

skirtle
30 Mar 2012, 8:24 PM
Use getInnerTpl:


Ext.create('Ext.form.field.ComboBox', {
cls: 'custom-combo',
displayField: 'label',
editable: false,
queryMode: 'local',
valueField: 'value',
listConfig: {
cls: 'custom-list',
getInnerTpl: function() {
return '<span<tpl if="magic"> class="blue"</tpl>>{label}</span>';
}
},
store: {
fields: ['label', 'value', 'magic'],
data: [
{label: 'Add New', value: 0, magic: false},
{label: 'Corp New Test Project', value: 1, magic: true},
{label: 'Corp: ESG', value: 2, magic: false},
{label: 'Corp: General', value: 3, magic: false},
{label: 'Corp: History', value: 4, magic: true}
]
}
});


.custom-combo .x-form-field {
background-color: #FFC;
background-image: none;
}

.custom-list {
background-color: #FFC;
}

.custom-list .x-boundlist-item {
border-color: #FFC;
}

.blue {
color: blue;
}

sagi.kiran
1 Apr 2012, 10:02 PM
Thanks skirtle - for an accurate help.