web-dev-qa-db-ja.com

extjsグリッドで選択した行を更新した後に覚えておいてください

私は問題があります。私はextjsgridを使用しています。このグリッドはsecondsごとに更新されます。

この関数で更新します：

ND.refresh = function() {
    ND.commList.load();
}


var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);

しかし、誰かがそれを強調するために行を選択したとき、それはresetこの選択です。選択した行を覚えて、更新後に再度強調表示するにはどうすればよいですか？

これは私のグリッドです：

var grid = Ext.create('Ext.grid.Panel', {
     autoscroll: true,
     region: 'center',
     store: ND.dashBoardDataStore,
     stateful: true,
     forceFit: true,
     loadMask: false,
     stateId: 'stateGrid',

     viewConfig: {
         stripeRows: true
     },
     columns: [{
         text: 'Vehicle',
         sortable: true,
         flexible: 1,
         width: 60,
         dataIndex: 'vehicle'
     }, {
         text: 'CCU',
         sortable: true,
         flexible: 0,
         width: 50,
         renderer: status,
         dataIndex: 'ccuStatus'
     }]
 });

みんなありがとう

extjsgridrefreshrowselection
14
Rick Weller

私は単純な Ext.grid.Panel 拡張機能を作成しました。これは、ストアのリロード前に選択された後方行を自動的に選択します。あなたはそれを試すことができます このjsFiddle

Ext.define('PersistantSelectionGridPanel', {
    extend: 'Ext.grid.Panel',
    selectedRecords: [],
    initComponent: function() {
        this.callParent(arguments);

        this.getStore().on('beforeload', this.rememberSelection, this);
        this.getView().on('refresh', this.refreshSelection, this);
    },
    rememberSelection: function(selModel, selectedRecords) {
        if (!this.rendered || Ext.isEmpty(this.el)) {
            return;
        }

        this.selectedRecords = this.getSelectionModel().getSelection();
        this.getView().saveScrollState();
    },
    refreshSelection: function() {
        if (0 >= this.selectedRecords.length) {
            return;
        }

        var newRecordsToSelect = [];
        for (var i = 0; i < this.selectedRecords.length; i++) {
            record = this.getStore().getById(this.selectedRecords[i].getId());
            if (!Ext.isEmpty(record)) {
                newRecordsToSelect.Push(record);
            }
        }

        this.getSelectionModel().select(newRecordsToSelect);
        Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
    }
});
20
sbgoran

簡単な解決策は、選択した行のjsインデックスのどこかに保存することです。次に、リロード後、グリッドの選択モデルを使用してインデックスでこの行を簡単に選択できます。

選択モデルを取得する： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel

var selectionModel = grid.getSelectionModel()

選択した行を取得します： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

var selection = selectionModel.getSelection()

選択した行を元に戻す： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select

selectionModel.select(selection)
6
Andrey Selitsky

以前に選択したレコードを選択する別の方法は次のとおりです。

var selectionModel = grid.getSelectionModel()

// get the selected record
var selectedRecord = selectionModel.getSelection()[0]

// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);

// select by index
grid.getSelectionModel().select(selectedIdx);

何らかの理由で、grid.getSelectionModel（）。select（record）メソッドが機能しませんでしたが、インデックスによる選択は機能しているようです。

編集：grid.getSelectionModel（）。select（record）メソッドが機能しなかった理由を見つけました。どうやらストアがリロードされ、レコードインスタンスは同じではありません（自動生成されたExt IDが異なります）。この場合、selectAt（）を使用する必要があります。

3
Sasha Brocato

extjs4.1.7ユーザーの場合

のステートメントに関する回避策が必要です

refreshSelection（）{

.。
Ext.defer（this.setScrollTop、30、this、[this.getView（）。scrollState.top]）

}

したがって、setScrollTopは存在しなくなります

したがって、有効なソリューションはadd me.getView（）。preserveScrollOnRefresh = trueです。

initComponentで

Ext.define('PersistantSelectionGridPanel', {
    extend: 'Ext.grid.Panel',
    selectedRecords: [],
    initComponent: function() {
        this.callParent(arguments);

        this.getStore().on('beforeload', this.rememberSelection, this);
        this.getView().on('refresh', this.refreshSelection, this);

        //-------------------------------------------
        me.getView().preserveScrollOnRefresh = true;
        //-------------------------------------------
    },
    rememberSelection: function(selModel, selectedRecords) {
        if (!this.rendered || Ext.isEmpty(this.el)) {
            return;
        }

        this.selectedRecords = this.getSelectionModel().getSelection();
        this.getView().saveScrollState();
    },
    refreshSelection: function() {
        if (0 >= this.selectedRecords.length) {
            return;
        }

        var newRecordsToSelect = [];
        for (var i = 0; i < this.selectedRecords.length; i++) {
            record = this.getStore().getById(this.selectedRecords[i].getId());
            if (!Ext.isEmpty(record)) {
                newRecordsToSelect.Push(record);
            }
        }

        this.getSelectionModel().select(newRecordsToSelect);
    }
});
1
PMargarido

このコードを変更しました。選択を行い、ストアにフィルターを適用して再ロードすると、選択モデルには、この選択されたコレクション（インデックス0）に最初の空の配列があります。

この変更は、「refreshSelection」関数の最後の行にあります。

if (newRecordsToSelect.length >= 1){
        this.getSelectionModel().select(newRecordsToSelect);
        Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
    }
0
Pixman