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
}