ExtJSで楽しくRIA業務アプリ開発 » php

ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

佐竹裕行 — Fri, 23 Apr 2010 02:38:54 +0000

今回はエディタブル・グリッド(エディター・グリッド)の紹介です。エディタブルとエディターはどっちの方が正しいのかわかりませんが。クラス名はエディター･グリッドなのですが、ここではエディタブル・グリッドで統一します。
エディタブル・グリッドはグリッドの内容をグリッド上で直接編集する機能です。一般的にはカラムのダブルクリックで編集することが多いと思います。今回は以前紹介したグリッドへの追加と削除をベースにエディタブル・グリッドに変更します。

エディタブル･グリッド

ExtJS　フォームの基本とExtJS入門23を先にご覧下さい。

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.EditorGridPanelクラス
http://extdocs.xenophy.com/?class=Ext.grid.EditorGridPanel

HTML:





    
    ExtJS名古屋勉強会　エディタブル・グリッド

    
    
    
    

    
    
    


    
        
        エディタブル・グリッドで項目を追加・変更します。
        

        
        

        Java Script：editorgrid-basic.js

Java Script:


//グリッドへの追加削除
Ext.onReady(function()
{
    var grid = new Ext.grid.EditorGridPanel({
        renderTo:'grid',
        title:'エディタブル・グリッド 追加と削除が可能',
        height:210,
        width:400,

        //カラムモデル
        cm:new Ext.grid.ColumnModel([
            {
                id:'title',
                header:'項目名',
                dataIndex:'title',
                width:100,
                editor:{    //カラムのエディタを指定
                    xtype:'textfield',
                    emptyText:'入力してください。'
                },
                renderer:function(v){   //カラムのデータが空のとき表示
                    return v ? v : 'ダブルクリックで編集';
                }
            }
        ]),

        //セレクションモデル
        sm:new Ext.grid.RowSelectionModel({
            singleSelect:true
        }),

        //ストア
        store:new Ext.data.JsonStore({
            fields:['title']
        }),

        //GridViewのコンフィグを設定
        viewConfig:{
            deferEmptyText:false,
            emptyText:'グリッド項目はありません',
            forceFit:true
        },

        tbar:[
            {
                text:'追加',
                iconCls:'add',
                handler:function(btn){  //グリッドに項目を追加する処理
                    //編集中の場合は編集をやめる
                    grid.stopEditing();
                    var data = {};

                    var RecordType = grid.getStore().recordType;
                    var newItem = new RecordType(data);
                    grid.getStore().insert(0,newItem);
                }
            },
            {
                text:'削除',
                iconCls:'delete',
                handler:function(btn){  //選択したレコードを削除する処理

                    //編集中の場合は編集をやめる
                    grid.stopEditing();

                    //1.選択されている項目を取得
                    var record = grid.selModel.getSelected();

                    if (record) {
                        //2.recordをremoveでストアから取り除く
                        grid.getStore().remove(record);
                    }
                }
            }
        ]
    });
});

実行結果:

エディタブル･グリッド

基本的にはExtJS入門23　グリッドへの項目の追加と削除を基本にエディタブル・グリッドに変更します。
Ext.grid.EditorGridクラスはExt.grid.GridPanelクラスのサブクラスであり、ほとんどのグリッドパネルの基本的なコンフィグがエディタブルグリッドに適応できます。そのため今回もExtJS入門23のグリッドパネルのコンフィグがほぼそのまま使えます。
変更箇所はクラスをExt.grid.GridPanelからExt.grid.EditorGridPanelといくつかの編集のカラムの設定になります。
クラスの変更は単純に書き換えるだけです。

つぎに編集時のエディタを設定します。前回のフォームの基本を踏まえて、今回はtextfieldで編集させます。もちろんDateFieldなどより高機能なエディタも設定できます。


//カラムモデル
cm:new Ext.grid.ColumnModel([
	{
		id:'title',
		header:'項目名',
		dataIndex:'title',
		width:100,
		editor:{    //カラムのエディタを指定
			xtype:'textfield',
			emptyText:'入力してください。'
		},
		renderer:function(v){   //カラムのデータが空のとき表示
			return v ? v : 'ダブルクリックで編集';
		}
	}
])

さらにここではrendererで空の状態でのグリッドの表示を設定しています。エディタに設定されているemptyTextはエディタが起動しているときだけしか表示されません。セルが空の場合に任意にテキストを表示したい場合は、サンプルのようにカラムのレンダラーで設定します。

またエディタを起動中に項目の追加・削除を行った場合少し気持ち悪い挙動をします。それはエディタが起動中にも関わらず、別の場所からストアが変更されているためです。これを避けるには、別の場所で編集が始まったらグリッドパネルの編集をとめる必要があります。編集をとめるにはEditorGridPanelクラスのstopEditiong()メソッドを実行します。tbarのボタンのハンドラー内で実行しています。


tbar:[
	{
		text:'追加',
		iconCls:'add',
		handler:function(btn){  //グリッドに項目を追加する処理
			//編集中の場合は編集をやめる
			grid.stopEditing();
			var data = {};

			var RecordType = grid.getStore().recordType;
			var newItem = new RecordType(data);
			grid.getStore().insert(0,newItem);
		}
	}
]

