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

ExJS入門31 GridViewでグリッドの各行の背景色を変更する

佐竹裕行 — Mon, 10 May 2010 03:04:36 +0000

もうグリッドはもうほんとにネタ切れですね、前回のTwitter APIを少し修正して最新一時間以内のtweetが分かるように背景色を変えてみたいと思います。グリッドの見た目はGridViewで変更します。GridViewはGridPanelクラスのviewConfigで設定できるということも以前のサンプルで紹介したので、今回はささっとサンプルを紹介します。

一時間以内のtweetだけ背景色を緑に

ほぼ前回のサンプルコードをそのまま使用するので、前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門30　Twitter Search APIを使ったグリッドパネル

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

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

HTML:





    
    ExtJS名古屋勉強会　Twitter API + GridView

    
    
    
    

    
    
    


    
        
            Twitter Search APIを利用したグリッドその2　（1時間以内の更新には背景を緑に、30秒毎に自動更新）
        

        
        

        Java Script：grid-rowclass.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

    //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('',
                    value,
                    store.getAt(rIndex).data.from_user
                    );
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex);
        return String.format('{0}:{1}

{2}',
            data.get('from_user'),
            value,
            Date.parseDate(data.get('created_at'),'D, d M Y G:i:s O').format('H時m分s秒 n月j日')
        );
    };

    //閾値
    var gateTime = new Date().add(Date.HOUR, -1);

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
                },
                {
                    id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ],
		//GridViewの設定
        viewConfig:{
            getRowClass:function(record,rIndex,rParams,store){
                var postTime = Date.parseDate(record.get('created_at'),'D, d M Y G:i:s O');
                if (postTime > gateTime) {
                    return 'recent-update';
                }
            }
        }
    });

    //自動アップデート
    var task = {
        run:function(){
            store.reload();
            //閾値の更新
            gateTime = new Date().add(Date.HOUR, -1);
        },
        interval:1000 * 30 //msec * sec
    };

    Ext.TaskMgr.start(task);
});

実行結果:

GridViewで行の背景色を変更する

APIからストアへの取得は前回のサンプルコードを参考にしてください。
前回との違いはGridViewのgetRowClassメソッドをオーバーライドして、行ごとのクラスを設定するところです。
GridViewクラスはGridPanelの見た目とUIを決定しています。GridViewを記述していないGridPanelであっても作成時にGridView自動的に生成されています。
以前のサンプルでemptyTextを使用する例を簡単に紹介しました。GridViewクラスではさらにいくつかのグリッドの見た目設定を調整できます。
今回のサンプルでは書くtweetのアップデート時の時刻から、最新一時間以内のものの背景色を変更します。各行に対してCSSのクラスを設定するにはGridViewクラスのgetRowClassメソッドをオーバーライドして、クラス名を返すことで、その行にカスタムのクラスを設定することができます。
以下がサンプルコードで設定しているgetRowClassの部分です。


 //閾値
    var gateTime = new Date().add(Date.HOUR, -1);

	・・・

		viewConfig:{
            getRowClass:function(record,rIndex,rParams,store){
                var postTime = Date.parseDate(record.get('created_at'),'D, d M Y G:i:s O');
                if (postTime > gateTime) {
                    return 'recent-update';
                }
            }
		}

gateTimeは一時間前の時刻を設定しています。
Dateオブジェクトのaddメソッドを使うことで、日付の演算ができます。Date.HOUR -1で一時間前を設定しました。
getRowClassメソッドは各行ごとに実行されるのでgateTimeは外で宣言しておくほうがよさそうです。
postTimeはTwitter APIから取得される投稿時刻をパースしてDateオブジェクトを制しえしています。Date.parseDate()の第2引数に日付のフォーマットを指定しています。Twitter APIでは’D, d M Y G:i:s O’という日付のフォーマットでした。
あとはgateTime以後の場合のみ’recent-update’という文字列を返り値にしています。これで一時間以内の行のCSSラスに’recent-update’が追加されます。

もう一つ前回からの変更点で、各tweetの日付を日本語のフォーマットにしています。これもparseDateを使っています。titleRendererを以下のように変更しています。Date.parseDate().format(’H時m分s秒 n月j日’)の部分です。


   var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex);
        return String.format('{0}:{1}

{2}',
            data.get('from_user'),
            value,
            Date.parseDate(data.get('created_at'),'D, d M Y G:i:s O').format('H時m分s秒 n月j日')
        );
    };

JSONPはYouTubeやTwitter以外の色々なサービスAPIでも供給されています。自分の良く使うサービスのAPIを調べてみてJSONPが利用できるならためしに使ってみると良いかもしれません。

ExJS入門30　Twitter Search APIを使ったグリッドパネル

佐竹裕行 — Fri, 07 May 2010 02:48:37 +0000

前回はJSONPを使ってYouTubeの情報をグリッドに表示するサンプルを紹介しました。今回も外部APIの利用第2弾ということにして、Twitter APIを使ってTwitterのアップデートをグリッドに読み込んでみます。

Twitter Search APIを利用したグリッド

今回はJSONPを使ったAPIの利用に加えて、グリッドを自動更新するためのExt.TaskMgrクラスを使ったサンプルコードの紹介になります。
前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

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

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

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

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

HTML:





    
    ExtJS名古屋勉強会　Twitter API

    
    
    
    

    
    
    


    
        
            Twitter Search APIを利用したグリッド　（30秒毎に自動更新）
        

        
        

        Java Script：grid-twitter.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

    //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('',
                    value,
                    store.getAt(rIndex).data.from_user
                    );
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}:{1}

{2}',
            data.from_user,
            value,
            data.created_at
        );
    };

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
                },
                {
                    id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ]
    });

    //自動アップデート
    var task = {
        run:function(){
            store.reload();
        },
        interval:1000 * 30 //msec * sec
    }

    Ext.TaskMgr.start(task);
});

実行結果:

Twitter Search APIを利用したグリッド

JSONPをストアのソースとして読み込む方法は前回紹介したので簡単に済ませますが、JSONの構造としてはYouTube DATA APIよりも簡単でresultという配列の中に対象の検索項目に対する最新のUPDATEが入っています。デフォルトでは"extjs"で検索をかけています。
またTwitter Search APIでは全件数が帰ってこないため、PagingToolbarは上手く動かないようです。’（ひょっとしたら何か解決方法があるかも知れせん…）


    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

Twitter Search APIの利用時の設定は以上のようになります。後はこのストアにあわせてグリッドを作成します。レンダラーも前回と似ていますがデータの構造にあわせて少し変更を加えています。


  //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('',
                    value,
                    store.getAt(rIndex).data.from_user
                    );
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}:{1}

{2}',
            data.from_user,
            value,
            data.created_at
        );
    };

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
                },
                {
                    id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ]
    });

つぎに自動アップデートの処理を作成します。ExtJSにはExt.TaskMgrクラスというシングルトンクラスが用意されています。このクラスを利用することで、一定時間ごとに実行する処理を設定できます。実行したい処理をオブジェクトの形で記述してタスクマネージャー(Ext.TaskMgrクラス)に設定します。


    var task = {
        run:function(){
            store.reload();
        },
        interval:1000 * 30 //msec * sec
    }
    Ext.TaskMgr.start(task);

