状況に応じてExt.Gridの項目を変更したい

 今作っているアプリケーションでは，カテゴリを選択して初めてグリッドに表示する項目が決まるという部分があります。全部で50個ぐらいの項目があるけれど，各カテゴリでは15～20ぐらいになる。他のカテゴリでしか必要のない項目は表示したくない。

ということは，カテゴリを選択してから，Gridの項目数が変わると言うこと。それをどうしたらいいのか，いろいろ考えました。

1. Gridのインスタンスを生成した後に，その項目を増やしたり減らしたりできないか。
2. Gridを宣言するときに，サーバーサイドのデータを元に生成できないか

始めは1の方法を考えていたのですが，フォーラムの次のスレッドを見ているとGridの項目を追加／削除するのは結構大変そうです。

http://www.sencha.com/forum/showthread.php?53009-Adding-removing-fields-and-columns

そこで2の方法で実現することを考えました。そのために必要なのは

1. すでに生成されている基本画面(View)に後からGridPanelを描画する方法を知ること
2. 描画されているGirdPanelを削除する方法を知ること（カテゴリが変更されたときに必要）
3. サーバーサイドの情報を元にGridPanelの項目を定義できるようになること

が必要です。それらを順に解決して行きました。

1は，最初，renderToでコンテナを指定してみましたが，失敗でした。コンテナのレイアウトをうまく使ってくれません。そこでコンテナにaddメソッドで追加してみました。これでできました。次のようにです。

container.add(hoge);
container.layout;

というような感じです。

2.は，removeメソッドが使えました。

container.removeAll(true);

というようにです。

3.は，サーバーサイドのxFrameworkPXのモデルにStoreとGridPanelのコンフィグをJSONで返すメソッドを作成し，それらのメソッドをExt.Directでコールする方法をとりました。Gridを表示する部分のクライアントサイドのコードはつぎのようになります。

showGrid: function () {
    someModel.getGridColumns(function(res){
        var grid = new Ext.grid.EditorGridPanel({
            title: '',
            store: 'DataStore',
            id: 'grdData',
            stripeRows: true,
            view: new Ext.ux.grid.LockingGridView(),
            colModel: new Ext.ux.grid.LockingColumnModel(res)
        });
        //  描画
        with( Ext.getCmp('cntWorkspace') ){
            removeAll();
            add(grid);
            doLayout();
        }
        // ローディングマスク解除
        Ext.getBody().unmask();
    });
}

2行目で someModelのgetGridColumnsメソッドをコールして，そのコールバックの中でGridの描画をしています。9行目でコールバックのレスポンス（GridColumnのコンフィグのJSONデータが返ってくる）を元にcolModelをセットしています。この例では列固定がしたかったので，LockingGridViewとLockingColumnModelを使っています。

これで，サーバーサイドから渡したJSONによって，列の定義をクライアントに渡し，グリッドの表示列を変更することができました。