グリッドからエディタブル・グリッドへの変更はこれだけで終了です。グリッドさえ分かっていれば簡単ですね。エディットされた内容はストアに保存されています。

ExtJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）

佐竹裕行 — Mon, 19 Apr 2010 03:19:25 +0000

前回はツールバーでグリッドの情報を取得し、ポップアップで表示しました。今回はグリッドのダブルクリックと右クリックのイベントで詳細を表示する処理を実行します。

グリッドのダブルクリックと右クリック（コンテクストメニュー）で処理を実装することで、より直感的なグリッドの操作が可能になります。
サンプルは前回のExJS入門21　グリッド・セレクション・モデルをベースにイベントの処理を追加しています。

右クリックメニュー

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
今回はExt.menu.Menuクラスを右クリックに仕込んでいます。

ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridPanelクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridPanel

ExtJS -3.0 日本語APIドキュメント – Ext.menu.Menuクラス
http://extdocs.xenophy.com/?class=Ext.menu.Menu

PHP:


1,
            'rank'=>1,
            'name'=>'IE',
            'percentage'=>62.69,
            'url' => 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
            'img' => '../img/ie64.png'
        ),
        array(
            'id'=>2,
            'rank'=>2,
            'name'=>'Firefox',
            'percentage'=>24.61,
            'url' =>'http://mozilla.jp/firefox/',
            'img' => '../img/firefox64.png'
        ),
        array(
            'id'=>3,
            'rank'=>3,
            'name'=>'Chrome',
            'percentage'=>4.63,
            'url' => 'http://www.google.com/chrome/',
            'img' => '../img/chrome64.png'
        ),
        array(
            'id'=>4,
            'rank'=>4,
            'name'=>'Safari',
            'percentage'=>4.46,
            'url'=> 'http://www.apple.com/jp/safari/',
            'img' => '../img/safari64.png'
        ),
        array(
            'id'=>5,
            'rank'=>5,
            'name'=>'Opera',
            'percentage'=>2.40,
            'url' => 'http://jp.opera.com/',
            'img' => '../img/opera64.png'
        ),
        array(
            'id'=>6,
            'rank'=>6,
            'name'=>'Opera Mini',
            'percentage'=>0.53,
            'url' => 'http://jp.opera.com/',
            'img' => '../img/opera64.png'
        )
    );

    if ($name) {
        $newData = array();
        foreach($data as $val){
            if(stristr($val['name'],$name)) {
                $newData[] = $val;
            }
        }
        $data = $newData;
    }

    if ($limit && $start + $limit <= count($data)) {
        //ページング用
        $rows = array_slice($data,$start,$limit);
    }else {
        //ページングしない
        $rows = $data;
    }

    $res = array(
        'success' => true,
        'total' => 6,
        'rows' => $rows
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($res);

    die();

HTML:





    
    ExtJS名古屋勉強会　クリックイベント

    
    
    
    

    
    
    


    
        
            クリックイベントの処理を設定します。
        

        
            rowdblclick:行のダブルクリック
            rowcontextmenu:行の右クリック
        
        
        

        Java Script：grid-click.js


        PHP(JSONデータ)：data.php

Java Script:


//グリッドイベント
Ext.onReady(function()
{
    //詳細表示処理
    //詳細表示イベント実行時にこの関数を呼ぶ。
    var showInfo = function(record) {
        if(!record) {return;};

        //表示するメッセージ
        var msg = new Ext.XTemplate(
            '',
            'ブラウザ名：{name}
',
            '順位：{rank}
',
            'シェア：{percentage}%
',
            'DOWNLOAD
',
            '',
            '').apply(record.data);

        Ext.Msg.alert('選択中のブラウザ',msg);
    };

    //1.データを用意
    //今回はPHPでdata.phpでJSONを返しています。

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'data.php',//php等が使えない場合はここをdata:'data.json'としてローカルファイルの取得してもよいです。
        root:'rows',            //実際のデータ位置（プロパティ名）
        totalProperty:'total',  //全件数を返すプロパティ名を指定
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'},
            {name:'url',type:'url'},
            {name:'img',type:'url'},
        ],
        autoLoad:true           //描写後に自動的に初回のリクエストをかける
    });

    //3.SelModelの設定
    //今回は一度に一つの行しか選択できないようにしている。
    var sm = new Ext.grid.RowSelectionModel({
        singleSelect:true
    });

    //4.カラムモデルを用意
    var column = new Ext.grid.ColumnModel([
        {
            id:'rank',
            header:'順位',
            dataIndex:'rank',
            width:50
        },
        {
            id:'name',
            header:'ブラウザ名',
            dataIndex:'name',
            width:100
        },
        {
            id:'percentage',
            header:'シェア',
            dataIndex:'percentage',
            width:80
        },
        {
            id:'id',
            header:'ID',
            dataIndex:'id',
            width:20
        }
    ]);

    var contextMenu = new Ext.menu.Menu({
        items: [
            {
                text:'詳細表示',
                iconCls:'info',
                scope:this,
                handler: function(btn){
                    var record = grid.selModel.getSelected();
                    showInfo(record);
                }
            },{
                text:'削除',
                iconCls:'delete',
                scope:this,
                handler:function(btn){
                    var record = grid.selModel.getSelected();
                    Ext.Msg.alert('選択中のブラウザの削除', '「' + record.get('name') + '」を削除しますか？');
                }
            }
        ]
    });

    //5.グリッドパネルの作成
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        autoExpandColumn:'name',
        title:'SingleSelectのグリッドパネル',
        height:210,
        width:400,
        cm:column,
        sm:sm,
        store:store,
        tbar:[
            {
                text:'詳細情報表示',
                iconCls:'info',
                handler:function(btn){
                    var record = grid.selModel.getSelected();
                    showInfo(record);
                }
            },
            {
                text:'削除',
                iconCls:'delete',
                handler:function(btn){
                    var record = grid.selModel.getSelected();
                    Ext.Msg.alert('選択中のブラウザの削除', '「' + record.get('name') + '」を削除しますか？');
                }
            }
        ],
        //イベントを設定する。
        /**
         *  今回はどちらのイベントも引数は同じ。
         *  rowdblclick:ダブルクリックイベント
         *  rowcontextmenu:ダブルクリックイベント
         *      grid:グリッド
         *      row:ダブルクリックした行のインデックス
         *      e:イベントオブジェクト
         *
         */
        listeners:{
            rowdblclick:function(grid, row, e){
                var record = grid.getStore().getAt(row);
                showInfo(record);
            },
            rowcontextmenu:function(grid, row, e){
                //右クリックでセレクト処理(セレクトしたものを後で右クリックメニューで取得する)
                grid.getSelectionModel().selectRow(row);

                //右クリックイベントを止める。ここで止めないとブラウザの右クリックメニューが表示されてしまう。
                e.stopEvent();

                //コンテクストメニューを表示
                contextMenu.showAt(e.getXY());
            }
        }
    });
});