run:実行する処理
interval:実行する間隔(ミリ秒で設定)

今回のサンプルでは30秒間隔でストアをリロードしています。これでTwitter検索を実行後に30秒ごとにグリッドを更新します。
前回のYouTube Data APIよりもTwitter Search APIの方が簡単でしたね。

ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

佐竹裕行 — Thu, 06 May 2010 04:44:49 +0000

今回もグリッドパネルです。今回はJSONPを使ってYouTube Data APIを呼び出して、グリッドに表示するサンプルコードになります。
JSONPを使うことで別ドメインのAPIをJavascriptで呼び出すことができます。Google Data APIはJSONPにも対応しているため、利用が簡単です。

JSONPでYouTube Data APIを利用

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

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

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

HTML:





    
    ExtJS名古屋勉強会　Youtube API

    
    
    
    

    
    
    


    
        
            YouTube DATA APIを利用するグリッド（JSONPとして利用する）
        

        
        

        Java Script：grid-youtube.js

        YouTube Data API：YouTube の API とツール - Google Code

Java Script:


Ext.onReady(function(){
    //各ページ辺りの表示数
    var perPage = 10;

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //クロスドメインになるYouTube Data APIをJSONPとして利用するためScriptTagProxyを使う。
        proxy:new Ext.data.ScriptTagProxy({
            url:"http://gdata.youtube.com/feeds/api/videos",
        }),
        baseParams:{
            format:1,
            'max-results':perPage,
            'start-index':1,
            vq:'extjs',
            alt:'json-in-script'
        },
        paramNames:{
            start:'start-index',
            limit:'max-results',
        },
        autoLoad:true,
        root:'feed.entry',
        idProperty:'id.$t',
        totalProperty:"feed.openSearch$totalResults.$t",
        fields:['author','id','title','media$group','link','content','published','category','updated'],
    });

    //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('{1}',
                  store.getAt(rIndex).data.media$group.media$thumbnail[0].url,
                  value.$t);
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}
by {1}{2}',
            value.$t,
            data.author[0].name.$t,
            data.content.$t.length > 20 ? data.content.$t.substring(0,20) + '...' :data.content.$t

        );
    };

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'title', renderer:imgRenderer, width:120
                },
                {
                    id:'title', header:'title', dataIndex:'title', renderer:titleRenderer, width:120
                },

                {
                    id:'duration',
                    header:'Duration',
                    dataIndex:'media$group',
                    renderer:function(value){
                        var totalsec = value.yt$duration.seconds;
                        var min = Math.floor(totalsec / 60);
                        var sec = totalsec % 60;
                        return String.format('{0}:{1}',
                            String.leftPad(min,2,'0'),
                            String.leftPad(sec,2,'0'));
                    },
                    width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            vq:value
                        }
                    });
                }
            }
        ],
        bbar:[
            //YouTube Data APIのリクエストの開始位置が1からであるため、いくつかバグが出ます。
            new Ext.PagingToolbar({
                displayInfo:true,
                pageSize:perPage,
                store:store
            })
        ],
        listeners:{
            //ダブルクリックで別ウィンドウで開く
            rowdblclick:function(grid,rIndex,e){
                var data = grid.getStore().getAt(rIndex).data;
                window.open(data.link[0].href);
            }
        }
    });
});

実行結果:

JSONPでYouTube Data APIを利用

今回のキモはJsonStoreになります。これまでのサンプルではurlのコンフィグでAPIのURLを設定していました。しかし別ドメインのAPIを呼び出す場合はurlにコンフィグにフルパスを設定してもXMLHttpRequestオブジェクトのセキュリティ上の制約で正しく動作しません。JavascriptではJSONの代わりにJSONPを使うとことで別ドメインのAPIを利用する仕組みがあります。

JSONPとは – はてなキーワード http://d.hatena.ne.jp/keyword/JSONP

JSON with paddingの略

Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。

一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用の APIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数 (callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。

ただし、Same-Originポリシーが存在しないため、機密情報を APIに含める際には十分な注意が必要である。

ExtJSでJSONPを利用する場合はExt.data.ScriptTagProxyを使用してJSONPを実行します。
Ext.data.ScriptTagProxyはJsonStoreのproxyとして設定します。proxyはデータをストアに読み込む設定をカスタムで指定できます。ここにはExt.data.DataProxyクラスのオブジェクトを設定します。Ext.data.ScriptTagProxyはExt.data.DataProxyクラスのサブクラスにです。DataProxyクラスはJSONPを呼び出すための専用のクラスです。サンプルコードではurlコンフィグを指定しているだけですが、より複雑なロード方法を設定できます。
Ext.data.ScriptTagProxyで実行されたAPIはデータが実行可能な関数として取得されます。Ext.data.ScriptTagProxyはその関数を実行して、データを展開してストアに読み込んでいます。特に難しい設定をしなくても自動的に読み込んでくれるのためありがたいです。

今回のサンプルコードのJsonStoreの設定はこれまでより少しややこしくなっているのは、YouTube Data APIの仕様に合わせるためです。baseParamsの値は全て必須です。alt:’json-in-script’でJSONPで呼び出すことをAPIに伝えています。注意点としてはstart-indexが１からでないといけない点です。そのためPagingToolbarで少し不具合が起きていますが、ひとまずそのままにしておきます。また時間があれば解決方法を紹介します。
またrootでドットシンタックス（.）でrootの階層を一段深いところを指定しているのも、初めて出てきました。


	//ストアの設定
    var store = new Ext.data.JsonStore({
        //クロスドメインになるYouTube Data APIをJSONPとして利用するためScriptTagProxyを使う。
        proxy:new Ext.data.ScriptTagProxy({
            url:"http://gdata.youtube.com/feeds/api/videos",
        }),
        baseParams:{
            format:1,
            'max-results':perPage,
            'start-index':1,
            vq:'extjs',
            alt:'json-in-script'
        },
        paramNames:{
            start:'start-index',
            limit:'max-results',
        },
        autoLoad:true,
        root:'feed.entry',
        idProperty:'id.$t',
        totalProperty:"feed.openSearch$totalResults.$t",
        fields:['author','id','title','media$group','link','content','published','category','updated'],
    });

JSONPからデータを読み込んでさえしまえば、これまでのグリッドと同じです。いつものようにColumnモデル等を設定して表示を整えます。YouTube Data APIで取得されるデータは階層が深いので、レンダラーの設定は必須です。


   //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('{1}',
                  store.getAt(rIndex).data.media$group.media$thumbnail[0].url,
                  value.$t);
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}
by {1}{2}',
            value.$t,
            data.author[0].name.$t,
            data.content.$t.length > 20 ? data.content.$t.substring(0,20) + '...' :data.content.$t

        );
    };

		・・・

		cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'title', renderer:imgRenderer, width:120
                },
                {
                    id:'title', header:'title', dataIndex:'title', renderer:titleRenderer, width:120
                },

                {
                    id:'duration',
                    header:'Duration',
                    dataIndex:'media$group',
                    renderer:function(value){
                        var totalsec = value.yt$duration.seconds;
                        var min = Math.floor(totalsec / 60);
                        var sec = totalsec % 60;
                        return String.format('{0}:{1}',
                            String.leftPad(min,2,'0'),
                            String.leftPad(sec,2,'0'));
                    },
                    width:120
                }
            ]
        }),

		・・・

