ExtJSで楽しくRIA業務アプリ開発 » ビジネスExtJS

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

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

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){
			//ボタンの処理
		}
	}
]

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

第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

佐竹裕行 — Thu, 28 Jan 2010 02:48:13 +0000

第4回ExtJS勉強会＠名古屋のチュートリアルセクション用の資料用のまとめです。
前回までのセッションでパネルを作るところまで行きました。今回はそのパネルの中に表示するHTML要素を生成するためのクラスを中心に扱います。クラスとしては以下の3つが中心になります。

Ext.XTemplateではHTMLをテンプレートと記述して、パネルに設定します。
Ext.DomHelperではDOMの追加や削除を行います。
Ext.DataView,ListViewはストアの内容をパネルに配置する簡単な方法を紹介します。

前回までのセッションのまとめはこちらです。

第2回ExtJS勉強会＠名古屋勉強会Ext.onReadyからはじめるExtJSのまとめ

第3回ExtJS勉強会＠名古屋 11/27　Ext.Panelからはじめるコンポーネントの基礎

各チュートリアル記事へのリンク

・ExtJS入門10　Ext.XTemplateを使う
http://extjs.blog.sus4.co.jp/2009/12/03/extjs-tutorial10/

・ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
http://extjs.blog.sus4.co.jp/2009/12/04/extjs-tutorial11/

・ExtJS入門13 Ext.DomHelperの使い方
http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial13-domhelper1/

・ExtJS入門14　DomHelperの使い方2
http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial14-domhelper2/

・ExtJS入門14　DomHelperの使い方3　
http://extjs.blog.sus4.co.jp/2010/02/25/extjs-domhelper-insert-remove/

・ExtJS入門15 DataViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/26/extjs-tutrorial15/

・ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/

第4回ExtJS勉強会＠名古屋（2010年1月）を開催します

野村亮之 — Mon, 11 Jan 2010 15:40:43 +0000

ExtJSユーザーの皆様、あけましておめでとうございます。
2009年12月は、名古屋の勉強会を開催しませんでしたので、2ヶ月間あいてしまいましたが、2010年1月28日（木）に第4回ExtJS名古屋勉強会を開催します。
今回は、株式会社ニューキャストさんのご好意により、セミナールームを借りて開催することになりました。

ExtJS3.1もリリースされ、ますます注目度が増すExtJSを名古屋から盛り上げて行きましょう。

詳細情報については、ExtJSウェブサイトをご覧下さい。

ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

佐竹裕行 — Fri, 04 Dec 2009 03:05:28 +0000

前回はExt.XTemplateクラスのfromメソッドでHTML内のファイルをテンプレートに使いましたが、今回はJavascriptのファイル内にテンプレートを書く方法を紹介します。

前回の記事
ExtJS入門10　Ext.XTemplateを使う

Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate

・HTML




    
    ExtJS名古屋勉強会　xtemplateの使い方(Javascript内のテンプレート)

    
    
    
    
    
    
    


JS内のテンプレートを使ったXTempalte

・Javascript


Ext.onReady(function(){
    var data = {
        name:'株式会社sus4',
        url:'http://www.sus4.co.jp',
    };

    /**
     * テンプレート
     * 中括弧でdataオブジェクトのプロパティ名を指定する。
     * js内の文字列でテンプレートを指定する場合は,
     * new Ext.XTemplate(テンプレート文字列)とする。newしないとエラーになります。
     * カンマで区切ることで複数行に渡ってテンプレート文字列を書くことができます。
     * 最後にカンマがつくとエラーになります。
     */
    var tpl = new Ext.XTemplate(
        'リンクを作る',
        '{name}',
        'テーブルを作る',
        '',
        '',
            '',
        '',
        '{name}: {url}'
    );

    //htmlファイルに作った要素のIDを指定
    var tplHtml = tpl.apply(data);
    var panel = new Ext.Panel({
		renderTo:'tpl-target',
        title:'テンプレートを使ったパネル',
        bodyStyle:'padding:20px',
        html:tplHtml
    });
});

{name}:	{url}

・実行結果

Ext.XTemplateでJS内にテンプレートを書く

Ext.XTemplateのテンプレートはJavascript内に記述しています。


var tpl = new Ext.XTemplate(
        'リンクを作る',
        '{name}',
        'テーブルを作る',
        '',
        '',
            '',
        '',
        '{name}: {url}'
    );

{name}:	{url}

文字列でテンプレートとなるHTMLを記述しています。テンプレート文字列が長くなって改行する場合は一旦文字列を区切って「,」(カンマ)で新しい文字列を連結して書いていきます。
例：


new Ext.XTemplate(
　　　'文字列',
　　　’文字列’
);