実行結果:

右クリックメニュー

グリッドの部分は基本的に前回のサンプルのままです。
ExtJSのクラスに定義されているイベントを処理するときはコンフィグ・オプションのlistenersにイベントごとの処理を記述していきます。
今回はExt.grid.GridPanelクラスのrowdblclickイベントとrowcontextmenuイベントの処理を書いていきます。listenersコンフィグはオブジェクトで指定します。それぞれのイベントに対応するプロパティ名に処理を定義します。各イベントは違った引数を持ちます。ExtJSの標準クラスのイベントについては各クラスのAPIリファレンスのイベント項目に記載されています。
今回は偶然ですがrowdblclickとrowcontextmenuのイベントは同じ引数を持ちます。

第1引数：対象のグリッド・オブジェクト
第2引数：クリックした、行のインデックス
第3引数：イベントオブジェクト

・グリッドのダブルクリック　（rowdblclickイベント）


listeners:{
	 rowdblclick:function(grid, row, e){
		var record = grid.getStore().getAt(row);
		/**
		 * 上の処理はこう書いても同じです。
		 * var store = grid.getStore();
		 * var record = grid.getAt(row);
		 */

		showInfo(record);
	}
}

イベント処理はこれだけです。イベントの引数にそれぞれ、grid,row,eを当てています。ダブルクリックした対象のrecordをストアから取得して、そのレコードをshowInfo()で処理しています。showinfo()は詳細をポップアップで表示する処理です。grid.getStore()でストアを取得して、getAt()でレコードを取得します。showInfo()関数は前回のサンプルでtbarのハンドラーに仕込んだ処理と全く同じです。
意外と簡単ですね。次にrowcontextmenuのイベントを処理します。

ExtJSでは独自の右クリックメニュー（コンテクストメニュー）を設定することができます。基本的な考え方としてはExtのMenuクラス(Ext.menu.Menuクラス等)を右クリックした位置に表示して、ブラウザの右クリックメニューをキャンセルさせることで、ExtJSで独自の右クリックメニューを表示させています。

rowdblclickと同じでrowcontextmenuも基本的にストアからrecordを取り出すことが目標です。
処理の大まかな流れは

1.右クリックした行を選択する。
　↓
2.イベントを止める
　↓
3.メニューを表示
　↓
4.メニューの処理でrecordを取得

になります

実際にサンプルを見ていきます。


listeners:{
		rowcontextmenu:function(grid, row, e){

			//右クリックでセレクト処理(セレクトしたものを後で右クリックメニューで取得する)
			grid.getSelectionModel().selectRow(row);
			//右クリックイベントを止める。ここで止めないとブラウザの右クリックメニューが表示されてしまう。
			e.stopEvent();

			//コンテクストメニューを表示
			contextMenu.showAt(e.getXY());
		}
}