あとは必要におおじてtbarとbbarを設定します。この二つはこれまでにも出てきているので解説を省きます。

これでYouTubeのAPIを利用できるようになります。JSONPの使い方を覚えておけば、そのほかのAPIでJSONPに対応しているものがあれば、簡単に利用してマッシュアップが作れてしまいます。APIの仕様は変更されることもあるので、注意が必要です。今回は2010/5/6の時点のYouTube Data APIを利用しています。

ExJS入門28　チェックボックス付きグリッドパネル

佐竹裕行 — Fri, 30 Apr 2010 03:41:45 +0000

そろそろグリッドに関してもネタがなくなってきましたが、今回はグリッドにチェックボックスを追加するサンプルを紹介します。今回はExJS入門21　グリッド・セレクション・モデルのサンプルコードを使って、チェックボックス付きグリッドに変更します。

チェックボックスつきグリッドパネル

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

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

JSON:


{
    success:true,
    total:6,
    rows:[

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

HTML:





    
    ExtJS名古屋勉強会　セレクションモデルその2

    
    
    
    

    
    
    


    
        
            チェックボックスセレクションモデルで複数選択。
        

        
        

        Java Script：grid-selection2.js

        JSONデータ：data.json

Java Script:


Ext.onReady(function()
{
    //1.データを用意
    //今回はファイルでdata.jsonを読み込んでいます

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'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 checkSm = new Ext.grid.CheckboxSelectionModel({
        /* 一行しかチェックできなくする場合
        singleSelect:true,
        header:''
        */
    });

    //4.カラムモデルを用意
    var checkCm = new Ext.grid.ColumnModel([
        checkSm,    //セレクションモデルをカラムに設置
        {
            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:'チェックボックスのグリッドパネル',
        height:210,
        width:400,
        cm:checkCm,
        sm:checkSm,
        store:store,
        tbar:[
            {
                text:'選択中のブラウザ情報',
                iconCls:'tick',
                handler:function(btn){
                    var record = grid.selModel.getSelections();
                    var msg;
                    if (!record) {
                        msg = 'ブラウザが選択されていません';
                    }else{
                        msg = new Ext.XTemplate(
                            '',
                            '',
                            '',
                            'ブラウザ名：{values.data.name}
',
                            '順位：{values.data.rank}
',
                            'シェア：{values.data.percentage}%
',
                            'DOWNLOAD
',
                            '',
                            '{xcount}',
                            '{xindex}',
                            '',
                            '',
                            '',
                            '',
                            '',
                            ''
                            ).apply(record);
                    }

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

実行結果:

チェックボックスつきグリッドパネル

複数選択時の挙動

グリッドのセレクションモデルにExt.grid.CheckboxSelectionModelクラスを指定することで、簡単にグリッドをチェックボックス付きにできます。
まずチェックボックスセレクションモデルを作成します。
Ext.grid.CheckboxSelectionModelはExt.grid.RowSelectionModelのサブクラスです。
Ext.grid.CheckboxSelectionModelのコンフィグにはいくつかのオプションがありますが、各行のチェックボックスをクリックして行を選択するだけであれば初期値のままで十分機能します。
サンプルコードの中でコメントアウトしているように、singleSelectをtrueにすることでラジオボタンのように1つしかチェックできなくすることもできます。その場合カラムのヘッダーに表示される、全て選択のチェックボックスの動作が気持ち悪くなるのでheaderを表示しないようにしています。

次に作成したセレクションモデルをカラムモデルに設置します。今回はカラムの先頭に置いていますが、任意の位置に設定できます。
以上で、チェックボックス機能を備えたグリッドが完成します。今回はシングルセレクトではなく複数のレコードが選択されています。そのためtbarの情報を表示ボタンで実行する処理を変更する必要があります。

現在選択しているレコードの取得はセレクションモデルから取得します。以前のグリッドではgrid.selModel.getSelected()で現在選択されているレコードオブジェクトを取得できました。複数選択されている場合にgetSelected()を実行すると、最後に選択されたレコードだけを取得します。複数選択時はgetSelected()ではなくgetSelections()として選択されているレコードを配列で取得します。このメソッドはExt.grid.RowSelectionModelで定義されているので、Ext.grid.CheckboxSelectionModelでもそのまま使えます。

今回のサンプルでは、取得したレコードの配列をXTemplateで展開して表示しています。XTemplateについて詳しくはこちら第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン

佐竹裕行 — Wed, 28 Apr 2010 01:39:15 +0000

Ext.gri.EditorGridクラスは、グリッドを表計算ソフトのように編集できるグリッドです。今回はもう一つのエディターグリッドといえるRowEditorを使ったグリッドのサンプルを紹介します。

ux Grid RowEditor

RowEditorはユーザーエクステンション(ux)です。
ユーザーエクステンションは世界中のExtJS開発者が作成して、ExtJSのフォーラムの等で自身のUXを公開しています。
ExtJS Forum http://www.extjs.com/forum

Ext: User Extensions and Plugins

またUXの情報が集められているhttp://extjs-ux.org/もあります。ここにはUX版のAPIドキュメントをまとめたものもあります(全てのUXを網羅しているわけではありませんが)。
UXはExtJSの基本ライブラリ以外には含まれないので、使いたいUXを見つけた場合は開発者のページ等からJS,CSS,画像等のファイルを入手する必要があります。
今回のRowEditorはextjs-ux.orgには無いようです。ExtJSのサンプルのページのRowEditorのサンプルからダウンロードするか、
以下の作者のサイトからも入手できます。
Using the ExtJS Row Editor

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

HTML:





    
    ExtJS名古屋勉強会　Row Editor プラグイン

    
    
    
    

    

    
    
    
    
    



    
        
        UX RowEditorを使ってグリッド項目の編集を行います。
        
        
        

        Java Script：roweditorgrid.js

Java Script:


//Row Editor グリッド
Ext.onReady(function()
{
    var editor = new Ext.ux.grid.RowEditor({
        saveText:'変更',
        cancelText:'キャンセル'
    });

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        title:'UX RowEditorをグリッドに設置',
        height:210,
        width:400,
        plugins:[editor],
        //カラムモデル
        cm:new Ext.grid.ColumnModel([
            {
                id:'id',
                header:'ID',
                width:30,
                dataIndex:'id'
            },
            {
                id:'name',
                header:'ブラウザ名',
                dataIndex:'name',
                width:100,
                editor:new Ext.form.TextField({
                    allowBlank:false
                }),
                renderer:function(v){   //カラムのデータが空のとき表示
                    return v ? v : 'ダブルクリックで編集';
                }
            },
            {
                id:'url',
                header:'URL',
                dataIndex:'url',
                width:100,
                editor:new Ext.form.TextField(),
                renderer:function(v){   //カラムのデータが空のとき表示
                    return v ? v : 'ダブルクリックで編集';
                }
            }
        ]),

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

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

        //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);
                    }
                }
            }
        ]
    });
});

実行結果:

RowEditor

RowEditorの設置場所は任意でかまいませんが、今回はextとは分けてuxディレクトリを作って、さらにRowEditorディレクトリを作って設置しています。UXはJSだけでなくCSSファイルや画像も含むためです。まれに使用している画像名が同じ場合もあるため個々のUXごとにディレクトリと管理が楽になります。RowEditor.cssの画像の読み先が少し変でしたので、それにあわせて画像の設置位置が換えてあります。CSS自体を書き換えても良いと思います。

RowEditorはグリッドのプラグインとして設定します。グリッドへのプラグインの設置はGridのコンフィグのpluginsに配列で指定します。配列なのは複数のプラグインを登録できるようしているためです。
[code lang="js"]
var editor = new Ext.ux.grid.RowEditor({
saveText:'変更',
cancelText:'キャンセル'
});

var grid = new Ext.grid.GridPanel({
renderTo:'grid',
title:'UX RowEditorをグリッドに設置',
height:210,
width:400,
plugins:[editor],

・・・

});
[/code]

RowEditorのコンフィグオプションはAPIリファレンスが無いためソースから調査しないといけません。いかに大まかなコンフィグオプションをまとめておきます。
実際使う場合に必要なのは設定は特に無いので空のままでもかまいません。サンプルではボタンが日本語化されないので、保存とキャンセルの文字を日本語に変更しています。

RowEditorが呼び出すエディターはエディタブル・グリッドと同様にカラムモデルで指定します。エディタを設定しないカラムは編集できません。
allowBlank等の設定もも使用できます。RowEditorに必要な設定はこれくらいです。UXのファイル正しく設置できれば特に難しくないかもしれません。
またux.RowEditorはExt-3.1だと少し崩れました。ExtJS 3.2ではきちんと動作しました。（昨日3.2.1も公開されていますね。アップデートのペースがかなり早くなっている気がします。）

ExJS入門26　エディタブル・グリッド（色々なエディターを設定する)

佐竹裕行 — Tue, 27 Apr 2010 03:42:33 +0000

エディタブルグリッドのサンプルその3になります。
今回は色々なグリッドを編集する際のエディタにテキストフィールド以外のエディタを指定します。このサンプルではTextField, DateField, NumberField.ComboBoxを使います。

ComboBoxをエディターに設定

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

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

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

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

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

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

HTML:





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

    
    
    
    

    
    
    


    
        
        エディタブル・グリッドで色々なエディタを使用しています。
        

        
        

        Java Script：editorgrid-field.js

Java Script:


Ext.onReady(function()
{

    //空のときのレンダラー
    var emptyRenderer = function(v) {
        return v ? v : 'ダブルクリックして編集';
    };

    //日付用レンダラー
    var dateRenderer = function(v){
        if (Ext.isDate(v)){
            return v.format('Y/m/d');
        }else{
            return '日付なし';
        }
    }

    //コンボボックス用のレンダラー
    var comboRenderer = function(combo){
        //カラムモデルへのレンダラーを返す。
        return function(value){
            //カラムに渡された値から、DisplayFieldを遡る。
            var record = combo.findRecord(combo.valueField,value);
            return record ? String.format('{0}({1})',record.get('name'),record.get('furi')) : combo.valueNotFoundText;
        }
    }; 

    //コンボボックス
    var combo = new Ext.form.ComboBox({
        emptyText:'日付を入力してください。',
        store:new Ext.data.ArrayStore({
            data:[
                ['Javascript','js','ジャバスクリプト'],
                ['PHP','php','ピーエイチピー'],
                ['Python','py','パイソン'],
                ['Ruby','rb','ルビー'],
                ['Perl','pl','パール']
            ],
            fields:['name','extname','furi']
        }),
        mode:'local',
        editable:false,
        triggerAction:'all',
        displayField:'name',
        valueField:'extname',
        valueNotFoundText:'値なし'
    });

    var grid = new Ext.grid.EditorGridPanel({
        renderTo:'grid',
        title:'エディタブル・グリッド 色々なエディタ',
        height:210,
        width:500,

        //カラムモデル コンフィグをオブジェクトで渡している
        cm:new Ext.grid.ColumnModel({
            //デフォルトのカラム設定
            defaults:{
                editor:{
                    xtype:'textfield',
                    emptyText:'入力してください'
                },
                 renderer:emptyRenderer
            },
            columns:[
                {
                    id:'title',
                    header:'テキスト',
                    dataIndex:'title',
                    width:120
                },
                {
                    id:'date',
                    header:'日付',
                    dataIndex:'date',
                    width:80,
                    editor:{    //xtypeでDateFieldを指定
                        xtype:'datefield',
                        emptyText:'日付を入力してください。',
                        format:'Y/m/d'
                    },
                    renderer:dateRenderer
                },
                {
                    id:'type',
                    header:'コンボボックス',
                    dataIndex:'type',
                    width:130,
                    editor:combo,
                    renderer:comboRenderer(combo)
                },
                {
                    id:'value',
                    header:'ナンバー',
                    dataIndex:'value',
                    width:100,
                    editor:new Ext.form.NumberField({
                        allowDecimals:false,
                        allowNegative:false
                    })
                }

            ]
        }),

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

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

        //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);
                    }
                }
            }
        ]
    });
});

