ExtJS 4.2.2：如何在组合框顶部显示所选项目？

Question

我的 ExtJS 4.2.2 项目中有很多组合框。它们中的大多数具有过滤和不同排序，以及多选的可能性。现在我在组合框列表顶部显示所选项目时遇到问题。而且其他项目的排序也不会改变！我的意思是，如果组合框下拉列表的项目按名称排序，并且选择了 25 个项目中的 3 个，则选择的 3 个项目必须位于列表顶部，按相同的排序规则排序，其他项目必须在它们之后也按相同的规则排序。谢谢！

Answer 1

没有您的示例代码很难回答，但我会 post 一个解决方案。它非常基础，可能不是最好的，但它对我有用，我有时会使用它。此解决方案需要商店中的一个附加字段和自定义排序功能。我使用本地商店，远程商店的事情会更复杂。

组合框按 'name' 字段排序。

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

使用 ExtJS 4.2 测试。

ExtJS 4.2.2：如何在组合框顶部显示所选项目？

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

sorting

combobox

extjs

extjs4.2