Extjs- Grid column sorting case insensitive - sorting

Question

I am having a grid populated with search results. The sorting seems to be working fine if all the values in each column are numbers or if all of them are in the same case(upper or lower). But some of the columns in my grid like firstname and lastname are a mix of uppercase, lowercase and empty values. When I click on that particular header for sorting purpose, these values seems to be sorted as case sensitive. The uppercase values come one by one, then there are a mix of empty values and then the lowercase values. I want this sorting to be done as case insensitive alphabetically. I think extjs sorts these values based on the ascii values. Is there any way I can overwrite this functionality and where should I be doing that.
For example, I have some values like james, JAMESON and ROBERT. When I click on top of the header, if it ascending, I should be getting james, JAMESON and Robert and all the empty/null values together at the top or bottom. But that is not happening. I am getting some empty values on the top and then JAMESON, james, empty value again , ROBERT followed by empty/null values. How can I make sure all the null values are grouped together and the sorting should be case insensitive.
{
header: "User Last Name",
width: 170,
dataIndex: 'userLastName'
},
{
header: "User First Name",
width: 170,
dataIndex: 'userFirstName'
},
Thanks,

Answer 1

On the field in your model, define a sortType,
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Field-cfg-sortType
either as a function or as one of the predefined strings:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.SortTypes
I would guess that asUCText would be a good start, but I don't know what happens to null values there...

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

In ExtJS5 I add a transform to the sorter, e.g.
sorters: {
transform: function(item) {
return item.toLowerCase();
},
property: 'category_name'
}