Ext.ux.form.combo.Grouping

[kameradpolizei]

Ext JS 4.1.3 plugin, which allows using groups in Ext.form.field.ComboBox

To enable plugin, just put it in your Ext UX folder.

Usage example:

var food = [{
            title: 'Cheesecake Factory',
            cuisine: 'American'
        },{
            title: 'University Cafe',
            cuisine: 'American'
        },{
            title: 'Slider Bar',
            cuisine: 'American'
        },{
            title: 'Shokolaat',
            cuisine: 'American'
        },{
            title: 'La Strada',
            cuisine: 'Italian'
        },{
            title: 'Buca di Beppo',
            cuisine: 'Italian'
    }];


    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['title', 'cuisine']
    });


    var store = Ext.create('Ext.data.Store', {
        groupField: 'cuisine',
        autoDestroy: true,
        model: 'Restaurant',
        data: food
    });


    Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a restaurant',
        renderTo: Ext.getBody(),
        plugins: ['grouping'], //Add Ext.ux.form.combo.Grouping plugin
        displayField: 'title',
        width: 320,
        labelWidth: 130,
        store: store,
        queryMode: 'local',
        typeAhead: true
    });

How it looks:
1.jpg

Plugin GitHub page: https://github.com/kamerad/groupingcombo/

[scottmartin]

Thank you for the contribution.

Few thoughts .. bold the groups and/or perhaps indent the items?
I notice the italic, but it does not stand out unless you are looking.

Scott.

[kameradpolizei]

Thank you for feedback and good advice on highlighting groups!

[talha06]

great extension, I'm sure it will be useful for many people! Thanks for your works!