Extjs- 网格列排序不区分大小写

Question

我有一个填充了搜索结果的网格。如果每列中的所有值都是数字或者所有值都在相同的情况下（大写或小写），则排序似乎工作正常。但是我的网格中的某些列（例如名字和姓氏）是大写、小写和空值的混合。当我单击该特定标题进行排序时，这些值似乎被排序为区分大小写。大写值一个一个出现，然后是空值和小写值的混合。我希望这种排序按字母顺序不区分大小写。我认为 extjs 根据 ascii 值对这些值进行排序。有什么办法可以覆盖这个功能，我应该在哪里做。

例如，我有一些价值观，例如 james、JAMESON 和 ROBERT。当我单击标题顶部时，如果它上升，我应该在顶部或底部得到 james、JAMESON 和 Robert 以及所有空/空值。但这并没有发生。我在顶部得到了一些空值，然后是 JAMESON，james，再次为空值，ROBERT，然后是空/空值。如何确保所有空值都组合在一起并且排序不区分大小写。

{ header: "用户姓氏", 宽度：170， 数据索引：'userLastName' }, { header: "用户名", 宽度：170， 数据索引：'用户名' },

谢谢，

Answer 1

在模型中的字段上，定义一个sortType，

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Field-cfg-sortType

作为函数或预定义字符串之一：

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.SortTypes

我猜asUCText 会是一个好的开始，但我不知道那里的空值会发生什么...

Answer 2

var itemsPerPage = 10; // set the number of items you want per page

var data = {

    "success" : true,
    "users" : [{
            "id" : 1,
            "name" : 'ed',
            "email" : "ed@sencha.com"
        }, {
            "id" : 2,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 3,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 4,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 5,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 44,
            "name" : '1',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 45,
            "name" : '2',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 11,
            "name" : 'Ed',
            "email" : "ed@sencha.com"
        }, {
            "id" : 12,
            "name" : 'apple',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 13,
            "name" : 'Apple',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 14,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 15,
            "name" : 'tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 21,
            "name" : 'Ed',
            "email" : "ed@sencha.com"
        }, {
            "id" : 22,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 23,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 24,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },
        {
            "id" : 25,
            "name" : 'Tommy',
            "email" : "tommy@sencha.com"
        },

    ]
}
Ext.apply(Ext.data.SortTypes, {
    asPerson : function (name) {
        // expects an object with a first and last name property
        console.log("Test");
        return name.toUpperCase() + name.toLowerCase();
    }
});

var store = Ext.create('Ext.data.Store', {

        autoLoad : true,
        fields : [{
                name : 'name',
                sortType : 'asPerson'
            }, {
                name : 'email'
                // sortType set to asFloat
            }
        ],
        pageSize : itemsPerPage, // items per page


        data : data,

        proxy : {
            type : 'memory',

            enablePaging : true,
            reader : {
                type : 'json',
                root : 'users',
                successProperty : 'success'
            }

        },

        sorters : [{
                property : 'name',
                direction : 'ASC'
            }
        ],

    });

//Ext.Ajax.request({
//    loadMask: true,
//    url: 'app/data/users.json',
//
//    success: function(resp) {
//      // resp is the XmlHttpRequest object
//      var options = resp.responseText;
//
//
//
//      store.loadData(options);
//    }
//});
//
//


Ext.define('AM.view.user.list', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',

    initComponent : function () {

        Ext.create('Ext.grid.Panel', {
            title : 'My Test Demo',
            store : store,
            columns : [{
                    header : 'ID',
                    dataIndex : 'id'
                }, {
                    header : 'Name',
                    dataIndex : 'name'
                }, {
                    header : 'Email',
                    dataIndex : 'email',
                    flex : 1
                }
            ],
            width : 350,
            height : 280,
            dockedItems : [{
                    xtype : 'pagingtoolbar',
                    store : store, // same store GridPanel is using
                    dock : 'bottom',
                    displayInfo : true,
                    pageSize : 5,

                }
            ],
            renderTo : Ext.getBody()

        });

        this.callParent(arguments);

    }
});

Answer 3

在 ExtJS5 中，我向排序器添加了一个转换，例如

sorters: {
                transform: function(item) {
                    return item.toLowerCase();
                },
                property: 'category_name'
            }