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

0.95のハマリどころ

野村亮之 — Sun, 19 Sep 2010 09:56:33 +0000

0.93から０.９５にアップデートした際に、動かなかったところをメモ。

itemsに直接オブジェクトを書くと、レンダーしてくれない（泣。0.93までしてくれていて便利だったのに。１つのComponentを仕込むだけでも、配列で書きましょう。
Ext.platform消滅。Ext.is.xxxで判断するように、サンプルの方は書き直されていました。
NestedListがStoreを使うようになったみたい（これは聞いただけなので、自分自身ではまったところではない）。

itemsのところだけが、見つけるのが大変でしたが、あとはエラーを吐いてくれるので、Touch本体のソースを見ながら修正しました。
いやー、まだまだ仕様変わりそうだなぁ。

ExtJS入門38　独自のVTypeを定義してフォームを検証する

佐竹裕行 — Fri, 21 May 2010 04:05:36 +0000

今回はフォームのVTypeに独自のバリデーションを設定して、フォームの検証を行うサンプルです。

カスタムのVTypeを定義してフォームを検証する。

フォーム関連の過去の記事はこちらからです。

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

HTML:





    
    ExtJS名古屋勉強会　フォーム　カスタムのVTypeの作成

    
    
    
    

    
    
    
    


    
        

            Extのフォーム　カスタムVTypeの作成してフォームを検証します。
        
        
        

        Java Script：form-vtype.js

Java Script:


Ext.onReady(function()
{
    Ext.apply(Ext.form.VTypes,{

        //EXTという文字以外を入力させないルール
        onlyEXT:function(val){
            var pattern = /[^EXT]/g;
            return !pattern.test(val);
        },
        onlyEXTText:'EXTしか入力できません。大文字と小文字を区別します。',
        onlyEXTMask:/[EXT]/,

        //自分で設定した日付形式でチェックする場合
        mydate:function(val) {
            var dt = Date.parseDate(val,'Y:m:d',true);
            return dt ? val : false;
        },
        mydateText:'日付の形式が間違っています。2010:01:01の形式で入力してください。',
        mydateMask:/[0-9:]/
    });

    var form = new Ext.form.FormPanel({
        renderTo:'form',
        title:'カスタムのVTypeを使ったフォーム',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        defaults:{
            xtype:'textfield',
            anchor:'90%',
            msgTarget:'under'
        },
        items:[
            {
                name:'normal',
                fieldLabel:'チェックなしフィールド',
                emptyText:'チェックなし'
            },
            {
                name:'email',
                fieldLabel:'Emailフィールド',
                emptyText:'Email入力してください',
                vtype:'email'  //vtypeコンフィグでバリデーションが設定　emailはデフォルトであるvtype
            },
            {
                name:'onlyabc',
                fieldLabel:'onlyEXTフィールド',
                emptyText:'EXTのみ入力可',
                vtype:'onlyEXT'
            },
            {
                name:'mydatefield',
                fieldLabel:'mydateフィールド',
                emptyText:'日付を入力',   //空のときのテキスト
                anchor:'90%',
                vtype:'mydate'
            },
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'決定',
                formBind:true,
                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
                    });
                }
            }
        ]
    });
});

実行結果:

カスタムのVTypeを定義してフォームを検証する。

ExtJSでは予め、いくつかのVtypeが用意されています。

alpha:アルファベット
alphanum:アルファベットと数字
email:E-mailアドレス
url:URL

これをフォームフィールドのvtypeコンフィグに設定することでフィールドのvalidateが実行されたときに、検証方法を指定できます。
使用例は以下のような形です。vtypeを文字列で指定します。


//emailを設定する場合
new Ext.form.Textfield({
	name:'email',
	fieldLabel:'Emailフィールド',
	emptyText:'Email入力してください',
	vtype:'email'  //vtypeコンフィグでバリデーションが設定　emailはデフォルトであるvtype
}),