実行結果:

DateFieldをエディターに設定

ComboBoxをエディターに設定

エディタのグリッドはカラムモデル(Ext.grid.ColumnModel)クラスで設定します。前回までは絡むモデルの呼び出しの際の引数に配列でカラムの構造を指定してました。今回はオブジェクトで指定しています。オブジェクト指定することでカラムモデルクラスのコンフィグオプションを設定できます。カラムの構造はcolumnsコンフィグに指定します。またdefaultsはデフォルトのカラムの型を設定できます。今回はエディタとレンダラーを設定しています。そのためeditor,rendererを設定していない一つ目のtitleカラムにデフォルトからエディターとレンダラーが設定されることになります。


new Ext.grid.ColumnModel({
	//デフォルトのカラム設定
	defaults:{
		editor:{
			xtype:'textfield',
			emptyText:'入力してください'
		},
		 renderer:emptyRenderer
	},
	columns:[
		{
			id:'title',
			header:'テキスト',
			dataIndex:'title',
			width:120
		},

		・・・省略・・・

		{
			id:'value',
			header:'ナンバー',
			dataIndex:'value',
			width:100,
			editor:new Ext.form.NumberField({
				allowDecimals:false,
				allowNegative:false
			})
		}

	]
})

エディタの設定は各カラムのeditor設定で指定します。