コンテクストメニューの処理


  var contextMenu = new Ext.menu.Menu({
        items: [
            {
                text:'詳細表示',
                iconCls:'info',
                scope:this,
                handler: function(btn){
                    var record = grid.selModel.getSelected();
                    showInfo(record);
                }
            },{
                text:'削除',
                iconCls:'delete',
                scope:this,
                handler:function(btn){
                    var record = grid.selModel.getSelected();
                    Ext.Msg.alert('選択中のブラウザの削除', '「' + record.get('name') + '」を削除しますか？');
                }
            }
        ]
    });

右クリックした行を選択して、その後その行のレコードを取得して処理します。コンテクストメニューの処理は前回のtbarの記述とよく似ています。今回は詳細表示のほかに削除のメニューもつけています。削除の処理はまだダミーでポップアップが表示されるだけです。handlerの中が右クリックの実際の処理ですが、recordをセレクションモデルから取得しています。あとはrowdblclickと同じでshowInfow()に処理を渡しています。削除のほうも処理の内容はほぼ同じです。

これでグリッドの各行に対応した右クリックを表示することができるようになりました。右クリックメニューはさらに階層を使ってアクションを沢山指定することもできます。詳しくはAPIリファセンスを参照してください。

この2つのイベント以外にもグリッドには様々なイベントが定義されています。APIリファレンスのイベントの項目を見て、listenersに設定して試してみるとExtJSグリッドの多機能さが良く分かると思います。また独自のイベントを定義することもできます。イベントについてはまた別の機会に解説します。

ExJS入門21　グリッド・セレクション・モデル

佐竹裕行 — Fri, 16 Apr 2010 02:45:07 +0000

グリッド関連4回目は、セレクションモデルを設定して、行の選択状態を取得する簡単なサンプルです。
ExtJSのグリッドの様々なセレクションモデルを設定して、行の選択の仕方を指定します。今回は一番基本となる、単一の行を選択するセレクションモデルを設定して、その行の情報を取り出すようにします。以前に紹介したグリッドのサンプルではセレクションモデルが明示的に設定されていないためグリッドのデフォルトのセレクションモデルが自動的に設定されていました。実際に試してもらうと分かりやすいのですが、Ctrlもしくはcommandキーを押しながらクリックすると複数選択ができます。
今回のサンプルではセレクションモデルを独自に設定して、一行だけを選択するようにします。

セレクションモデル

グリッドパネルについてはこちらもご覧下さい。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.RowSelectionModelクラス
http://extdocs.xenophy.com/?class=Ext.grid.RowSelectionModel

PHP:


1,
            'rank'=>1,
            'name'=>'IE',
            'percentage'=>62.69,
            'url' => 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
            'img' => '../img/ie64.png'
        ),
        array(
            'id'=>2,
            'rank'=>2,
            'name'=>'Firefox',
            'percentage'=>24.61,
            'url' =>'http://mozilla.jp/firefox/',
            'img' => '../img/firefox64.png'
        ),
        array(
            'id'=>3,
            'rank'=>3,
            'name'=>'Chrome',
            'percentage'=>4.63,
            'url' => 'www.google.com/chrome/',
            'img' => '../img/chrome64.png'
        ),
        array(
            'id'=>4,
            'rank'=>4,
            'name'=>'Safari',
            'percentage'=>4.46,
            'url'=> 'http://www.apple.com/jp/safari/',
            'img' => '../img/safari64.png'
        ),
        array(
            'id'=>5,
            'rank'=>5,
            'name'=>'Opera',
            'percentage'=>2.40,
            'url' => 'http://jp.opera.com/',
            'img' => '../img/opera64.png'
        ),
        array(
            'id'=>6,
            'rank'=>6,
            'name'=>'Opera Mini',
            'percentage'=>0.53,
            'url' => 'http://jp.opera.com/',
            'img' => '../img/opera64.png'
        )
    );

    if ($name) {
        $newData = array();
        foreach($data as $val){
            if(stristr($val['name'],$name)) {
                $newData[] = $val;
            }
        }
        $data = $newData;
    }

    if ($limit && $start + $limit <= count($data)) {
        //ページング用
        $rows = array_slice($data,$start,$limit);
    }else {
        //ページングしない
        $rows = $data;
    }

    $res = array(
        'success' => true,
        'total' => 6,
        'rows' => $rows
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($res);

    die();

HTML:





    
    ExtJS名古屋勉強会　Selection

    
    
    
    

    
    
    


    
        
            行のセレクト情報を取得します。
        

        
        

        Java Script：grid-selection.js

        PHP(JSONデータ)：data.php

Java Script:


//フィルターグリッド
Ext.onReady(function()
{
    //1.データを用意
    //今回はPHPでdata.phpでJSONを返しています。

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'data.php',
        root:'rows',            //実際のデータ位置（プロパティ名）
        totalProperty:'total',  //全件数を返すプロパティ名を指定
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'},
            {name:'url',type:'url'},
            {name:'img',type:'url'},
        ],
        autoLoad:true           //描写後に自動的に初回のリクエストをかける
    });

    //3.SelModelの設定
    //今回は一度に一つの行しか選択できないようにしている。
    var sm = new Ext.grid.RowSelectionModel({
        singleSelect:true
    });

    //4.カラムモデルを用意
    var column = new Ext.grid.ColumnModel([
        {
            id:'rank',
            header:'順位',
            dataIndex:'rank',
            width:50
        },
        {
            id:'name',
            header:'ブラウザ名',
            dataIndex:'name',
            width:100
        },
        {
            id:'percentage',
            header:'シェア',
            dataIndex:'percentage',
            width:80
        },
        {
            id:'id',
            header:'ID',
            dataIndex:'id',
            width:20
        }
    ]);

    //5.グリッドパネルの作成
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        autoExpandColumn:'name',
        title:'SingleSelectのグリッドパネル',
        height:210,
        width:400,
        cm:column,
        sm:sm,
        store:store,
        tbar:[
            {
                text:'選択中のブラウザ情報',
                iconCls:'tick',
                handler:function(btn){
                    var record = grid.selModel.getSelected();
                    var msg;
                    if (!record) {
                        msg = 'ブラウザが選択されていません';
                    }else{
                        msg = new Ext.XTemplate(
                            '',
                            'ブラウザ名：{name}
',
                            '順位：{rank}
',
                            'シェア：{percentage}%
',
                            'DOWNLOAD
',
                            '',
                            '').apply(record.data);
                    }

                    Ext.Msg.alert('選択中のブラウザ',msg);
                }
            }
        ]
    });
});