さて今回の本題ですが、VTypeに独自の検証法を定義する方法です。今回のサンプルでは2種類の独自VTypeを定義して使っています。
一つはE、X、T、の3文字のうちどれかしか入力できないフィールド。もう一つは独自の日付チェックを設定しています。
ExtJSのVTypeはExt.form.VTypesクラスというシングルトンクラスで管理されています。独自で作成したvtypeもここに登録しなければいけません。
登録方法はExt.form.VTypesクラスをオーバーライドすることで登録します。ExtJSのクラスのオーバーライドではExt.apply()を使ってExtJSで2つのオブジェクトをマージする方法があります。
Ext.apply()メソッドは引数を2つもち、第一引数側に第二引数のオブジェクトを追記します。


    Ext.apply(targetObj,{srcObj});

仮にtargetObjとsrcObjに同じプロパティが設定されいる場合は、srcObj側のプロパティに上書きされます。またマージする方向を逆にしたExt.applyIf()というメソッドも用意されています。

今回の場合


Ext.apply(Ext.form.VTypes,{

        //EXTという文字以外を入力させないルール
        onlyEXT:function(val){
            var pattern = /[^EXT]/g;
            return !pattern.test(val);
        },
        onlyEXTText:'EXTしか入力できません。大文字と小文字を区別します。',
        onlyEXTMask:/[EXT]/,

・・・
});
[/code]
というようにExt.form.VTypesにオブジェクトを追加しています。Ext.form.VTypesクラスに登録を行うと各フィールドのコンフィグで独自のvtypeを読み出すことができます。

では実際のvtypeの記述方法です。まずEXTしか入力できないルールを作成します。
独自のvtypeのためには3つのプロパティを設定できます。

vtype名:実際の検証処理関数。falseを返すとInvalidになる。またこの関数名がフィールドのvtypeコンフィグから呼び出す名前になる。
vtype名Text:このルールで検証結果がInvalidの場合に表示されるエラーメッセージ
vtype名Mask:このvtypeが設定されているフィールドへの入力を制限する。正規表現でしてい

オブジェクトとしては以下のように記述して、Ext.form.VTypesに追加します。


Ext.apply(Ext.form.VTypes,
	{
			//EXTという文字以外を入力させないルール
			onlyEXT:function(val){
				var pattern = /[^EXT]/g;
				return !pattern.test(val);
			},
			onlyEXTText:'EXTしか入力できません。大文字と小文字を区別します。',
			onlyEXTMask:/[EXT]/,

}
);
[/code]
VTypeを登録したら、使いたいフィールドで


vtype:'onlyEXT'

を設定します。
vtype：onlyExtのフィールドではEXTの3文字のうちどれかしか入力できません。onlyEXTMaskで設定した入力制限が効いているためです。しかし日本語環境では日本語が入力できてしまいます。入力があるとonlyEXTに設定した検証関数で検証されます。ここでEXT以外の文字列があった場合はfalseを返すようにしています。検証関数からfalseが返るとfieldはInvalidになりエラーメッセージを表示します。ここにはonlyEXTTextで設定したエラーメッセージが表示されることになります。
これで指定した文字以外の入力を制限します。

次に独自の日付フォーマットをチェックするVTypeの例です。VTypeの設定は以下のようになります。


Ext.apply(Ext.form.VTypes,
	{
        //自分で設定した日付形式でチェックする場合
        mydate:function(val) {
            var dt = Date.parseDate(val,'Y:m:d',true);
            return dt ? val : false;
        },
        mydateText:'日付の形式が間違っています。2010:01:01の形式で入力してください。',
        mydateMask:/[0-9:]/
	}
);

このVTypeではmydate関数内でDate.parseDate()で独自の日付形式でDateオブジェクトの生成を行っています。valにパースできない文字列が入ってきたばあいはdtにはundefinedが返されます。
parseDate()メソッドは賢く例えば5/32を指定した場合は、自動的に6/1にしてくれます。しかし現実的に5/32とは入力された場合は5/31の入力間違いの可能性が高いので、エラーにして欲しいと思います。その場合はparseDate
()メソッドの第三引数にbooleanで厳密な日付のチェックを行うか指定できます。ここがtrueの場合は5/32といった実際にはない日付はエラーになります。