文字列を区切らずそのまま改行するとエラーになります。連結した最後の文字列のあとにカンマがついてもダメです。
データの設定する箇所は「{}」(中括弧)でデータオブジェクトのプロパティ名を指定します。
HTMLファイルにテンプレートを記述する、Ext.XTemplate.from()ではnewしていませんでしたが、JSファイル内に文字列としてテンプレートを記述して使う場合はnewしなければいけません。Ext.XTemaplate.from()メソッドを使うとHTMLに描いた文字列からテンプレートオブジェクトを生成して返しているためnewしなくても良かったのですが、今回は自分できちんとnewして文字列からテンプレートオブジェクトを生成します。

あとはExt.XTemplate.fromと同じようにapplyでデータの設定して、パネルの要素に設定しています。

ExtJSのことを話す上での基礎用語について – Part1

野村亮之 — Sat, 17 Oct 2009 12:01:30 +0000

ExtJSを話題にするうえで、覚えておくべきいくつかの知識があります。
技術者対営業、営業対エンドユーザー、技術者対エンドユーザーなど、ビジネスを進めていく上でいろいろな場面が考えられるとおもいますが、共通の言葉を作っておくと話が早い場合もあります。

今回は、まとめて紹介していきます。
どちらかというと、営業向けの言葉説明なので、技術者には物足りない内容かもしれないです。

1.RIA

リッチインターネットアプリケーション。3年か4年前から盛んに言われるようになって来た言葉です。それまでのHTMLベースのウェブアプリケーションに対して、よりネイティブアプリケーションっぽい動きをするWebアプリケーションの総称でよいと思います。
このRIAを実現する技術としては、Flash、FlexなどのFlashプラグインを利用するアプリケーション、Sliverlightプラグインを利用するアプリケーションと、Ajaxを利用するJavaScriptベースのアプリケーションが代表的なものとなります。
ウェブ上で、リッチな体験を提供するというのが言葉の中に含まれる定義ですね。

僕が業務系RIAを説明するときは、今まで当たり前にできていた業務をウェブアプリに置き換えても、当たり前に同じことができることですと伝えます。

2.Ajax

先ほどの説明に出てきましたが、Ajaxというのは、JavaScriptに関しての言葉です。
Wikiの説明ですと

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

という感じになります。
今までのHTMLベースのウェブアプリケーションは、情報を送信するのに、ページ全体を書き換える必要がありましたが、このAjax技術を使うと、ページ内でいつでもサーバへの通信が可能で、ページ内の一部を動的に変更することができます。
これが、ネイティブアプリケーションっぽくウェブアプリケーションを振舞わせることができる核の技術です。

3.ライブラリとフレームワーク

前にお話をしているときに、フレームワークとライブラリの違いってなんですかと聞かれたことがあるので、、、

Wikiによるフレームワークの説明：

Web アプリケーションフレームワーク（英: Web Application Framework）は、動的なウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークである。フレームワークの目的は、Web 開発で用いられる共通した作業に伴う労力を軽減することである。たとえば、多数のフレームワークがデータベースへのアクセスのためのライブラリや、テンプレーティングフレームワーク、セッション管理を提供し、コードの再利用を促進させるものもある。

Wikiによるライブラリの説明：

ライブラリは、汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものである。一般にライブラリは、それ単体ではプログラムとして動作させることはできないので実行ファイルではない。ライブラリは他のプログラムに何らかの機能を提供するコードの集まりと言うことができる。ソースコードの場合と、オブジェクトコード、あるいは専用の形式を用いる場合とがある。たとえば、UNIXのライブラリはオブジェクトコードをarと呼ばれるアーカイバでひとまとめにして利用する。

んー、これだとなかなかわかりにくいですね。

近年登場してきているJavaScriptを快適に書くためのライブラリ・フレームワークを上げてみると、

Prototypeは、昔JavaScriptライブラリといわれていたような気がしたのですが、いつの間にかフレームワークになっています。
jQueryは、WikiではJavaScriptライブラリといわれていますね。
ちょっと毛色が違いますが、YUIはUIライブラリといっていますね。
Dojoは最近、Core, digit, DojoXに分かれてるみたいですね。3つあわせると、フレームワークとよばれるっぽいですね。

どちらかというと、スクリプトを書くときにサポートしてくれる機能が寄り集まったものをライブラリといい、アプリケーション自体をそれで完結できるもの（JavaScriptの場合は、クライアントサイドのコード全体をまかなえると考えれば適当かもしれません）をフレームワークといっているようです。

ちょうど、ExtJSでいうと、ExtCoreに関しては、ライブラリといったほうがよさそうで、ExtJSはフレームワークといえそうですね。

なんだかまとまりのない感じになってしまいましたが、とりあえず簡単に3つ紹介してみました。次回は、JavaScriptに関する言葉をもう少し解説していきます。

ExtJSで楽しくRIA業務アプリ開発 » ビジネスExtJS

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

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

第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する