Ext.js5的表格的排序扩展（7）

/**
* This example shows how to sort a grid by more than a single field. The store is initially
* sorted by Rating DESC then by Salary ASC, as indicated in the headers. The `multiColumnSort`
* config allows clicking on a header to either add that field as the primary sorter, or
* if already sorted, it flips direction and moves that field to be the primary sort key.
* 在排序方式上做的扩展，初始化的时候按照Rating DESC，然后按照 Salary ASC。没理解到这么做有啥意义，不分析了20151218。回头觉得这样有意义了再看。
*/
Ext.define('KitchenSink.view.grid.MultipleSorting', {
extend: 'Ext.grid.Panel',
xtype: 'multi-sort-grid',

bbar: {
items: [{
xtype: 'component',
itemId: 'order'
}]
},

columns: [{
text: 'Name',
flex: 1 ,
dataIndex: 'name'
}, {
text: 'Rating',
width: 125,
dataIndex: 'rating'
}, {
text: 'Salary',
width: 125,
dataIndex: 'salary',
align: 'right',//这里可以设置表格内容的对齐方式
formatter: 'usMoney'
}],
height: 350,
width : 600,
multiColumnSort: true,//允许点击标题时将他作为分类器

initComponent: function () {
var me = this;

me.store = new Ext.data.Store({
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
],
//请求数据
proxy: {
type: 'memory',
data: this.createFakeData(25),
reader: {
type: 'array'
}
},
autoLoad: true,
sorters: [{
property: 'rating',
direction: 'DESC'
}, 'salary'],
listeners: {
sort: me.updateSortTitle,
scope: me
}
});

me.callParent();
me.updateSortTitle();
},

updateSortTitle: function() {
var sortDetail = [];

this.store.getSorters().each(function(sorter) {
sortDetail.push(sorter.getProperty() + ' ' + sorter.getDirection());
});
this.down('#order').update('Sorted By: ' + sortDetail.join(', '));
},

/**
* Returns an array of fake data
* @param {Number} count The number of fake rows to create data for
* @return {Array} The fake record data, suitable for usage with an ArrayReader
*/
createFakeData: function (count) {
var firstNames  = ['Don', 'Phil', 'Nige', 'Evan', 'Aaron', 'Abe', 'Jamie', 'Doug', 'Craig', 'Mike'],
lastNames    = ['Griffin', 'Guerrant', 'White', 'Trimboli', 'Conran', 'Elias', 'Avins', 'Hendricks', 'Gering', 'Estes'],
ratings      = [1, 2, 3, 4, 5],
salaries    = [85000, 100000, 175000, 162000, 300000];

var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId    = Math.floor(Math.random() * ratings.length),
salaryId    = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId  = Math.floor(Math.random() * lastNames.length),

rating      = ratings[ratingId],
salary      = salaries[salaryId],
name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

data.push([rating, salary, name]);
}
return data;
}
});