javascriptextjscomboboxgroupingextjs4.2

EXT 4.2 ComboBox grouping of results with XTemplate

I am trying to group results that I am getting from store to be displayed inside ComboBox . I have a combobox that looks like this: enter image description here

and I need it to look like this :

enter image description here

That means grouped by category (order / invoice ).

My combobox defined like this :

Ext.define('NG.view.searchcombo.Combo', {
    requires: ['Ext.form.field.ComboBox'],
    extend: 'Ext.form.ComboBox',
    alias: 'widget.searchcombo',
    minChars:3,
    fieldLabel: 'Choose Search',
    store: 'Search',
    displayField: 'name',
    valueField: 'id',
    typeAhead: false,
    hideLabel: true,
    hideTrigger:false,
    anchor: '100%',

    listConfig: {
        loadingText: 'Searching...',
        emptyText: 'No matching posts found.',

        // Custom rendering template for each item
        getInnerTpl: function() {
            return '<h3>{name} / {category}</h3>' +'{excerpt}' ;
        }
    },
    pageSize: 10,
    initComponent: function () {    

        this.callParent(arguments);
    }
});

and my data is like this :

[{
    "id": 1,
    "name": "one",
    "category": "invoice"
}, {
    "id": 2,
    "name": "two",
    "category": "invoice"
}, {
    "id": 3,
    "name": "one",
    "category": "order"
}, {
    "id": 4,
    "name": "two",
    "category": "order"
}, {
    "id": 5,
    "name": "three",
    "category": "invoice"
}, {
    "id": 6,
    "name": "four",
    "category": "invoice"
}, {
    "id": 7,
    "name": "three",
    "category": "order"
}, {
    "id": 8,
    "name": "four",
    "category": "order"
}, {
    "id": 9,
    "name": "five",
    "category": "invoice"
}, {
    "id": 10,
    "name": "six",
    "category": "invoice"
}, {
    "id": 11,
    "name": "five",
    "category": "order"
}, {
    "id": 12,
    "name": "six",
    "category": "order"
}, {
    "id": 13,
    "name": "seven",
    "category": "invoice"
}, {
    "id": 14,
    "name": "eight",
    "category": "invoice"
}, {
    "id": 15,
    "name": "seven",
    "category": "order"
}, {
    "id": 16,
    "name": "eight",
    "category": "order"
}]

I think that can be done by using Ext.XTemplate but I am not familiar with Ext.XTemplate.

Solution

  • Please, you can get this done using a Grid to Render your combobox content. Refer to this post: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

    Following the article I was able to create this:

    enter image description here