ExtJS 4.2.2: How to show selected items on top of combobox?

Question

I have a lot of combobox in my ExtJS 4.2.2 project. Most of them has filtering and different sorting, and possibility of multiselection. Now I have issue with showing of selected items in top of the list of combobox. And also sorting of other items wont be changed! I mean if items of combobox dropdown has sorting by name, and 3 of 25 items are selected, 3 selected items must be on top of the list, sorted in same sorting rules, and other items must be after them also sorted by same rules. Thanks!

It's always a good practice to add the chunk of code and a [fiddle or snippet] (fiddle.sencha.com/#view/editor). This helps people to understand the problem better and help you better. Please post a fiddle. Thanks — Shez Ratnani

Zhorov Zhorov · Accepted Answer · 2018-07-31T07:18:49

It's difficult to answer without your sample code, but I'll post one solution. It is very basic and probably not the best one, but it works for me and I use it sometimes. This solution requires one additional field in the store and custom sort function. I use local store, with remote store things will be more complicated.

Combobox is sorted by 'name' field.

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.FocusManager.enable();

        var store = Ext.create('Ext.data.Store', {
            fields: ['order', 'id', 'name'],
            data : [
                {"order": 1, "id": "AA", "name": "AA name"},
                {"order": 1, "id": "BA", "name": "BA name"},
                {"order": 1, "id": "AB", "name": "AB name"},
                {"order": 1, "id": "BB", "name": "BB name"},
                {"order": 1, "id": "AC", "name": "AC name"},
                {"order": 1, "id": "BC", "name": "BC name"},
                {"order": 1, "id": "AD", "name": "AD name"},
                {"order": 1, "id": "BD", "name": "BD name"},
                {"order": 1, "id": "AE", "name": "AE name"}
            ],
            sorters: [
                {
                sorterFn: function(o1, o2) {
                    if (o1.get('order') < o2.get('order')) {
                        return -1;
                    } else if (o1.get('order') == o2.get('order')) {
                        if (o1.get('name') < o2.get('name')) {
                            return -1;
                        } else if (o1.get('name') == o2.get('name')) {
                            return 0;
                        } else if (o1.get('name') > o2.get('name')) {
                            return 1;
                        }
                    } else if (o1.get('order') > o2.get('order')) {
                        return 1;
                    }
                }   
                }
            ]       
        });

        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose items',
            store: store,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'id',
            multiSelect: true,
            renderTo: Ext.getBody(),
            listeners: {
                'change': function (combo) {
                    combo.getStore().each(function(record) {
                        record.set('order', 1);
                    }); 
                    combo.getStore().sort();
                },
                'select': function (combo, records) {
                    Ext.each(records, function(record) {
                        record.set('order', 0);
                    }); 
                    combo.getStore().sort();
                }
            }
        });     

    });
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>

Tested with ExtJS 4.2.

ExtJS 4.2.2: How to show selected items on top of combobox?

1 Answers