今回はVTypesに独自のVtypeを追加する方法を紹介しました。フォームの検証はサーバーサイドでも行う必要がありますが、クライアントサイドのUIで処理することで、わざわざ情報をポストすることがないので高速に実行できます。前回紹介したサーバーからエラーメッセージを表示する方法と一緒に利用することで、ユーザビリティのよいフォームパネルが作成できます。

ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

佐竹裕行 — Thu, 20 May 2010 06:21:39 +0000

今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。

サーバーからのエラー結果を表示する

ポストした後、サーバーのチェックが行われエラーの結果がJSONで返ってくるフォームパネルのサンプルです。

フォーム関連の過去の記事はこちらからです。

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

JSON(今回はこのファイルがフォームの送信先になっています):


{
    success:false,
    errors:{
        'samplefield1':'間違っています。' ,
        'samplefield2':'間違っています。' ,
        'samplefield4':'間違っています。' ,
        'samplefield5':'間違っています。' ,
        'samplefield6':'特に設定することも無く、エラーメッセージを表示できます。'
    }
}

HTML:





    
    ExtJS名古屋勉強会　フォーム　エラーの表示

    
    
    
    

    
    
    
    


    
        

            Extのフォームフィールドへのエラーの表示
        
        
        

        Java Script：form-errors.js

		JSON File：errors.json

Java Script:


Ext.onReady(function()
{
    var form = new Ext.form.FormPanel({
        renderTo:'form',
        autoScroll:true,

        url:'errors.json',//送信先URL　今回はエラーを返す静的なJSONファイルを指定しています。

        title:'フォームの簡単な紹介',
        height:330,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        defaults:{
            msgTarget:'under',
            anchor:'90%',
            xtype:'textfield'
        },
        items:[
            {
                name:'samplefield1',
                fieldLabel:'テキストフィールド1',
                emptyText:'入力してください',   //空のときのテキスト
            },
            {
                name:'samplefield2',
                fieldLabel:'テキストフィールド2(必須項目)',
                emptyText:'入力してください',
            },
            {
                xtype:'displayfield',
                name:'samplefield3',
                fieldLabel:'ディスプレイフィールド',
                value:'表示だけのフィールドです。',
            },
            new Ext.form.NumberField({
                name:'samplefield4',
                fieldLabel:'ナンバーフィールド',
                allowDecimals:false,    //小数点を入力できないようにします
            }),
            {
                name:'samplefield5',
                fieldLabel:'Emailフィールド',
                emptyText:'入力してください',
                vtype:'email',  //vtypeコンフィグでバリデーションが設定
            },
            {
                xtype:'datefield',
                name:'samplefield6',
                fieldLabel:'日付フィールド',
                emptyText:'入力してください',
                anchor:false,//anchorをキャンセル
                width:100
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'送信',
                //formBind:true,
                iconCls:'tick',
                handler:function(){
                    //ポストする。
                    form.getForm().submit();
                    //今回はフィールドに何を入れてもエラーが返ってきますになります。
                }
            }
        ]
    });
});

実行結果:

サーバーからのエラー結果を表示する

今回のキモになるのはサーバーから返されるJSONの型です。今回はサーバーサイドのプログラムを書かずにどんな値を送信しても静的なJSONファイルが返ってくるようにしています。


{
    success:false,
    errors:{
        'samplefield1':'間違っています。' ,
        'samplefield2':'間違っています。' ,
        'samplefield4':'間違っています。' ,
        'samplefield5':'間違っています。' ,
        'samplefield6':'特に設定することも無く、エラーメッセージを表示できます。'
    }
}

