ExtJS の DataGrid で状態を保存

Ajax JavaScript

Ext JS にはコンポーネントの状態を保存する機能が用意されており、以下のように DataGrid でも事前に Ext.state.Manager に Ext.state.CookieProvider をセットしておけば、Cookie に DataGrid の状態が保存され、ページ更新時などに自動的に保存された状態が反映されるようになる。

Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    ・・・
    grid = new Ext.grid.GridPanel({
        ・・・
    });

なお、デフォルトでは以下のような状態が保存される。

  • 列の幅
  • 列の並び順
  • 列の表示有無
  • ソートの情報（ソート対象の列とソートの向き）

また、状態を保存するタイミングは Ext.grid.GridPanel 生成時の stateEvents で指定することが可能で、stateEvents のデフォルト値は以下の 3つが設定される。

  • columnmove
  • columnresize
  • sortchange
grid = new Ext.grid.GridPanel({
    columns: [
        ・・・
    ],
    //列の順番と列幅を変更したときにだけ状態を保存するように設定
    stateEvents: ["columnmove", "columnresize"],
    ・・・
});

更に、保存する状態は beforestatesave イベントの処理で変更する事ができ、状態はコンポーネントの id もしくは stateId（設定されていれば）をキーにして Provider に保存される。

<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.0.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0.1/ext-all.js"></script>
<script type="text/javascript">
<!--
    Ext.BLANK_IMAGE_URL = "ext-2.0.1/resources/images/default/s.gif";

    var grid = null;
    var cp = new Ext.state.CookieProvider({
        //Cookie の有効期間を 30日に設定
        expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 30))
    });

    Ext.onReady(function() {

        Ext.state.Manager.setProvider(cp);
        ・・・
        grid = new Ext.grid.GridPanel({
            columns: [
                ・・・
            ],
            stateEvents: ["columnmove", "columnresize"],
            ・・・
        });

        grid.addListener('beforestatesave', function(thisGrid, state) {
            //ソートデータを保存しないように設定
            state.sort = null;
        });

        grid.render('grid-sample');
    });

    //保存されている状態をクリアする
    function clearSavedState() {
        cp.clear(grid.id);
    }
//-->
</script>
</head>
<body>

<div id="grid-sample"></div>
<hr />
<input type="button" value="状態のクリア" onclick="clearSavedState()" />
</body>
</html>