実行結果:

セレクションモデル

今回はRowSelectionModelクラスを使っています。RowSelectionModelクラスのコンフィグオプションのsingleSelectをTrueに設定するだけで、グリッドの一行のみを選択するようになります。これをGridPanelのselModelコンフィグに設定します。コンフィグsmはselModelの省略形です。

次に選択した行のデータの取り出しです。選択した行の状態を把握しているのは対象のグリッドに設定されているセレクションモデルになります。選択行の情報の取出しにはまずセレクションモデルを取得します。またRowSelectionModelではgetSelected()メソッドで選択行のレコードが取得できるため以下のようになります。


var record = grid.selModel.getSelected();

これで選択行のレコードが取得できました。recordはストアにある全データの中の1組データのまとまりです。storeクラスのfieldsで設定したデータの1組を保持しています。今回は単純にデータを取り出すだけですので,record.dataと直接データを取得しています。
詳しくはExt.data.Recordクラスを参照してください。recordについてはEditorGridのサンプルの際に詳しく説明します。

これで1行を選択することができ、選択された一行のデータの取得方法が分かりました。今回はこの選択行の取得をtbarに設置したボタンで起動します。

GridPanelのtbarにはボタンやフィールドなどが置かれます。前回のフィルタリングではテキストフィールドをせっちしました。ここではボタンを設置して選択行の情報をポップアップで開くようにします。
tbarの基本的な設定は以下のようになります。iconClsはボタンにアイコンを設定します。iconClsはCSSのスタイルで指定します。今回はHTMLの中に記述しています。
handlerに処理を記述します。ボタンが押された後にここでグリッドの情報を取得してアラートを表示します。


 tbar:[
	{
		text:'ボタンの表示名',
		iconCls:'tick',
		handler:function(btn){
			//ボタンの処理
		}
	}
]

グリッドパネルのセレクションモデルには様々な選択方式があります。色々と試してみるとよいかもしれません。

ExtJS入門20　グリッドにフィルタリング機能を追加する

佐竹裕行 — Thu, 15 Apr 2010 02:50:37 +0000

引き続きGridPanel関連のサンプルの紹介です。
今回はグリッドに表示されている一覧から特定のデータをフィルタリングして表示する方法をご紹介します。

フィルタリング

グリッドのデータはストアによって管理されています。グリッドの一覧からフィルタリングして特定の情報だけを表示したい場合は、大きく二つの方法があります。
一つはstoreクラスのfilterメソッドを使ってフィルタリングを行う方法。もう一つはstoreがロードしているデータをフィルタリングされたデータに更新する、つまりサーバーサイドでフィルタリングを行ってstoreを更新する方法があります。
今回はこの2つの機能を同時に持ったグリッドパネルのサンプルになります。

グリッドパネルについてはこちらもご覧下さい。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.data.Storeクラス
http://extdocs.xenophy.com/?class=Ext.data.Store

PHP:


