PDA

View Full Version : grid panel sort listener



Baron89
24 Jan 2013, 12:56 AM
Hi all,
is there a listener that listen to grid panel column sorting?
i tried to use sortchange() like below, but seems not working?


var cm = new Ext.grid.ColumnModel([
{
header: '',
width: 100,
dataIndex: 'op',
sortable: true,
hidden:true,
listener:{
sortchange : function(){alert("");}
}
}
])

willigogs
24 Jan 2013, 1:39 AM
You need to add the sortChange listener to the grid, not the column :)
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.GridPanel-event-sortchange

Baron89
24 Jan 2013, 1:43 AM
You need to add the sortChange listener to the grid, not the column :)
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.GridPanel-event-sortchange
may i know how?

willigogs
24 Jan 2013, 2:00 AM
var grid = new Ext.grid.GridPanel({
// GRID CONFIG OPTIONS
listeners: {
sortchange: function(thisGrid, sortinfo) {
console.log(thisGrid, sortinfo)
alert('Sort has been clicked!')
}
}
});

Baron89
24 Jan 2013, 4:50 PM
var grid = new Ext.grid.GridPanel({
// GRID CONFIG OPTIONS
listeners: {
sortchange: function(thisGrid, sortinfo) {
console.log(thisGrid, sortinfo)
alert('Sort has been clicked!')
}
}
});

that listener get fired when the page just loaded. and not being called when we click 'sort'

willigogs
25 Jan 2013, 1:39 AM
Can you share how you have implemented the code?

Here's a working example with the exact same code as posted above:
http://jsfiddle.net/Whinters/C5ctN/ (http://jsfiddle.net/Whinters/GL8yU/)

Baron89
27 Jan 2013, 4:54 PM
Can you share how you have implemented the code?

Here's a working example with the exact same code as posted above:
http://jsfiddle.net/Whinters/C5ctN/ (http://jsfiddle.net/Whinters/GL8yU/)
not sure if there's any different,im using Ext.ux.MultiGroupingGrid, below is my code


var DetailGridCfg = {
view: DetailGridView,
store: new DetailStore(),
stateful: true,
collapsible: true,
autoWidth: true,
animCollapse: true,
title: 'Inventory Detail',
loadMask:true ,
enableHdMenu: false,
iconCls: 'icon-grid',
groupCells:[],
cm: DetailGridColumnModel,
plugins:[new MyMultiGroupSummary()],
listener:{
sortchange: function() {
alert('Sort')
}
}
};
DetailGridUi = Ext.extend(Ext.ux.MultiGroupingGrid, {
constructor: function(config) {
config = config || {};
config.tbar = ' ';
DetailGridUi.superclass.constructor.call(this, Ext.apply(DetailGridCfg,config));
},
initComponent: function() {
Ext.apply(this, Ext.apply(this.initialConfig, config));
DetailGridUi.superclass.initComponent.call(this);
}
,onRender:function() {
DetailGridUi.superclass.onRender.apply(this, arguments);
}
});

willigogs
27 Jan 2013, 10:51 PM
Where did you get the multiGroupingGrid extension from? Does it support sorting / does it have the sortchange listener implemented?

Baron89
28 Jan 2013, 6:32 PM
Where did you get the multiGroupingGrid extension from? Does it support sorting / does it have the sortchange listener implemented?
not sure where it extends from, other ppl wrote it.
and i think it supports sorting, below is its store


DetailStore = Ext.extend(Ext.ux.MultiGroupingStore, {
constructor: function(cfg) {
cfg = cfg || {};
DetailStore.superclass.constructor.call(this, Ext.apply({

autoLoad: false,
sortInfo: {field: 'opzone', direction: 'ASC'},
groupField: ['A','B','C'],
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'xx.json'
}),
reader: new Ext.data.JsonReader({
root: 'data',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'total',
},
DetailGridRecord
)
}));
}
});

Baron89
28 Jan 2013, 7:11 PM
just found Ext.ux.MultiGroupingGrid


Ext.ux.MultiGroupingGrid = function(config) {
config = config||{};

// Cache the orignal column model, before state is applied
if(config.cm)
this.origColModel = Ext.ux.clone(config.cm.config);
else if(config.colModel)
this.origColModel = Ext.ux.clone(config.colModel.config);

config.tbar = [{
xtype:'tbtext'
,text:this.emptyToolbarText
},{
xtype:'tbfill'
,noDelete:true
},{
xtype:'tbbutton'
,text:'Options'
,noDelete:true
,menu:{
items: [{
text:'Columns Reset',
scope: this,
disabled: !this.origColModel,
handler: function() {
this.getColumnModel().setConfig(this.origColModel,false);
this.saveState();
return true;
}
},{
text:'Show columns grouped'
,checked: !config.view.hideGroupedColumn
,scope:this
,checkHandler: function (item, checked) {
this.view.hideGroupedColumn = !checked;
this.view.refresh(true);
}
},{
text: 'Clean filters' // Labels.get('label.jaffa.jaffaRIA.jaffa.finder.grid.deactivateFilters')
,scope: this
,handler: function () {
//@TODO use the clearFilters() method!
this.plugins.filters.each(function(flt) {
flt.setActive(false);
});
}
}]
}
}];
Ext.ux.MultiGroupingGrid.superclass.constructor.call(this, config);
//console.debug("Create MultiGroupingGrid",config);
};

willigogs
29 Jan 2013, 1:55 AM
Maybe this thread will be able to offer more assistance:
http://www.sencha.com/forum/showthread.php?110217-MultiGroupingPanel-on-Ext-3.3-beta/page4

Baron89
29 Jan 2013, 11:09 PM
Maybe this thread will be able to offer more assistance:
http://www.sencha.com/forum/showthread.php?110217-MultiGroupingPanel-on-Ext-3.3-beta/page4
thx,btw,do u know how to write a custom sort function?