PDA

View Full Version : Datagrid Columns



Kenzo59
4 Oct 2012, 12:22 AM
How can do this :
Click on column => Remove all previous sorting order and add the selected column
Shift click => Add the selected column to sorting order.

Regards,
New user of ExtJs

vietits
4 Oct 2012, 2:32 AM
Try this:


Ext.onReady(function(){
Ext.define('Override.grid.column.Column', {
override: 'Ext.grid.column.Column',
onElClick: function(e, t) {
var me = this;
me.shiftKey = e.shiftKey;
me.callParent(arguments);
delete me.shiftKey;
},
setSortState: function(state, skipClear, initial) {
var me = this;
me.callParent([state, skipClear || me.shiftKey, initial]);
},
doSort: function(state) {
var me = this;
var sorts = [];
var field = me.getSortParam();
var store = me.up('tablepanel').store;


if(me.shiftKey){
store.sorters.each(function(itm){
if(itm.property == field){
sorts.push({
property : field,
direction: state
});
state = null;
} else {
sorts.push({
property : itm.property,
direction: itm.direction
});
}
});
}
if(state){
sorts.push({
property : field,
direction: state
});
}
sorts.length ? store.sort(sorts) : store.sorters.clear();
}
});


var store = Ext.create('Ext.data.Store', {
fields: ['f1', 'f2'],
data: [{
f1: '1.1', f2: '1.2'
},{
f1: '1.1', f2: '2.2'
},{
f1: '2.1', f2: '1.2'
},{
f1: '2.1', f2: '2.2'
}]
});

Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 200,
store: store,
columns: {
items: [{
header: 'F1',
dataIndex: 'f1',
flex: 1
},{
header: 'F2',
dataIndex: 'f2',
flex: 1
}]
}
});
});