1,
            'rank'=>1,
            'name'=>'IE',
            'percentage'=>62.69
        ),
        array(
            'id'=>2,
            'rank'=>2,
            'name'=>'Firefox',
            'percentage'=>24.61
        ),
        array(
            'id'=>3,
            'rank'=>3,
            'name'=>'Chrome',
            'percentage'=>4.63
        ),
        array(
            'id'=>4,
            'rank'=>4,
            'name'=>'Safari',
            'percentage'=>4.46
        ),
        array(
            'id'=>5,
            'rank'=>5,
            'name'=>'Opera',
            'percentage'=>2.40
        ),
        array(
            'id'=>6,
            'rank'=>6,
            'name'=>'Opera Mini',
            'percentage'=>0.53
        )
    );

    if ($name) {
        $newData = array();
        foreach($data as $val){
            if(stristr($val['name'],$name)) {
                $newData[] = $val;
            }
        }
        $data = $newData;
    }

    if ($limit && $start + $limit <= count($data)) {
        //ページング用
        $rows = array_slice($data,$start,$limit);
    }else {
        //ページングしない
        $rows = $data;
    }

    $res = array(
        'success' => true,
        'total' => 6,
        'rows' => $rows
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($res);

    die();

HTML:





    
    ExtJS名古屋勉強会　Grid　Filter and Sort

    
    
    
    

    
    


    
        
        Gridデータのフィルタリングを行います。
        
        フィルタリングにはローカルのstore内で行うものと、サーバーサイドで行いstoreをリロードする方法の2種類があります。
        

        

        Java Script：grid-filter.js

        PHP(JSONデータ)：data.php

Java Script:


//フィルターグリッド
Ext.onReady(function()
{
    //1.データを用意
    //今回はPHPでdata.phpでJSONを返しています。

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'data.php',
        root:'rows',            //実際のデータ位置（プロパティ名）
        totalProperty:'total',  //全件数を返すプロパティ名を指定
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'}
        ],
        autoLoad:true           //描写後に自動的に初回のリクエストをかける
    });

    //3.カラムモデルを用意
    var column = new Ext.grid.ColumnModel([
        {
            id:'rank',
            header:'順位',
            dataIndex:'rank',
            width:50
        },
        {
            id:'name',
            header:'ブラウザ名',
            dataIndex:'name',
            width:100
        },
        {
            id:'percentage',
            header:'シェア',
            dataIndex:'percentage',
            width:80
        },
        {
            id:'id',
            header:'ID',
            dataIndex:'id',
            width:20
        }
    ]);

    //4.フィルター用
    var tbar = [
        'ローカル:',
        {
            xtype:'textfield',
            emptyText:'ブラウザ名を入力',
            listeners:{
                valid:function(field){
                    var cond = field.getValue();
                    store.filter('name',cond,true);
                }
            }
        },
        'リモート:',
        {
            xtype:'textfield',
            emptyText:'ブラウザ名を入力',
            listeners:{
                valid:function(field){
                    var cond = field.getValue();
                    store.load({
                        params:{
                            name:cond
                        }
                    });
                }
            }
        }
    ];
    //5.グリッドパネルの作成
    new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        autoExpandColumn:'name',
        title:'フィルター付きグリッドパネル',
        height:210,
        width:400,
        cm:column,
        store:store,
        tbar:tbar
    });
});

実行結果:

Filter機能

リモートフィルタリング：
サーバーサイドのPHPは前回のものから若干変更があります。サーバーサイドでのフィルターを実行するために、元データを変更する処理が追加されています。

リモート（サーバーサイド）でのフィルタリングは、storeの内容を入れ替えて行います。
storeのloadメソッドを使ってstoreの内容をリロードします。loadメソッドの引数にはオブジェクトを渡します。この引数オブジェクトのparamsプロパティに設定されたオブジェクトがstoreの内容を再リクエストする際にPOST値として設定されます。
今回の場合はブラウザ名でフィルタリングを行うため、paramsに設定するオブジェクトのnameプロパティに条件を設定しています。


store.load({
	//pramsプロパティに設定したオブジェクトがリクエスト時にPOST値に設定される
	params:{
		name:'条件'
	}
});

このリクエストに基づきサーバーサイドでフィルタリングを行い、結果を返すことでストアの内容はフィルタリングされたデータに切り替わります。
注意点としては、storeにはフィルタリング後のデータしかストアされていない点です。後述するローカルのフィルタリングと違い、フィルター条件が変更されるたびにstoreを更新するためのリクエストが必要になります。、

ローカルフィルタリング：
ローカルでのフィルタリングはグリッドのstoreにストア済みのデータの中からグリッドに表示する項目をフィルタリングする方法です。storeのfilterメソッドを使うことで、特定のデータのみをグリッドに表示させます。第1引数にnameを指定し,第2引数に条件を設定します。第3引数以降はオプションになり、マッチング条件を設定できます。詳しくはAPIリファレンスのfilterメソッドの項目をご覧下さい。
今回はnameフィールドのブラウザ名が一部でもマッチする場合を設定してます。


	store.filter(
		'name',	//対象のフィールド
		cond,	//検索条件。フォームより入力
		true	//先頭以外にもマッチさせる
	);

今回は紹介していませんが、より複雑な条件でフィルタリングを行う場合はfilterByメソッドを使います。filterByメソッドではカスタムのフィルタリング関数を記述してフィルタリングを実行できます。

storeのfilterメソッドが実行されると、条件にマッチしたrecordのみがGridに再設定されます。
ローカルで行うフィルタリングでは、毎回リクエストを行わないため比較的すばやいフィルタリングが実行できます。ただし、あくまでstore内のデータだけに対してのフィルターになります。ページングなどを使っている場合に全件中からフィルタリングを行いたい場合はこの方法ではなく、リモートでフィルタリングを行う必要があります。

