ExtJSで楽しくRIA業務アプリ開発 » 業務ウェブアプリケーションTips

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を利用しています。

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入門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入門　DomHelperの使い方3　位置指定の追加と削除

佐竹裕行 — Thu, 25 Feb 2010 06:47:22 +0000

DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。

DomHelperについてはこちらにサンプルがあります。

サンプルコード3 DomHelperを使った位置指定の追加とDomQueryを使った削除

・html





    
    ExtJS名古屋勉強会　DOMHelperの使い方 DOMの追加と削除

    
    
    
    
    
    



    位置を指定して追加する

・javascript


Ext.onReady(function(){
    //初期値の設定
    var bcnt = 0;
    var acnt = 0;
    var bias = 3;
    var bchar = 'M';
    var achar = "W";

    var before = function(target) {
        Ext.DomHelper.insertBefore('insert-target',{
            cls:'add',
            html:String.leftPad(bchar,bcnt * bias,bchar)
        });
        bcnt++;
    };

    var after = function(target) {
        Ext.DomHelper.insertAfter('insert-target',{
            cls:'add',
            html:String.leftPad(achar,acnt * bias,achar)
        });
        acnt++;
    };

    var remove = function(target) {
        //任意のDOMを見つけるにはDomQueryを使う。ここではCSSクラスがaddのもの全て。
        var elems = Ext.DomQuery.select('.add');
        Ext.each(elems,function(o,cnt,array){
            Ext.removeNode(o);
        });
        bcnt = acnt = 0;
    };

    //ボタンを作成
    new Ext.Button({
        renderTo:'beforeBtn',
        text:"追加(Before)",
        handler:before
    });

    new Ext.Button({
        renderTo:'afterBtn',
        text:"追加(After)",
        handler:after
    });

    new Ext.Button({
        renderTo:'bothBtn',
        text:"前後に追加",
        handler:function() {
            before();
            after();
        }
    });

    new Ext.Button({
        renderTo:'removeBtn',
        text:"追加したDOMを削除",
        handler:remove
    });
});

・実行結果

DomHelper DOMの追加と削除

ボタンを4つ作って各ボタンに、直前に追加、直後に追加、両方に追加、削除を割り当てています。ボタンが押されると、罫線の前後の所定の位置に要素を追加します。
またこのサンプルではDomQueryクラスを使って追加要素を探して、削除する処理も追加しています。DomHelperはDOMの生成や追加を行いますが、DomQueryはDOMツリーから任意の要素を探すことができます。今回はDomQueryの使い方について詳しく解説しませんが、追加した要素をCSSのクラスから探し出す処理を行っています。

グリッドパネルやツリーパネルの構築はブロックを組み立てるようなイメージですが、Ext.Panelは真っ白のキャンバスに絵を描いていく感覚に近いと気がします。パネルの中のDOMを自由に操れると、ExtJSの派手なUIの裏にある奥深いDOMの世界を体感できるようになります。ExtJSでDOMをいじって初めてExtJSをいじったことになると何処かで聞いたことがありますね。

ExtJS入門18　グリッド　レンダラーを使ってデザインを変える

佐竹裕行 — Fri, 05 Feb 2010 03:14:32 +0000

グリッドのデザインを変更するための機能として、レンダラー機能があります。
レンダラーを使うと、グリッドに設定する値を調整したり、デザインを変更することができます。

レンダラーはカラムごとに設定します。そのためカラムモデルで各カラム設定に追加します。

前回のグリッドのサンプルを使って、レンダラーを使ってデザインを変更してみます。

レンダラーを使ったサンプル

・HTML





    
    ExtJS名古屋勉強会　Gridの使い方　レンダラー編

・JS


Ext.onReady(function(){

    var data = [
        {
            id:1,
            rank:1,
            name:'IE',
            percentage:62.69
        },
        {
            id:2,
            rank:2,
            name:'Firefox',
            percentage:24.61
        },
        {
            id:3,
            rank:3,
            name:'Chrome',
            percentage:4.63
        },
        {
            id:4,
            rank:4,
            name:'Safari',
            percentage:4.46
        },
        {
            id:5,
            rank:5,
            name:'Opera',
            percentage:2.40
        },
        {
            id:6,
            rank:6,
            name:'Opera Mini',
            percentage:0.53
        }
    ];

    var store = new Ext.data.JsonStore({
        data:data,
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'}
        ]
    });

	//レンダラーを作成する

	//ブラウザ名用レンダラー
	var browserRenderer = function(val) {
		var newVal;
		switch (val) {

		case 'IE':
			newVal = 'IE';
			break;

		case 'Chrome':
			newVal = String.format('{0}{1}{2}{3}{4}{5}',
					'C',
					'h',
					'r',
					'o',
					'm',
					'e'
			);
			break;

		case 'Firefox':
			newVal = 'Firefox';
			break;

		case 'Safari':
			newVal = 'Safari';
			break;

		case 'Opera':
			newVal = 'Opera';
			break;

		default:
			newVal = val;
			break;
		}

		return newVal;
	};

	//ランキング用レンダラー
	var rankRenderer = function(val){
		var size = (8 - val) * 10;
		return String.format('{1}',size,val);
	};

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

    new Ext.grid.GridPanel({
        renderTo:Ext.getBody(),
        id:'my-grid',
        title:'2009年12月のブラウザシェア',
        height:420,
        width:280,
        cm:column,
        store:store
    });
});

・実行結果

レンダラー付きグリッド

APIリファレンスではExt.grid.ColumnModelのsetRendererとExt.grid.Columnクラスのrendererの部分に詳しく載っています。

Ext 3.0 – API Documentation 日本語版 – Ext.grid.ColumnModel
http://extdocs.xenophy.com/?class=Ext.grid.ColumnModel

Ext 3.0 – API Documentation 日本語版 – Ext.grid.Column
http://extdocs.xenophy.com/?class=Ext.grid.Column

レンダラーは関数として作ります。引数として渡されるのは以下のものがあります。

value : Object　セルのデータ値。

metadata : Object　セルのtd要素に追加するCSSクラス名等を含むオブジェクト

record : Ext.data.record　データが引き出されたExt.data.Record。

rowIndex : Number　列のインデックス

colIndex : Number　カラムのインデックス

store : Ext.data.Store　レコードが引き出された Ext.data.Storeオブジェクト。

Ext 3.0 – API Documentation 日本語版 – Ext.grid.ColumnModel

単純にグリッドに設定される値だけを使うのであれあば、第一引数に渡される値を使うだけです。

返り値にはHTML返すこともできるので、今回はspanを追加して文字色と文字サイズを変更しています。

レンダラーを使うことで、グリッドのデザインをある程度自由に変更できます。rendererに渡される引数をもとに様々な値を返して、グリッドのデザインを変更することでエクセルっぽくないグリッドを作れたりします。

ExtJSで楽しくRIA業務アプリ開発 » 業務ウェブアプリケーションTips

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

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

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

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

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

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

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

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

ExtJS入門 DomHelperの使い方3 位置指定の追加と削除

位置を指定して追加する

ExtJS入門18 グリッド レンダラーを使ってデザインを変える

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

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

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

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

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

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

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

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

ExtJS入門　DomHelperの使い方3　位置指定の追加と削除

ExtJS入門18　グリッド　レンダラーを使ってデザインを変える