javascript - Ext JS 组合框 : how to fix item at the top of BoundList dropdown

Question

我正在使用 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 中删除。

到目前为止，还不错。当用户键入他们想要过滤图表的项目的开头时，就会出现问题。我找不到将“所有 (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
                     });
            }
        }
      }
    },

    ...

}

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

Answer 1

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

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