サーバーサイドで処理する際は、レスポンスとして返却するJSONを上のような形式にします。
successはエラーが合った場合必ずfalseを返すようにします。
errorsにはオブジェクトでエラーのあったフィールド名：エラーメッセージという形式でエラーを列挙します。
このJSONのフォーマットでレスポンスを返すとExtJSのフォームが自動的にエラーを表示してくれます。
ポイントはerrors:{}の形式を必ずこの形にすることです。


 {
   success:false,//or true
   errors:{
     'フィールド名':'メッセージ'
        ・・・・
   }//エラーがない場合は空
 }

実際にサンプルコードを動かしてみると、どんな値を送ってもerros.jsonのJSONが返り、各フィールドにエラーメッセージが表示されます。
msgTargetをunderにしておくと見やすくなります。
このJSONでsamplefield3:’間違っています’を付け加えた場合、displayfieldにもエラーメッセージを出してしまうので注意してください。

フォームのsubmit後の処理はsubmit()メソッドの引数にオブジェクトで処理を渡すこともできますが、簡単なエラー処理であればJSONの形をきちんとするだけで、submit()の引数になる長い処理を記述しなくてよいので便利です。

ExtJS入門35 Tableレイアウトのフォーム

佐竹裕行 — Tue, 18 May 2010 04:18:26 +0000

今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム

Tableレイアウトのフォーム

フォーム関連の過去の記事はこちらからです。

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

HTML:





    
    ExtJS名古屋勉強会　フォーム　Columnレイアウト

    
    
    
    

    
    
    
    


    
        

            Extのフォームのレイアウト
        
        
        

        

        Java Script：form-layout2.js

Java Script:


Ext.onReady(function()
{
    var form = new Ext.form.FormPanel({
        autoScroll:true,
        renderTo:'form',
        title:'tableレイアウトのフォーム',
        height:600,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        layout:'table',
        layoutConfig:{
            columns:3
        },
        defaults:{
            border:false,
            xtype:'fieldset',
            labelAlign:'top',
            anchor:'90%',
            defaults:{
                xtype:'textfield',
                emptyText:'入力してください',   //空のときのテキスト
                msgTarget:'under',   //入力に誤りがある場合はフィールドの下に表示
                allowBlank:false,
                anchor:'90%'
            }
        },
        items:[
            {
                xtype:'displayfield',
                value:'fieldLabelはformレイアウトの場合しか表示されないので、さらにフィールドセットでラップしてformレイアウトの中にフィールド入れています。
 ',
                hideLabel:true
            },
            {
                items:{
                    name:'samplefield1',
                    fieldLabel:'テキストフィールド1'
                }
            },
            {
                items:{
                    name:'samplefield2',
                    fieldLabel:'テキストフィールド2'
                }
            },
            {
                rowspan:2,
                items:[
                    {
                        name:'samplefield3-1',
                        fieldLabel:'テキストフィールド3-1'
                    },
                    {
                        name:'samplefield3-2',
                        fieldLabel:'テキストフィールド3-2'
                    },
                    {
                        name:'samplefield3-3',
                        fieldLabel:'テキストフィールド3-3'
                    }
                ]
            },
            {
                colspan:2,
                items:{
                    name:'samplefieldr4',
                    fieldLabel:'テキストフィールド4'
                }
            },
            {
                colspan:2,
                items:{
                    name:'samplefield5',
                    fieldLabel:'テキストフィールド5'
                }
            },
            {
                colspan:2,
                items:{
                    name:'samplefield6',
                    fieldLabel:'テキストフィールド6'
                }
            },
            {
                items:{
                    name:'samplefield7',
                    fieldLabel:'テキストフィールド7'
                }
            },
            {
                title:'左のセット',
                colspan:2,
                border:true,
                bodyStyle:'padding:3px',
                items:[
                    {
                        name:'samplefield8',
                        fieldLabel:'テキストフィールド8'
                    },
                    {
                        name:'samplefield9',
                        fieldLabel:'テキストフィールド9'
                    }
                ]
            },
            {
                title:'右のセット',
                border:true,
                bodyStyle:'padding:3px',
                collapsible:true,
                items:[
                    {
                        name:'samplefield10',
                        fieldLabel:'テキストフィールド10'
                    },
                    {
                        name:'samplefield11',
                        fieldLabel:'テキストフィールド11'
                    }
                ]
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'セット',
                iconCls:'add',
                handler:function(){
                    //初期値もセットできる
                    var formFields = form.getForm();
                    formFields.setValues({
                        samplefield7:'test',
                        samplefield8:'test'
                    });
                }
            },
            {
                text:'決定',
                formBind:true,
                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
                    });
                }
            }
        ]
    });

});