new Ext.grid.ColumnModel({
columns:[
		{
			id:'title',
			header:'テキスト',
			dataIndex:'title',
			width:120
		},
		{
			id:'date',
			header:'日付',
			dataIndex:'date',
			width:80,
			editor:{    //xtypeでDateFieldを指定
				xtype:'datefield',
				emptyText:'日付を入力してください。',
				format:'Y/m/d'
			},
			renderer:dateRenderer
		},
		{
			id:'type',
			header:'コンボボックス',
			dataIndex:'type',
			width:130,
			editor:combo,
			renderer:comboRenderer(combo)
		},
		{
			id:'value',
			header:'ナンバー',
			dataIndex:'value',
			width:100,
			editor:new Ext.form.NumberField({
				allowDecimals:false,
				allowNegative:false
			})
		}

	]
})

・日付エディター
dateカラムはデートフィールド(Ext.form.DateField)が設定されています。ここではxtypeで指定しています。デートフィールドはデートピッカーが付いた日付に特化したフィールドです。formatでデートピッカーから選んだ日付の表示形式を設定します。グリッドに設定される値はDate型のため、レンダラーでカスタムの日付形式を設定できます。


//日付用レンダラー
var dateRenderer = function(v){
	if (Ext.isDate(v)){
		return v.format('Y/m/d');
	}else{
		return '日付なし';
	}
}

・数値エディター
valueカラムはナンバーフィールド(Ext.form.NumberField)が設定されています。Ext.from.NumberFieldはxtypeが設定されていないので、newしています。コンフィグにはallowDecimalsとallowNegativeをfalseにして自然数のみを入力させています。

・セレクトボックスエディター
コンボボックスをエディタに設定します。一番手間がかかっています。その理由としてはコンボボックスのvalueFieldとdisplayFieldが同一でない場合にレンダラーで正しくdisplayFieldの値を表示させる処理です。コンボボックスで項目を選択するとvalueFieldで指定した値がグリッドの値として渡されます。そのためコンボボックスのdisplayFieldを設定された値(valueFieldの値)から遡って、取得する必要があります。またrendererで呼ばれる際の引数にエディタへの参照が含まれないため、上手くコンボボックスへアクセスしなければいけません。
ここでは予めコンボボックスをcomboという変数に設定してレンダラーを作成しています。


    //コンボボックス用のレンダラー
    var comboRenderer = function(combo){
        //カラムモデルへのレンダラーを返す。
        return function(value){
            //カラムに渡された値から、DisplayFieldを遡る。
            var record = combo.findRecord(combo.valueField,value);
            return record ? String.format('{0}({1})',record.get('name'),record.get('furi')) : combo.valueNotFoundText;
        }
    }; 

    //コンボボックス
    var combo = new Ext.form.ComboBox({
        emptyText:'日付を入力してください。',
        store:new Ext.data.ArrayStore({
            data:[
                ['Javascript','js','ジャバスクリプト'],
                ['PHP','php','ピーエイチピー'],
                ['Python','py','パイソン'],
                ['Ruby','rb','ルビー'],
                ['Perl','pl','パール']
            ],
            fields:['name','extname','furi']
        }),
        mode:'local',
        editable:false,
        triggerAction:'all',
        displayField:'name',
        valueField:'extname',
        valueNotFoundText:'値なし'
    });

レンダラーに設定する関数を出力する関数をcomboRendererで作成します。このcomboRederer関数ににコンボボックスの参照comboを引数として設定しています。そのため、出力された実際のレンダラーの関数はcomboへのアクセスが可能になります。
このレンダラー出力関数をエディターにcombo指定されているカラムに設定することで、コンボボックスのストアの情報を全て使って表示を変更できます。

今回のcomboRenderer関数はエディタブルグリッドにコンボボックスが設定されていて、なおかつコンボボックスのvalueFieldとdiplayFieldに違う値が設定されている際に必要になります。意外と使える機会が多いので、今回のサンプルを覚えておくと良いかもしれません。

ExtJSで楽しくRIA業務アプリ開発 ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)

佐竹裕行 — Mon, 26 Apr 2010 03:56:41 +0000

エディタブル・グリッドはグリッド上でストアの情報が編集できるグリッドです。前回のサンプルでは編集を行ったあとのストアの情報をどこにも保存していませんでした。今回はExt.Ajaxクラスを使って、編集後のストアのデータをサーバーへ送信するサンプルを紹介します。

Ajaxで保存

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

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

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

PHP:


 false,
        'errmsg' => '保存に失敗しました'
    );
    header("Content-Type: text/javascript; charset=utf-8");

    $record = $_POST['records'];
    if (!$record) {
       echo json_encode($fail);
       die();
    };

    //JSONから配列へ取り出し
    $data = json_decode($record);

    /**
     * DB等へ保存処理
     */

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

   echo json_encode($res);
   die();

HTML:





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

    
    
    
    

    
    
    


    
        
        エディタブル・グリッドで変更した内容をPOSTします。
        

        
        

        Java Script：editorgrid-save.js

Java Script:


//グリッドへの追加削除
Ext.onReady(function()
{
    //保存リクエスト
    var onSave = function(){
        //編集をとめる
        grid.stopEditing();

        var modifiedRecords = grid.getStore().getModifiedRecords();
        if (modifiedRecords.length > 0) {

            //POSTするパラメータ
            var params = [];

            //編集があったレコードからJSONでデータを取り出す。
            Ext.each(modifiedRecords,function(record){
                params.push(record.data);
            });

            //JSONをエンコードする。
            params = Ext.encode(params);

            //Ajaxリクエスト処理

            //ローディングマスクを設置
            Ext.getBody().mask('保存中です。');

            //Ext.Ajaxクラスを使用してリクエスト
            Ext.Ajax.request({
                url:'save.php',  //ポストするURL
                params:{
                    records:params
                },
                success:function(res,opt){      //成功時
                    var res = Ext.decode(res.responseText);
                    if (res.success){
                        //正しく保存できた場合
                        //変更をストアにセットする。（赤い三角が消える）
                        grid.getStore().commitChanges();
                        //grid.getStore().reload();
                    }else{
                        Ext.Msg.alert('エラー','保存に失敗しました。');
                    }
                    //ローディングマスクを外す
                    Ext.getBody().unmask();
                },
                failure:function(res,opt){      //接続エラーなど
                    Ext.Msg.alert('エラー','保存に失敗しました。');
                    //ローディングマスクを外す
                    Ext.getBody().unmask();
                }
            });
        }

    }

    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'],
            autoSave:false
        }),

        //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);
                    }
                }
            },'->',
            {
                text:'保存',
                iconCls:'save',
                handler:function(){
                    onSave();
                }
            }
        ]
    });
});

実行結果:

Ajaxで保存

エディタブル・グリッドではストアの内容を保存するタイミングはいくつかのパターンがあります。一つは対象のレコードの編集が終わったあとに、すぐリクエストをかける方法。この方法では、特に保存ボタンをつけずに、EditorGridクラスのaftereditイベントの中で保存を実行します。またストアのwriterを設定して、変更を保存することもできます。

今回は明確に保存ボタンを作成して、グリッドの編集を終えて保存ボタンを押したときに、変更のあったレコードを送信するようにします。保存ボタンはtbarに設置して、ボタンが押されるとonSave()関数が実行されるようになっています。保存処理は全てこの関数の中で記述しています。

