Question

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

Answer 1

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

组合框按“名称”字段排序。

<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：如何在组合框顶部显示所选项目？

1 个答案: