Grouping combobox list values helps to systematize the items. This feature is already available in ‘Ext.grid.Panel’ but unfortunately not available for ‘Ext.form.field.ComboBox’. To implement the field as a single class I have changed the ‘Ext.view.BoundList’ throw ‘Ext.form.field.ComboBox:listConfig’ configuration property.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
Ext.define('app.view.city.cmp.GroupComboBox', { extend: 'Ext.form.field.ComboBox', alias: ['widget.groupcombobox', 'widget.groupcombo'], groupListConfig: { groupItemCls: Ext.baseCSSPrefix + 'boundlist-group-item', lastGroupField: false, renderTpl: [ '<div id="{id}-listWrap" data-ref="listWrap"', ' class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '">', '<ul id="{id}-listEl" data-ref="listEl" class="', Ext.baseCSSPrefix, 'list-plain"', '<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>', '>', '</ul>', '</div>', '{%', 'var pagingToolbar=values.$comp.pagingToolbar;', 'if (pagingToolbar) {', 'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);', '}', '%}', { disableFormats: true } ], generateTpl: function () { var me = this; me.tpl = new Ext.XTemplate( '<tpl for=".">', '<tpl if="this.showGroupTitle(' + me.groupField + ')">', '<li class="' + me.groupItemCls + '"> ' + me.getGroupInnerTpl(me.groupField) + '</li>', '</tpl>', '<li style="padding-left: 20px;" role="option" unselectable="on" class="' + me.itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>', '</tpl>', { lastGroupTitle: false, showGroupTitle: function(groupTitle) { if(groupTitle == this.lastGroupTitle) { return false; } else { this.lastGroupTitle = groupTitle; return true; } } } ); }, getInnerTpl: function(displayField) { return '{' + displayField + '}'; }, getGroupInnerTpl: function(groupField) { return '{' + groupField + '}'; } }, initComponent: function() { this.listConfig = Ext.apply( this.groupListConfig, this.listConfig ); this.callParent(); this.listConfig.groupField = this.store.groupField; } }); |
Group combobox store must be configured with ‘groupField‘ property. You also need to create new similar to ‘.x-boundlist-item’ ‘.x-boundlist-group-item’ CSS class in case of Triton theme. To change the layout of Group item you will have to change the ‘GroupComboBox:getGroupInnerTpl()’ method. For example:
|
1 2 3 |
getGroupInnerTpl: function (groupField) { return '<b>Group:</b> {' + groupField + '}'; } |
In the following fiddle sample of the GroupComboBox I have loaded store with 5976 elements to check the performance of the GUI element. Works for ExtJS 6.2 and 6.5 versions.