Sencha/ExtJs: ComboBox item separator

Hello,

A mini-post concerning the adding of a item separator in a combobox with Sencha framework.

Here’s the code for the combobox:

...
items: [ 
{
	xtype: 'combobox',
	emptyText:'...',
	allowBlank: false,
	autoSelect: true,
	store: storeCategoryWithAllItem, 
	mode: 'local',
	typeAhead: true,
	triggerAction: 'all',
	displayField: 'value',
	valueField: 'key',
	fieldLabel: 'Category',
	forceSelection: true,
	anchor:'90%',
	selectOnFocus:true,
	editable: false, 
	hiddenName: 'category', // post this name 
	name: 'category',
	value: 'All', // default value 
	tpl: '<tpl for="."><div class="x-boundlist-item">{value}</div><tpl if="xindex == 1"><hr /></tpl></tpl>'
},
...

And the code of the store is:

<!-- ############## Store with 'All' item ############## -->
Ext.namespace('Ext.huo.categoryRangeWithAllItem');
Ext.huo.categoryRangeWithAllItem = [
	['All', 'All'],
 	['QE', 'Question'],
	['RE', 'Answer']
];
 
// simple array store
var storeCategoryWithAllItem = new Ext.data.SimpleStore({
    fields: ['key', 'value'],
    data : Ext.huo.categoryRangeWithAllItem
});

And normally you should obtain the following result:

Note: Depending the Sencha version used, if your browser or debugger reports the following error every time you click on the triangle:

Message: 'Ext.fly(...)' is null or not an object
Line: 58945
Char: 9
Code: 0
URI: http://localhost:8080/myapplisencha/extjs/ext-all.js

this is because the style class used in the tpl is is wrong. So change the tpl to:

tpl: '<tpl for="."><div class="x-combo-list-item">{value}</div><tpl if="xindex == 1"><hr /></tpl></tpl>'

Best regards,

Huseyin OZVEREN