FireFoxのFirebugなどでリクエストの実行状況を見ながらサンプルを試すと、動作の状況がよくわかるかと思います。リモートの方は入力があるたびにリクエストが実行されていますが、ローカルのときはリクエストが実行されません。

またこのフィルタリング機能はstoreの機能ですので、グリッド以外にもstoreを使っている場所で様々な場所で使うことができるので、色々な場所で試してみるとよいかと思います。

ExtJS入門19　グリッドにページング機能を追加する

佐竹裕行 — Wed, 14 Apr 2010 03:37:39 +0000

かなり更新をさぼってしまいましたが。勉強会に向けてGrid関連のサンプルを紹介していきます。

Ext.PagingToolbar

今回はGridにページング機能を追加するサンプルになります。
多くのwebアプリケーションで項目の一覧を表示する際にページング機能が実装されています。ExtJSの一覧表示といえばGridPanelですが、GridPanelに簡単にページング機能を追加するためのExt.PagingToolbarというものがあります。今回はこのPagingToolbarをグリッドに使ってみます。

グリッドパネルについてはこちらを

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.PagingToolbar
http://extdocs.xenophy.com/?class=Ext.PagingToolbar

PHP(Gridのデータ):


1,
            'rank'=>1,
            'name'=>'IE',
            'percentage'=>62.69
        ),
        array(
            'id'=>2,
            'rank'=>2,
            'name'=>'Firefox',
            'percentage'=>24.61
        ),
        array(
            'id'=>3,
            'rank'=>3,
            'name'=>'Chrome',
            'percentage'=>4.63
        ),
        array(
            'id'=>4,
            'rank'=>4,
            'name'=>'Safari',
            'percentage'=>4.46
        ),
        array(
            'id'=>5,
            'rank'=>5,
            'name'=>'Opera',
            'percentage'=>2.40
        ),
        array(
            'id'=>6,
            'rank'=>6,
            'name'=>'Opera Mini',
            'percentage'=>0.53
        )
    );

    if ($limit && $start + $limit <= count($data)) {
        //ページング用
        $rows = array_slice($data,$start,$limit);
    }else {
        //ページングしない
        $rows = $data;
    }

    $res = array(
        'success' => true,
        'total' => 6,
        'rows' => $rows
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($res);

    die();

HTML:





    
    ExtJS名古屋勉強会　Grid　Paging

    
    
    
    
    
    


    
        Ext.PagingToolbarを使ってグリッドにページング機能を追加する。

        
        

        Java Script：grid-pager.js

        PHP(JSONデータ)：data.php

Java Script:


//ページングできるグリッド
Ext.onReady(function()
{
    //1.データを用意
    //今回はPHPでdata.phpでページング用のJSONを返しています。

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'data.php',
        root:'rows',            //実際のデータ位置（プロパティ名）
        totalProperty:'total',  //全件数を返すプロパティ名を指定
        baseParams:{            //最初のリクエスト時のパラメーター
            limit:2,
            start:0
        },
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'}
        ],
        autoLoad:true           //描写後に自動的に初回のリクエストをかける
    });

    //3.カラムモデルを用意
    var column = new Ext.grid.ColumnModel([
        {
            header:'順位',
            sortable:true,
            dataIndex:'rank',
            width:50
        },
        {
            header:'ブラウザ名',
            sortable:true,
            dataIndex:'name',
            width:100
        },
        {
            header:'シェア',
            sortable:true,
            dataIndex:'percentage',
            width:80
        },
        {
            header:'ID',
            sortable:true,
            dataIndex:'id',
            width:20
        }
    ]);

    //4.ページングツールバーの準備
    //storeはGridで使用しているstoreと同じものを指定。
    //pageSizeは1ページあたりの取得件数
    //このツールバーをGridパネルのbbarに配置する。
    var bbar = new Ext.PagingToolbar({
        store:store,
        pageSize:2
    });

    //5.グリッドパネルの作成
    new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        title:'ページング付きグリッドパネル',
        height:185,
        width:260,
        cm:column,
        store:store,
        bbar:bbar
    });
});

実行結果:

PagingToolbar

Ext.PagingToolbarは通常グリッドのbbarに設定して、ストアの内容を変更します。そのためExt.PagingToolbarに設定するstoreとGridPanelに設定するstoreは同一のものである必要があります。

今回のstoreではtotalPropery,root,baseParamsといった項目が追加されています。これらの項目がPagingToolbarを正しく機能させるために必要になります。
それぞれの項目は以下のような役割になっています。

totalProperty:データの全件数
root:実際のデータの起点となるプロパティ名(PagingToolbarとしては必須ではないがレスポンスに全件数を含めると自動的に必要になる)
baseParams:初回の取得条件(autoLoad:trueを設定している場合に必須になる)

PagingToolbar自体のコンフィグは非常にシンプルで、基本的なページング機能のみであれば2つのコンフィグを設定するだけです。

store:Gridに設定しているものと同じストア
pageSize:一回辺りの取得件数(storeのbaseParamのlimitと揃える)

