web-dev-qa-db-ja.com

ExtJs grid.Panel store：ロード/リロード後もスクロールバーの位置を維持します

Sencha ExtJs 4.0.2aでgrid.Panelを使用しており、60秒ごとにJsonストアをリロードします。

データの読み込み後にスクロールバーの位置を保持する方法があるかどうか疑問に思いました。
これにより、ユーザーはロード前に探していたレコードを引き続き見ることができます。

タスクを使用してグリッドにデータを再読み込みします。

var task = {
    run: function(){
        Ext.getCmp(panelGridId).getStore().load({
            //Callback function after loaded records
            callback: function(records) {
                //Hide grid if empty records
                if (Ext.isEmpty(records)) {
                    Ext.getCmp(panelGridId).setVisible(false);
                }
                else {
                    if (Ext.getCmp(panelGridId).isHidden()) {
                        Ext.getCmp(panelGridId).setVisible(true);
                        Ext.getCmp(panelGridId).doComponentLayout();
                    }
                }
            }
        });
    },
    interval: 60000 //60 seconds
};

Ext.TaskManager.start(task);

データのロード後、スクロールバーの位置が一番上にリセットされます。

Q： データのロード後にスクロールバーの位置を維持する方法はありますか？

前もって感謝します！

javascriptextjs4.1
16
zerologiko

更新時にスクロール位置を維持するために、この悪い男の子を試してください：

http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh

これは私のツリービューで機能します。

viewConfig: {
   preserveScrollOnRefresh: true
}
18
dbrin

グリッドでpreserveScrollOnRefreshを使用する方法は次のとおりです。

Ext.define('js.grid.MyGrid', {

    extend: 'Ext.grid.Panel',

    viewConfig: {
        preserveScrollOnRefresh: true
    }

これを示すJSFiddleは次のとおりです。

http://jsfiddle.net/cdbm6r0o/7/

ただし、行を選択すると、正しく機能しないようです。これがバグかどうかはわかりません。

'refresh'イベントは、次のコードからトリガーされます。

grid.store.loadData(dataToLoad);

「リフレッシュ」をトリガーする他のイベントを知りません

その他の注意事項 ：

  • 必要に応じてExt.toolbar.Pagingがありました。私はそれを使用しませんでしたが、1つ以上の行を選択するとスクロール保存が台無しになったので、必要なものからページングを削除してください。
  • テーブルでbufferedrendererプラグインを同時に使用すると、スクロール保存が機能しないように見えます。
  • tablePanel.getView（）。focusRow（recrow）も興味深いものですが、bufferedrendererでは機能しません。
7
Oliver Watkins

preserveScrollOnReload viewconfigプロパティを使用できます。

viewConfig: {
    preserveScrollOnReload: true
},
1
kiran

ViewConfigでpreserveScrollOnReload：trueを使用できます

viewConfig：{preserveScrollOnReload：true}、

0
kiran