Ext JS 6.2.0：如何将网格列表过滤器项按升序排列？

针对Rating列过滤器选项按加载顺序而非数值升序排列的问题，有以下几种可行方案：

1. 手动指定排序后的选项数组 #

如果Rating的可选值是固定的（1-5），直接在过滤器配置中传入预先排序好的选项数组即可：

{
    text: 'Rating',
    dataIndex: 'rating',
    filter: {
        type: 'list',
        // 数值升序的选项列表
        options: [1, 2, 3, 4, 5]
        // 若需显示文本与值对应，可使用对象数组并确保已排序
        // options: [{text: '1星', value: 1}, {text: '2星', value: 2}, {text: '3星', value: 3}, {text: '4星', value: 4}, {text: '5星', value: 5}]
    }
}

2. 动态获取数据后排序再赋值 #

如果选项是从Store或后端接口动态加载的，在数据加载完成后对选项数组进行数值排序，再设置给过滤器：

// 假设用于获取Rating选项的Store为ratingOptionStore
ratingOptionStore.load({
    callback: function(records) {
        // 将Store记录转换为过滤器所需的选项格式，并按value数值升序排序
        const sortedOptions = records.map(record => ({
            text: record.get('displayText'),
            value: record.get('ratingValue')
        })).sort((a, b) => a.value - b.value);
        
        // 获取目标Grid和Rating列的过滤器
        const targetGrid = Ext.ComponentQuery.query('#yourGridId')[0];
        const ratingFilter = targetGrid.getColumnManager().getColumnByDataIndex('rating').getFilter();
        
        // 更新过滤器选项
        ratingFilter.setOptions(sortedOptions);
    }
});

3. 配置过滤器的sortFn自定义排序逻辑 #

利用List过滤器的sortFn配置项，自定义选项的排序规则，确保按数值升序排列：

{
    text: 'Rating',
    dataIndex: 'rating',
    filter: {
        type: 'list',
        // 自定义排序函数，按选项的value数值升序排列
        sortFn: (optionA, optionB) => {
            // 若value是字符串类型的数字，需先转为数值再比较
            const valA = parseInt(optionA.value, 10);
            const valB = parseInt(optionB.value, 10);
            return valA - valB;
        }
    }
}

注意事项 #

如果Rating的值以字符串形式存储（例如"1"、"2"），排序时必须先转换为数值类型，否则会出现字符串排序的异常（如"10"排在"2"之前）。

内容的提问来源于stack exchange，提问作者StSch