onSave()の大まかな処理の流れは、
編集をやめる　→　変更のあったレコードの取り出し　→　レコードからJSONデータの取り出し　→　ローディングマスクの設置　→　AJAXリクエスト　→　リクエスト結果のハンドリング　→　ストアを更新　→　ローディングマスクの除去。
となっています。

まず編集をとめます。tbarに保存ボタンがあるので、編集中でもボタンが押せてしまします。grid.storeEditing()で編集中のエディタを止めます。


        //編集をとめる
        grid.stopEditing();

次に編集されたデータの取出しです。これはストアのgetModifiedRecords()メソッドを使うと一発で取得できます。getModifiedRecords()はストアが最後にコミットされてから変更があったレコード記憶し配列で返します。ここで帰ってくるレコードはオブジェクトです。サーバーへはJSONで送信したいので全てのレコードからデータをJSONで取り出します。Ext.each()はphpのforeachのように第一引数に設定された配列を列挙して、第二引数に設定された関数を実行していきます。ここではparams配列に各レコードのJSONデータを取り出して追加しています。


	//ストアから保存する対象のレコードを全て取得
	var modifiedRecords = grid.getStore().getModifiedRecords();

	//POSTするパラメータを初期化
	var params = [];

	//編集があったレコードからJSONでデータを取り出す。
	Ext.each(modifiedRecords,function(record){
		params.push(record.data);
	});

次は取り出したJSONを文字列にエンコードします。これはJSONの配列をそのままポストでできないためです。またリクエスト中にローディングマスクを設置します。マスクの設定は簡単で対象のExtエレメントのmaskメソッドを呼ぶだけです。引数にマスクに表示したい文字列を設定します。


	//JSONをエンコードする。
	params = Ext.encode(params);

	//Ajaxリクエスト処理

	//ローディングマスクを設置
	Ext.getBody().mask('保存中です。');

さていよいよAjaxリクエストですが、ExtJSではAjaxリクエストの際にはExt.Ajaxクラスを使用します。Ext.Ajaxはシングルトンです。Ext.Ajax.request()としてリクエストを実行します。引数にリクエストの設定をオブジェクトで指定します。

Ext.Ajax.requestの引数
url:リクエスト先のURL
params:リクエストの際に送信するパラメータ
success:リクエスト成功時のコールバック関数
failure:リクエスト失敗時のコールバック関数

今回はsave.phpへ保存します。paramsには先ほど取り出してエンコードしたJSONデータを設定します。リクエストが成功した場合はsuccessに設定したコールバック関数が実行されます。failureは失敗したに呼ばれます。どちらも同じ引数(response:レスポンスデータを含むオブジェクト,option:リクエストしたパラメータ)を持って実行されます。


//Ext.Ajaxクラスを使用してリクエスト
Ext.Ajax.request({
	url:'save.php',  //ポストするURL
	params:{
		records:params
	},
	success:function(res,opt){
		//成功時
	},
	failure:function(res,opt){
		//接続エラーなど
	}
});

save.phpはサーバーの処理の実行結果をJSON形式で返します。今回のサンプルでは保存が成功した場合は


{
	success:true,
	total:10,
	row:{/*変更した配列*/}
}

失敗した場合は


{
	success:false,
	errmsg:'エラーメッセージ'
}

がレスポンスとして返されます。
successはサーバへの接続が成功した場合に呼ばれます。そのため何かのエラーで保存が失敗しレスポンスにfalseが返ってきた場合もsuccess側のコールバックが呼ばれます。本当に保存が成功しているかどうかはレスポンスの中のsuccessを見て判断します。
successの第一引数はレスポンスデータを含むXMLHttpRequestオブジェクトです。この中のresponseTextに実際のレスポンスがあります。今回の場合このレスポンスは文字列にエンコードされたJSONです。そのためresponseTextを取り出してJSONにエンコードする必要があります。


	success:function(res,opt){      //成功時
		var res = Ext.decode(res.responseText);
		if (res.success){
			//正しく保存できた場合
			//変更をストアにセットする。（赤い三角が消える）
			grid.getStore().commitChanges();
			//grid.getStore().reload();
		}else{
			Ext.Msg.alert('エラー','保存に失敗しました。');
		}
		//ローディングマスクを外す
		Ext.getBody().unmask();
	},
	failure:function(res,opt){      //接続エラーなど
		Ext.Msg.alert('エラー','保存に失敗しました。');
		//ローディングマスクを外す
		Ext.getBody().unmask();
	}
});

ここでは変数resにレスポンスからJSONデータを取り出します。
res.successがtrueの場合のみ、保存が成功しているのでストアの後処理を実行します。今回は単純に変更があったものをコミットして、modifiedRecordsをクリアしているだけですが、実際にはサーバー上との整合性のために新規追加項目のID等を振りなおす必要があります。もしくはストアをリロードしてサーバーの最新情報とグリッドを同期します。

最後にマスクを外します。マスクを追加したときと同じように対象のExtエレメントのunmaskメソッドを実行すれば外せます。

今回紹介したサンプルではサーバーサイドで実際にDB等に保存は行っていません。実際にAjaxのポストを取得してDBなどに保存するようにサーバーサイドのサンプルコードを変更して試してください。ExtJSでの基本的なAjaxのやりとりはJSONがよいと思います。phpであれば特に面倒な処理もなくjson_encodeとjson_decodeを使えば変換も楽におこなえます。
AjaxのやりとりはFirefoxのアドオンFirebugを使うと分かりやすいです。

FirebugでPOSTの確認

Firebugでレスポンスのの確認

Ajaxリクエスト自体はグリッドだけでなく、どこでも使えるので、色々なリクエストを試してみるとよいと思います。

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入門　ExtJSのフォームについて（基本編）

佐竹裕行 — Thu, 22 Apr 2010 03:19:56 +0000

前回までグリッドについてのサンプルを紹介してきましたが、今回はグリッドを少しはなれてExtJSのフォームについて簡単に紹介をします。

フォームの値を取得

前回のサンプルでグリッドに項目を追加する際に、おまけで紹介した、任意の値を追加する処理にExtJSのフォームがでてきました。ユーザーに何かしらの入力を促す際、フォームは重要になってきます。グリッドに入力を追加するだけでなく、既存の値を変更する場合もフォームで入力させるのが一般的です。今回はExtJSのフォームのなかでも基本中の基本の部分を簡単に紹介します。

ExtJS入門23　グリッドへの項目の追加と削除

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

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

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

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

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

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

HTML:





    
    ExtJS名古屋勉強会　Fieldについて

    
    
    
    

    
    
    
    


    
        

            Extのフォームフィールドについて
        
        
        

        Java Script：form-exsample.js

Java Script:


