CODEWITHSUNDEEP
cssextjscomboboxsencha-architect
Razgriz
Razgriz

Reputation: 7343

Setting the style of the items in a ExtJS 4 combo box

I am building this web application and I have a combo box with several items in it. I am able to style the field and the label properly by using fieldCls and labelCls respectively. However, I also want to style the dropdown items so that they'd look the same as the field value.

I looked over the internet and I found this blog which uses the tpl property of the combobox to change the style of the dropdown items. He also uses an existing style class defined in a css file for the style. I tried to do this for my combobox but I don't see a plain "tpl" property. I tried to add the fieldSubTpl, and Sencha Architect gave me this template of sorts to work with:

fieldSubTpl: Ext.create('Ext.XTemplate', 
     '<div class="{hiddenDataCls}" role="presentation"></div>',
     '<input id="{id}" type="{type}" {inputAttrTpl} class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">',
     '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
     '<tpl if="name"> name="{name}"</tpl>',
     '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
     '<tpl if="size"> size="{size}"</tpl>',
     '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
     '<tpl if="readOnly"> readonly="readonly"</tpl>',
     '<tpl if="disabled"> disabled="disabled"</tpl>',
     '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
     '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
     '/>',
     {
         disableFormats: true
     }

However I am not sure how to configure this and I tried to use the code the blog above used, substituting my own style in but to no avail.

It seems that they changed the way tpl is used for comboboxes and I can't find a reference for what I have.

Upvotes: 1

Views: 3193

Answers (1)

Sergey Novikov
Sergey Novikov

Reputation: 4196

You can style dropdown list items in your combobox with Ext.form.field.ComboBox.tpl config.

Check this simple fiddle with working example.

You can read description of how to use it in Ext.view.BoundList.tpl as Ext.view.BoundList is a picker component of Ext.from.field.ComboBox (not sure why this description is not dupicated in Ext.form.field.ComboBox.tpl).

As more complex solution you can overrite Ext.view.BoundList.tpl

Upvotes: 3

Related Questions