実行結果:

Tableレイアウトのフォーム

テーブルレイアウトは、表のようにパネルを配置します。これをフォームに適応するには前回同様fieldsetでラップしてfieldset内はformレイアウトを使いラベルを表示させます。
tableレイアウトは列の数を予め設定しておく必要があります。レイアウトのコンフィグの設定はlayoutConfigで行います。


        layout:'table',
        layoutConfig:{
            columns:3
        }

layoutConfigにはオブジェクトで設定情報を渡します。columnsで列数を指定します。ここでは3列にしました。
これでtableレイアウトはitemsに設定されているコンポーネントを横に3つずつならべて表示してくれます。

さらにtableレイアウトではcolspan,rowspanが設定できます。columnレイアウトと同じように、itemsのそれぞれのコンポーネントに個別で指定します。
サンプルコードではフィールド３，４が以下のようになっています。。


{
	rowspan:2,
	items:[
		{
			name:'samplefield3-1',
			fieldLabel:'テキストフィールド3-1'
		},
		・・・
},
{
	colspan:2,
	items:{
		name:'samplefieldr4',
		fieldLabel:'テキストフィールド4'
	}
},

rowspanを設定するとその数だけ行を縦に連結します。対してcolspanは列を横に連結します。
注意点としては、rowspanを設定した場合vertical-alignがmiddleになり真ん中に寄せられる点です。右のセットのように折りたためるfieldsetの場合は折りたたんだ状態で真ん中によってしまうので少し不恰好です。フォーラムを見るとtableレイアウトクラスを拡張すればvalignをtopにできるようです。
columnと違ってrowspanが設定できるのがtableレイアウトの良いところなのですが、ちょっと残念です。
しかしtableレイアウトも上手く使うことで複雑なフォームのレイアウトが可能です。色々なフィールドで試してみると良いかも知れません。

ExtJS入門32　フォームパネルとフィールド(基本編)

佐竹裕行 — Thu, 13 May 2010 04:26:46 +0000

今回からExtJSのフォームに関するサンプルコードを紹介していきます。フォームに関しては以前簡単なサンプルを紹介しているので、まずは以前紹介した基本的なフォームの修正版からはじめてみたいと思います。

フォームパネルと基本的なフィールド

フォーム関連の過去の記事はこちらからです。

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

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

HTML:





    
    ExtJS名古屋勉強会　フォーム　その1

    
    
    
    

    
    
    
    


    
        

            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'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        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:'決定',
                formBind:true,
                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
                    });
                }
            }
        ]
    });

    //msgTargetにqtipを設定した場合はクイックティップスを起動しないといけない
    Ext.QuickTips.init();

    var form2 = new Ext.form.FormPanel({
        renderTo:'form2',
        title:'フォーム　その２',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する

        defaults:{
            xtype:'textfield',  //デフォルトを設定する
            //msgTarget:'qtip',    //フィールドのmsgTargtの初期値はqtipです。
            allowBlank:false,   //このフィールドを必須項目にします
            anchor:'90%',
            emptyText:'入力してください'   //空のときのテキスト
        },
        items:[
            {
                name:'form2-field1',
                fieldLabel:'テキストフィールド1',
                value:'初期のテキスト'
            },
            {
                name:'form2-field2',
                fieldLabel:'テキストフィールド2(必須項目)'
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'リセット',
                iconCls:'reset',
                handler:function(){
                    var formFields = form2.getForm();
                    formFields.reset();
                }
            },
            {
                text:'決定',
                formBind:true,
                iconCls:'tick',
                handler:function(){
                    //値の取り出し

                    //フォームパネルからフィールドを取得
                    var formFields = form2.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
                    });
                }
            }
        ]
    });
});

