ExtJS 4.2.2: como mostrar os itens seleccionados no topo da combobox?

Question

ExtJS 4.2.2: como mostrar os itens seleccionados no topo da combobox?

Tenho muito combobox no meu projecto 4.2.2 do ExtJS. A maioria deles tem filtragem e ordenação diferente, e possibilidade de multi-selecção. Agora tenho problemas em mostrar os itens selecionados no topo da lista de combobox. E também a ordenação de outros itens não será alterada! Quero dizer, se os itens de Lista de combobox têm ordenação pelo nome, e 3 de 25 itens são selecionados, 3 itens selecionados devem estar no topo da lista, ordenados com as mesmas regras de ordenação, e outros itens DEVEM SER depois deles também ordenados por as mesmas regras. Obrigado!

0

sorting combobox extjs extjs4.2

Author: Andrey Ugryn, 2018-07-30

Source

1 answers

score 1 · Accepted Answer

É difícil responder sem o teu código de amostra, mas vou publicar uma solução. É muito básico e provavelmente não o melhor, mas funciona para mim e eu usá-lo às vezes. Esta solução requer um campo adicional na função store and custom sort. Eu uso loja local, com loja remota as coisas vão ser mais complicadas.

A Combobox é ordenada pelo campo "Nome".

<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>

Testado com ExtJS 4.2.