//フォームの簡単な紹介
Ext.onReady(function()
{
    //グリッドパネルの作成 主要な設定は直接コンフィグオプションに入れています。
    var form = new Ext.form.FormPanel({
        renderTo:'form',
        title:'フォームの簡単な紹介',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        labelWidth:180,
        items:[
            {
                xtype:'textfield',
                name:'samplefield1',
                fieldLabel:'テキストフィールド1',
                emptyText:'入力してください',   //空のときのテキスト
                anchor:'90%'
            },
            {
                xtype:'textfield',
                name:'samplefield2',
                fieldLabel:'テキストフィールド2(必須項目)',
                emptyText:'入力してください',
                allowBlank:false,   //このフィールドを必須項目にします
                anchor:'90%',
                msgTarget:'under'   //入力に誤りがある場合はフィールドの下に表示
            },
            {
                xtype:'displayfield',
                name:'samplefield3',
                fieldLabel:'ディスプレイフィールド',
                value:'表示だけのフィールドです。',
                anchor:'90%'
            },
            new Ext.form.NumberField({
                name:'samplefield4',
                fieldLabel:'ナンバーフィールド',
                allowDecimals:false,    //小数点を入力できないようにします
                anchor:'90%'

            }),
            {
                xtype:'textfield',
                name:'samplefield5',
                fieldLabel:'Emailフィールド',
                emptyText:'入力してください',
                anchor:'90%',
                vtype:'email',  //vtypeコンフィグでバリデーションが設定
                msgTarget:'under'
            },
            {
                xtype:'datefield',
                name:'samplefield6',
                fieldLabel:'日付フィールド',
                emptyText:'入力してください',
                width:100,
                msgTarget:'side'
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'決定',
                iconCls:'tick',
                handler:function(){
                    //値の取り出し

                    //フォームパネルからフィールドを取得
                    var formFields = form.getForm();

                    //フィールドから値を取得
                    var formValues = formFields.getValues();

                    //入力項目を表示する処理(普通は値をポストしますが、今回はフィールド名と値を表示する)
                    var data = [];
                    Ext.iterate(formValues,function(key,val,arr){
                        data.push({
                            fieldname:key,
                            formvalue:val
                        });
                    })

                    var tpl = new Ext.XTemplate(
                        '',
                        '{fieldname}:{formvalue}',
                        ''
                    );

                    //表示処理
                    Ext.Msg.show({
                        title:'フォームの値を取得',
                        msg:tpl.apply(data),
                        width:300,
                        buttons:Ext.Msg.OK
                    });
                }
            }
        ]
    });
});

実行結果:

基本のフォーム

フォームの値を取得

ExtJSのフォームはExt.form.Fieldクラスで定義されています。このサブクラスに Checkbox, CheckboxGroup, DisplayField, Hidden, HtmlEditor, TextFieldなどが定義されており、実際にはこれらのサブクラスを使ってフォームを生成します。
今回はTextField,DisplayFieldに加えて,DateFieldとNumberフィールドを使ってみます。

ExtJSのフィールドはフォームパネル（Ext.form.FormPanel）に配置されることが一般的です。フォームパネルでは、ラベルの表示やボタンの連携を行ってくれます。そのため基本的なフォームを作る場合はフォームパネルの中にフィールドをレイアウトするのが一般的です。またフィールドは単体でツールバーや、エディタブルグリッド内に配置することもできます。

ではそれぞれのフィールドを見ていきます。今回は基本的なコンフィグオプションにしか触れません。詳しくはAPIリファレンスで確認してください。

TextField：
テキストフィールドを生成します。もっとも基本的なフィールドです。いくつかのコンフィグオプションが用意されています。またvtypeでバリデーションを設定することで、Emailやurlなどの妥当性のチェックを自動的に実行できます。

name:フィールドのname属性
fieldLabel:フィールドの見出しを設定します。
emptyText:入力が空の場合に表示されるテキスト。空のときもgetValue()したときにこの値が返る
anchor:フィールドの幅の設定パーセントで指定。自動的にリサイズされる。
allowBlank:Boolean,falseでフィールドを必須項目にできる
msgTarget:バリデーションを通過できなかった場合にエラーを表示する位置を設定します
vtype:バリデーションの種類を設定します。予め用意されたvtype以外にも独自のvtypeを作って設定することもできます。ExtJSのフォーラムで検索すると色々なvtypeが見つかります。

DisplayField:
表示のみのフィールドです、ディスプレイを表示するだけで入力はできません。ただしgetValuesしたとき、表示されている値が取得されます。

value:表示する値を設定

NumberField:
ナンバーフィールドはxtypeが設定されていません。このフィールドは数字のみの入力を受け付けます。コンフィグの設定で受け付ける数値の設定が可能です（負の数、小数点、最大値、最小値など）。今回は小数点のみ無効に設定しています。
allowDecimals:Boolean　小数点の入力許可設定

DateField:
デートフィールドは日付を入力するフィールドです。デートフィールドを生成すると自動的にデートピッカーがフィールドの右端に設定されて、ピッカーからの日付の入力も可能になります。

フィールドについてはこのような感じです。基本的にコンフィグオプションを設定することで、フィールドの機能を設定してきます。次にフィールドの値を取得する方法の紹介です。

フィールドの値はフォームパネルから直接取得できません。フォームパネルからフィールドを取得しそこから値を取得します。最初は戸惑うかもしれませんが、特に難しいことをやっているわけではありません。
フォームの値を取得しているのは以下の部分です。


                    //フォームパネルからフィールドを取得
                    var formFields = form.getForm();

                    //フィールドから値を取得
                    var formValues = formFields.getValues();

まずフォームパネルのgetForm()メソッドでフォーム自体へのアクセスを取得します。
次に各フィールドからの値をgetValues()メソッドで一括で取得します。
取得した値はオブジェクトで取得されます（プロパティ名にフィールのname属性）。
以下のように連結して一気に取得するほうが一般的かもしれません。


                    var formValues = form.getForm().getValues();

今回はフォームの基本を簡単に紹介しました、次回はフォームを使ってグリッドの値の変更するサンプルを紹介します。

ExtJS入門23　グリッドへの項目の追加と削除

佐竹裕行 — Tue, 20 Apr 2010 03:28:15 +0000

今回は空っぽのグリッドに対して、新規項目の追加とグリッドの項目の削除を行うサンプルを紹介します。
ローカルのデータを取り扱います。(サーバーサイドのプログラムを使ってグリッドのデータを取得している場合は、サーバー上のデータを削除する必要があります。)

追加と削除

グリッドのデータはストアで管理されています。グリッドは常にストアの状況を把握しています。ストアの情報に変化があった場合は即座にグリッドに反映されます。グリッドへの項目の追加と削除はグリッドのストアへの項目の追加と削除を行っているといえます。

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

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

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

HTML:





    
    ExtJS名古屋勉強会　データの追加と削除

    
    
    
    

    
    
    


    
        
            グリッドの項目を追加・削除できるようにしています。
        

        
        

        Java Script：grid-edit.js

Java Script:


//グリッドへの追加と削除
Ext.onReady(function()
{
    //グリッドパネルの作成 主要な設定は直接コンフィグオプションに入れています。
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        title:'SingleSelectのグリッドパネル 追加と削除が可能',
        height:210,
        width:400,

        //カラムモデル
        cm:new Ext.grid.ColumnModel([
            {
                id:'title',
                header:'項目名',
                dataIndex:'title',
                width:100
            }
        ]),

        //セレクションモデル
        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){  //グリッドに項目を追加する処理
                    //1.追加したいデータ
                    var data = {
                        title:'新しい項目'
                    };

                    //2.ストアのrecordの型を取得
                    var RecordType = grid.getStore().recordType;

                    //3.データをrecordの型に入れて新しい項目を作る
                    var newItem = new RecordType(data);

                    //4.ストアのinsertもしくはaddメソッドで追加
                    grid.getStore().insert(0,newItem);
                }
            },
            {
                text:'削除',
                iconCls:'delete',
                handler:function(btn){  //選択したレコードを削除する処理

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

                    if (record) {
                        //2.recordをremoveでストアから取り除く
                        grid.getStore().remove(record);
                    }
                }
            },'->',
            {
                text:'フォームで入力(おまけ)',
                iconCls:'add',
                handler:function(){　//フォームで入力した項目を追加する
                    var formPanel = new Ext.form.FormPanel({
                        border:false,
                        bodyStyle:{
                            padding:'15px'
                        },
                        items:[
                            {
                                name:'title',
                                xtype:'textfield',
                                fieldLabel:'新しい項目の名称',
                                anchor:'100%'
                            }
                        ]
                    });

                    var win = new Ext.Window({
                        title:'新しい項目の追加',
                        layout:'fit',
                        items:[formPanel],
                        modal:true,
                        width:300,
                        height:300,
                        buttonAlign:'center',
                        buttons:[
                            {
                                text:'閉じる',
                                handler:function(){
                                    win.close();
                                }
                            },
                            {
                                text:'追加',
                                handler:function(){
                                    var values = formPanel.getForm().getValues();

                                    var RecordType = grid.getStore().recordType;
                                    var newItem = new RecordType(values);
                                    grid.getStore().insert(0,newItem);  

                                    win.close();
                                }
                            }
                        ]
                    });

                    win.show();

                }
            }
        ]
    });
});

実行結果:

空のとき

追加と削除

今回は事前にグリッドのデータを用意する必要はありません。空のグリッドからはじめます。
グリッドが空のときグリッドは基本的に真っ白です。しかしグリッドの見た目を管理しているGridViewのコンフィグを設定することで、項目がない場合にテキストを表示させることができます
GridViewはGridPanelの内部で自動的に生成されます。GridViewはGridPanelのコンフィグオプションのviewにGridViewクラスを設定することができますが、GridPanelのviewConfigコンフィグオプションに直接GridViewのコンフィグを設定することも可能です。
今回はviewConfigオプションでGridViewの設定を指定しています。


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

GridViewのコンフィグについてはAPIリファセンスを確認指定ください。ここでは今回使うものだけを簡単に紹介します。

emptyText:グリッドが空のとき表示させるテキスト
deferEmptyText:booleanで指定。ストアがロードされるまでemptyTextの表示を待つかどうか
forceFit:booleanで指定。カラムの幅を自動的にグリッドいっぱいに広がるように自動的に調整する。

今回はそもそも初期データがないのでdeferEmptyTextをfalseにして、ロードまで待たないようにしています。

これでグリッドパネルの準備ができました。早速グリッドへの追加のための処理を考えます。

・追加

グリッドへの追加はtbarの「追加」ボタンから起動するようにします。tbarボタンの設定は以前の記事を参考にしてください。tbarが押された後に実際の追加の処理をhandlerの中で記述していきます。
ステップとしては4段階あります。


 tbar:[
	{
		text:'追加',
		iconCls:'add',
		handler:function(btn){  //グリッドに項目を追加する処理
			//1.追加したいデータ
			var data = {
				title:'新しい項目'
			};

			//2.ストアのrecordの型を取得
			var RecordType = grid.getStore().recordType;

			//3.データをrecordの型に入れて新しい項目を作る
			var newItem = new RecordType(data);

			//4.ストアのinsertもしくはaddメソッドで追加
			grid.getStore().insert(0,newItem);
		}
	},

ここではあまり実用的ではありませんが、固定したデータをボタンが押されるごとに追加させます。まず追加するデータを用意します(Step 1)。
次に用意したデータをストアに追加するには、ストアのrecordの型にデータをあわせる必要があります。そのためrecordのコンストラクタをストアのrecordTypeから取得します(Step 2)。このrecordTypeに用意したデータを当てはめてストアに合った新しいrecordを作成します。(Step 3)
recordが生成されたなら、あとは実際にストアに追加します。追加のためのメソッドにはaddメソッドとinsertメソッドがあります。addメソッドはストオの最後に追加し、insertメソッドはストアのデータの指定したindexに挿入します。ここではinsertを使いindexを0に指定することで、ストアのデータの先頭に追加しています。(Step 4)
これでストアに新しい項目が追加されました。ストアに追加されると即座にグリッドが再描画されて最新のストアの無いようにもとづいたグリッドの項目が表示されます。

・削除

グリッドからの項目の削除は追加に比べると簡単です。ストアの中から指定したrecordを取り除くことでグリッドから項目が削除されます。削除もtbarのボタンから呼び出すため、指定したrecordは現在選択中の項目にすることにします。また今回は紹介しませんが、前回紹介したコンテクストメニューを使うとより、ローカルアプリのような操作感で削除を行えます。


 tbar:[
	{
		text:'削除',
		iconCls:'delete',
		handler:function(btn){  //選択したレコードを削除する処理

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

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

まず現在選択中の項目をrecordで取得します。次にrecordをストアから削除します。ストアからの削除はremoveメソッドを使います。引数に対象のrecordを渡すとストアから削除されます。removeが行われるとすぐにグリッドに反映され対象のグリッド項目が取り除かれます。

このようにグリッドへの項目の追加と削除はストアにrecordを追加・削除することになります。storeとrecordが呼び出せる場所からであればどこからでも実行することができます。

ここでサンプルでは固定したデータを追加するだけでしたが、サンプルのコードにはポップアップで入力フォームを呼び出して、そのフォームからrecordを作って追加する処理もおまけで載せておきました。Ext.WindowやExt.form.FormPanelなどがいきなり出てきていますが、これらのクラスの解説はまたの機会に紹介します。APIリファセンスを見て考えてみるとリファレンスを読む練習になるかもしれません。ExtJS名古屋勉強会では時間があれば解説します。

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

ExJS入門31 GridViewでグリッドの各行の背景色を変更する

ExJS入門30 Twitter Search APIを使ったグリッドパネル

ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

ExJS入門28 チェックボックス付きグリッドパネル

ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン

ExJS入門26 エディタブル・グリッド（色々なエディターを設定する)

ExtJSで楽しくRIA業務アプリ開発 ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)

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

ExtJS入門 ExtJSのフォームについて（基本編）

ExtJS入門23 グリッドへの項目の追加と削除

ExJS入門30　Twitter Search APIを使ったグリッドパネル

ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

ExJS入門28　チェックボックス付きグリッドパネル

ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン

ExJS入門26　エディタブル・グリッド（色々なエディターを設定する)

ExtJSで楽しくRIA業務アプリ開発 ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)

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

ExtJS入門　ExtJSのフォームについて（基本編）

ExtJS入門23　グリッドへの項目の追加と削除