ページングを機能させるためにはストアに読み込むデータを正しく取得する必要があります。PagingToolbarはstoreの再取得時にlimitとstartという項目を追加します。
limitは取得件数、startは取得位置になります。このPOST値に応じてstoreへ返すJSONを生成します。静的なデータでは上手く動きません。またPagingToolbarはあくまでstoreのデータ取得のリクエストをページングに適した形で上手く行ってくれるだけです。サンプルではPHPでリクエストにあったJSONを生成するようにしてます。
今回のJSONは以下のような形になっています。


	{
		success:true,
		total:6,
		rows:[
			{
				id:1,
				rank:1,
				name:'IE',
				percentage:62.69
			},

			・・・省略・・・

			{
				id:6,
				rank:6,
				name:'Opera Mini',
				percentage:0.53
			}
		]
	}

storeに追加した追加のコンフィグはこのJSONを上手く読みこむために必要な項目になります。
ストアの連携が少しややこしいですが、通常のグリッドにいくつか項目を追加するだけでページングが有効になるので、Ext.PagingToolbarがあるのは助かります。

ページングはグリッドのストアをページングに適した形で取得するリクエストを行ってくれると考えておくと良いと思います。JSONの出力はお好みの言語でどうぞ。

ExtJS入門16 ListViewの使い方

佐竹裕行 — Wed, 27 Jan 2010 01:59:06 +0000

DataViewと同じストアを簡易に表示させるクラスに、Ext.ListViewがあります。DataViewでは項目に対してHTMLのテンプレートを用意してストアの内容を表示させていましたが、ListViewでは簡易のグリッドのようにリスト項目を並べてくれます。

Ext.ListView
ExtJS -3.0 日本語APIドキュメント – Ext.ListView
http://extdocs.xenophy.com/?class=Ext.ListView

Ext.DataViewの使い方はこちらから

ExtJS入門15 DataViewの使い方

・PHP


 'データ' . $i,
            'datetime' => date('Y/m/d H:i:s')
        );
    }

    $arr = array(
        'total' => $i,
        'row' => $row,
        'success' => true
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($arr);
    die();
?>

今回はJsonStoreへのデータは動的にPHPから提供するようにします。ここでは単純にtitleと時刻を生成してJSONで出力しています。

・HTML





    
    ExtJS名古屋勉強会　ListViewの使い方

HTMLは基本的にいつもと同じですね。

・JS


Ext.onReady(function(){

    //ストアを用意する
    var store = new Ext.data.JsonStore({
        url:'listview.php',
        totleProperty:'total',
        root:'row',
        autoLoad:true,
        fields:['title','datetime']
    });

    new Ext.Panel({
        renderTo:Ext.getBody(),
        id:'myPanel',
        title:'ListViewでStoreの内容を表示する',
        items:{
            xtype:'listview',
            store: store,
            autoHeight:true,
            emptyText: 'No images to display',
            reserveScrollOffset: true,
            columns: [{
                header: '項目',
                width: .5,
                dataIndex: 'title'
            },{
                header: '日付',
                width: .5,
                dataIndex: 'datetime',
            }]
        },

        //ボタン設定
        buttonAlign:'center',
        buttons:[
            {
                text:'更新',
                handler:function(){
                    store.reload();
                }
            }
        ]
    });
});

・実行結果

ListViewサンプル

Ext.ListViewのxtypeはlistviewです。戻り値はBoxComponentですので親にパネルを設定して、そのitemsにListViewを設定します。
基本はDataViewとよく似ています。違いはtplコンフィグが無くcolumnsを指定します。columnsの書き方はグリッドのcolumModelとよく似ています。グリッドについてはまた詳しく解説します。

columnにはオブジェクトを配列で表示設定を指定します。

headerは項目の見出しテキストを設定します
dataIndexがストアに保持されているデータのプロパティ名を指定します。JsonStoreで指定したfieldsの項目の一つになります。/li>
widthは各列の幅のパーセンテージを指定します。0.5とすると画面の50%ということになります。

実行すると、綺麗なグリッドが自動的に作られています。見出しをクリックするとソートの方向も変更できます。

APIドキュメントでは以下のような特徴を上げています。
Ext.ListViewは、Gridの様な高速で軽いリストビュー機能を提供します。主な機能は、次の通りです。
・カラムのリサイズ
・カラム選択
・カラム幅は、初期状態でコンテナの比率に自動的に調整されます。
・あらゆる形式に対応するためレンダーとしてテンプレートが使用できます。
・水平スクロールはサポートされません。
・カラム編集はサポートされません。

より多機能はグリッドはExt.grid.GridPanelクラスを使うべきですが、お手軽にストアの内容をグリッド表示させてたい場合は有効です。

ExtJSで楽しくRIA業務アプリ開発 » php

ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

ExtJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）

ExJS入門21 グリッド・セレクション・モデル

ExtJS入門20 グリッドにフィルタリング機能を追加する

ExtJS入門19 グリッドにページング機能を追加する

ExtJS入門16 ListViewの使い方

ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

ExtJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）

ExJS入門21　グリッド・セレクション・モデル

ExtJS入門20　グリッドにフィルタリング機能を追加する

ExtJS入門19　グリッドにページング機能を追加する