CODEWITHSUNDEEP
extjs4.1
Anup
Anup

Reputation: 405

How to get Grid's current State i.e. sorting, grouping, column add , removed

I am using Extjs 4.1

I want to know , How will I get grids current state after user has done any opration.

i.e. After Grid gets rendere.. user may do sorting, adding or removing any column, Or he can move the column as well

I want to know How will I get to know , if user has done any changes i.e. sorting etc ..

Upvotes: 0

Views: 2098

Answers (2)

Rahul khanna
Rahul khanna

Reputation: 21

listeners: {
    selectionchange: function(model, records) {
        alert("selectionchange")
    }, sortchange: function(model, records) {
        alert("sortchange");
    }, columnhide: function( ct, column, eOpts ) {
        alert("columnhide");
    }, columnshow: function( ct, column, eOpts ) {
        alert("columnshow");
    }, columnmove: function( ct, column, eOpts ) {
        alert("columnmove");
    }                               
}

Upvotes: 1

Stephen Tremaine
Stephen Tremaine

Reputation: 954

It doesn't look like there are any events defined for sorting, so you would need to extend the store, and override the sort method for that. For the columns though, they have a beforeshow and beforehide method that you could set listeners to track.

//Define something like this
Ext.define('Ext.ux.data.Store', {
    extend: 'Ext.data.Store',

    sort: function () {
        //Fire Event to notify of change
        this.fireEvent('beforesort', this, this.sorters);

        //Call parent sort function
        this.callParent(arguments);
    }
});

//Then use it like so
Ext.define('MyApp.stores.StoreName', {
    fields:[....],
    proxy: {...},
});

var store = Ext.create('MyApp.stores.StoreName');

store.on('beforesort', trackSorting);

//Tracking function
function trackSorting(store, sorters) {
    //store or use them however you want here
}

//And create a grid
var grid = Ext.create('Ext.grid.Pane', {
    title: 'Test',
    columns: [...],
    store: store
});

//And listen to the columns show/hide events
for (var i = 0, l = grid.columns.length; i < l; i++) {
    grid.columns[i].on({
        beforeshow: beforeShowColumn,
        beforehide: beforeHideColumn
    })
}

//Column tracking information
function beforeShowColumn(column, eOpts) {
    //Note that it's gone somewhere
}
function beforeHideColumn(column, eOpts) {
    //Note that it's back somewhere
}

Upvotes: 0

Related Questions