View Full Version : ComboBox custom template

7 Oct 2009, 7:08 AM

I created custom template for the combo box. Here is an example:

this.combo = new Ext.form.ComboBox({
tpl: '<tpl for=".">'
+ '<div style="float: left;width: 120px; padding: 2px;height: 14px;overflow: hidden">{shortTitle}</div>'
+ '<div style="float: left;border-left: 1px solid #CCC;padding: 2px;width: 200px;height: 14px;overflow: hidden">{longTitle}</div>'
+ '<div style="float: right;border-left: 1px solid #CCC;padding: 2px;width: 120px;height: 14px;overflow: hidden">{address}</div>'
+ '</tpl>',
allowBlank: false,
fieldLabel: 'Subject',
name: 'subjectChooser',
store: store,
displayField: 'shortTitle',
grow: true,
hiddenName: this.fieldName,
valueField: 'id',
emptyText: 'Select Subject ...',
selectOnFocus: true,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
width: 250,
listWidth: 500,
listeners: {
select: function(combo, record, index) {
scope: this

Now I have all the values in the list, but I can not select any value. Is there anything else that I have to do?
Best regards

7 Oct 2009, 7:34 AM
Yes, you forgot to specify an itemSelector.

The problem is that your current template doesn't really contain a suitable target for itemSelector.
I would recommend putting an extra <div class="x-combo-list-item"> around the three divs (the default itemSelector is '.x-combo-list-item').