grid panel sort listener

Hi all,
is there a listener that listen to grid panel column sorting?
i tried to use sortchange() like below, but seems not working?

Code:

---

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

---

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

Quote:

---

Originally Posted by willigogs

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?

Code:

---

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

---

Quote:

---

Originally Posted by willigogs

Code:

---

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'

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/

Quote:

---

Originally Posted by 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/

---

not sure if there's any different,im using Ext.ux.MultiGroupingGrid, below is my code

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

---

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

Quote:

---

Originally Posted by willigogs

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

Code:

---

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

---

just found Ext.ux.MultiGroupingGrid

Code:

---

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

---