Ext JS ComboBox：如何修复BoundList下拉列表顶部的项目答案

【问题标题】：Ext JS ComboBox: how to fix item at the top of BoundList dropdownExt JS ComboBox：如何修复BoundList下拉列表顶部的项目
【发布时间】：2014-10-13 12:22:40
【问题描述】：

我正在使用 ComboBoxes 过滤要显示在按月显示销售额的图表上的产品。如果按文件夹结构排列，库存看起来像这样：

Category: All (3)
|-- Books
|   \-- All (2)
|   \-- Fiction
|       |
|       |-- All (354)
|       |-- Of Mice And Men
|       |-- Infinite Jest
|       |-- (...)
|   \-- Non-fiction
|       |
|       |-- All (17)
|       |-- Surely You're Joking, Mr. Feynman
|       |-- Freakonomics
|       |-- (...)
|
|
|-- Video Games
|   |-- All (2)
|   |-- Strategy
|   \-- Sports
|       |
|       |-- All (3)
|       |-- Soccer
|       |-- Basketball
|       |-- Boxing
|
|
|-- Etc

对于每个产品子类别，我在 ComboBox 的 expand 事件上将值“All (x)”添加到 ComboBox 的商店中以使其可选择，其中 x 是子类别中的项目。 'All (x)' 在索引 0 处插入。'All (x)' 条目从 collapse 的 ComboBox 中删除。

到目前为止，一切都很好。当用户键入他们想要过滤图表的项目的开头时，就会出现问题。我找不到将“粘”“All (x)”到 ComboBox 顶部的方法，因此它不会按如下方式排序：

输入前： http://i.imgur.com/hV4C0YG.png

输入后：http://i.imgur.com/YebYWms.png

我已经尝试添加到 ComboBox 的 change 事件中，以从 ComboBox 的商店中删除并添加“All (x)”选项（如果它不在索引 0 处），但这会强制下拉列表折叠并且不会在没有鼠标单击下拉箭头的情况下展开。在相应的 BoundList refresh 事件上添加监听器也是如此：

{
    extend: 'Ext.form.field.ComboBox',
    queryMode: 'local',
    displayField: 'itemName',
    valueField: 'SKU',
    autoSelect: true,
    typeAhead: true,
    listConfig: {
      listeners: {
        refresh: function(picker) {
            store = picker.getStore();
            // check that the 'All' item is in the store
            if ( store.indexOfId('All') > 0 ) {
                // remove the 'All' entry from the store
                store.remove(store.getById('All'));
                // add it back in
                store.insert(0, {SKU: 'All', itemName: 'All'
                                // etc
                     });
            }
        }
      }
    },

    ...

}

如果有人能指出正确的方向，将“粘性”“全部 (x)”放在列表顶部，我将不胜感激。

【问题讨论】：

标签： javascript extjs combobox extjs4

【解决方案1】：

问题是 sortOnFilter 默认为 true。 filterchange 事件侦听器是在 Ext JS 4.2.0 中添加的，这对于像我这样的新手在单步执行代码时快速跟踪问题有很大帮助。

注意：我在故障排除时使用了 Illuminations Firefox 浏览器插件，我强烈推荐它，甚至超过了 Chrome 的 Sencha App Inspector 插件。

【讨论】：