Question

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

例如，我有一些像詹姆斯，詹姆森和罗伯特这样的价值观。当我单击标题顶部时，如果它升序，我应该在顶部或底部将james，JAMESON和Robert以及所有空/ null值放在一起。但那并没有发生。我在顶部得到一些空值，然后是JAMESON，james，空值再次，ROBERT后跟空/空值。如何确保将所有空值组合在一起，并且排序应不区分大小写。

{ 标题：“用户姓氏”，宽度：170， dataIndex：'userLastName' }， { 标题：“用户名”，宽度：170， dataIndex：'userFirstName' }，

谢谢，

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是一个好的开始，但我不知道那里的null值会发生什么......

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'
            }

Extjs- Grid列排序不区分大小写

3 个答案: