extjs4.1 - 如何获取网格的当前状态，即排序、分组、列添加、删除

Question

我正在使用 Extjs 4.1

我想知道，用户完成任何操作后，我将如何获得网格的当前状态。

即在 Grid 得到渲染后.. 用户可以对任何列进行排序、添加或删除，或者他也可以移动列

我想知道我将如何知道，如果用户做了任何更改，即排序等..

Answer 1

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

Answer 2

看起来没有为排序定义任何事件，因此您需要扩展存储，并为此覆盖排序方法。不过，对于这些列，它们有一个 beforeshow 和 beforehide 方法，您可以设置监听器来跟踪。

---

//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
}