1. #1
    Sencha User Baron89's Avatar
    Join Date
    Aug 2012
    Posts
    58
    Vote Rating
    0
    Baron89 is on a distinguished road

      0  

    Default grid panel sort listener

    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("");}
       }
     }
    ])

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    53
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      1  

    Default


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

  3. #3
    Sencha User Baron89's Avatar
    Join Date
    Aug 2012
    Posts
    58
    Vote Rating
    0
    Baron89 is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    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?

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    53
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      1  

    Default


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

  5. #5
    Sencha User Baron89's Avatar
    Join Date
    Aug 2012
    Posts
    58
    Vote Rating
    0
    Baron89 is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    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'

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    53
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      1  

    Default


    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/

  7. #7
    Sencha User Baron89's Avatar
    Join Date
    Aug 2012
    Posts
    58
    Vote Rating
    0
    Baron89 is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    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);
         } 
    });

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    53
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      1  

    Default


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

  9. #9
    Sencha User Baron89's Avatar
    Join Date
    Aug 2012
    Posts
    58
    Vote Rating
    0
    Baron89 is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    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
       )
            }));
        }
    });

  10. #10
    Sencha User Baron89's Avatar
    Join Date
    Aug 2012
    Posts
    58
    Vote Rating
    0
    Baron89 is on a distinguished road

      0  

    Default


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

Thread Participants: 1