Hello,
A mini-post concerning the adding of a item separator in a combobox with Sencha framework.
Here’s the code for the combobox:
08 | store: storeCategoryWithAllItem, |
12 | displayField: 'value', |
14 | fieldLabel: 'Category', |
19 | hiddenName: 'category', |
22 | tpl: '<tpl for="."><div class="x-boundlist-item">{value}</div><tpl if="xindex == 1"><hr /></tpl></tpl>' |
And the code of the store is:
01 | <!-- ############## Store with 'All' item ############## --> |
02 | Ext.namespace('Ext.huo.categoryRangeWithAllItem'); |
03 | Ext.huo.categoryRangeWithAllItem = [ |
10 | var storeCategoryWithAllItem = new Ext.data.SimpleStore({ |
11 | fields: ['key', 'value'], |
12 | 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:
1 | Message: 'Ext.fly(...)' is null or not an object |
this is because the style class used in the tpl is is wrong. So change the tpl to:
1 | tpl: '<tpl for="."><div class="x-combo-list-item">{value}</div><tpl if="xindex == 1"><hr /></tpl></tpl>' |
Best regards,
Huseyin OZVEREN
Related
