ComboBox custom template

[bkraut]

Hi,

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) {
                    this.setForm(record);    
                },
                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

[Condor]

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').