grid panel sort listener

[Baron89]

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]

You need to add the sortChange listener to the grid, not the column
http://docs.sencha.com/ext-js/3-4/#!...ent-sortchange

[Baron89]

You need to add the sortChange listener to the grid, not the column
http://docs.sencha.com/ext-js/3-4/#!...ent-sortchange

may i know how?

[willigogs]

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

[Baron89]

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]

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/

[Baron89]

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/

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]

Where did you get the multiGroupingGrid extension from? Does it support sorting / does it have the sortchange listener implemented?

[Baron89]

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]

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);
};