実行結果:

フォームパネルと基本的なフィールド

以前紹介した基本的なフォームに少し修正を加えたサンプルコードになります。
上のフォームは前回とほとんど同じです。変更点はフォームの妥当性チェックと送信ボタンを連動させています。
フォームパネルでmonitorValidをtrueに設定し、buttonsの中で連動させたいものにformBinde:trueを設定します。


    var form = new Ext.form.FormPanel({
		・・・
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        items:[],
		・・・
		buttons[
			{
				・・・
				formBine:true,
				・・・
			}
		]
	});

monitorValidを有効にすると、定期的に現在の妥当性の状況を確認してボタンを有効/無効に切り替えます。(monitorValidが有効なときフォームパネルは定期的にcllientValidationイベント実行します。)
monitorValid + formBindを設定すると、フォームパネル中に含まれる全てのフォームの妥当性チェックを正しく通過しない限り、ボタンを無効にできるので非常に便利です。
上側のフォームの以前のサンプルコードからの変更以上です。

次に下側のフォームです。こちらのフォームでは2つのテキストフィールドをフォームパネルに設置しています。
フォームパネルでは、普通は複数のフォームを設定します。defaultsコンフィグにフィールドの共通設定を記述しておくと毎回繰り返す必要がなくなります。


 defaults:{
            xtype:'textfield',  //デフォルトを設定する
            //msgTarget:'qtip',    //フィールドのmsgTargtの初期値はqtipです。
            allowBlank:false,   //このフィールドを必須項目にします
            anchor:'90%',
            emptyText:'入力してください'   //空のときのテキスト
        },

msgTargetをデフォルトの”qtip”のままにして、エラーメッセージをクイックティップスで表示します。クイックティップスで表示する場合はExt.QuickTip.init()を実行して、アプリ全体のクイックティップスを初期化しておく必要があります。


  //msgTargetにqtipを設定した場合はクイックティップスを起動しないといけない
    Ext.QuickTips.init();

下側のフォームでもmonitorValid + formBindを有効にしています。さらにもう一つボタンを設置してフォームの入力内容をリセットしています。リセットボタンのハンドラでBasicForm のreset()メソッドでフィールドをリセットしています


        items:[
            {
                name:'form2-field1',
                fieldLabel:'テキストフィールド1',
				value:'初期テキスト'
            },
            {
                name:'form2-field2',
                fieldLabel:'テキストフィールド2(必須項目)'
            }
        ],
         buttons[
			{
                text:'リセット',
                iconCls:'reset',
                handler:function(){
                    var formFields = form2.getForm();
                    formFields.reset();
                }
			},
			・・・
		]

ここでは注意が必要で、2つのテキストフィールドのうち上側には初期値を設定しています。reset()メソッドでは、フォームを空にするのではなく、フォームの初期の状態に戻すという点です。そのため初期値が設定されている、上のフィールドではフィールドが空になるのではなくvalueに設定されている初期値に戻ります。

以上の2つのフォームの基本形です。複雑なフォームも今回のサンプルの発展形です。次回からはもう少し複雑なフォームを紹介します。

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入門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入門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で楽しくRIA業務アプリ開発 » Tips

0.95のハマリどころ

ExtJS入門38 独自のVTypeを定義してフォームを検証する

ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

ExtJS入門35 Tableレイアウトのフォーム

ExtJS入門32 フォームパネルとフィールド(基本編)

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

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

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

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

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

ExtJS入門38　独自のVTypeを定義してフォームを検証する

ExtJS入門32　フォームパネルとフィールド(基本編)

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

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

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

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