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

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入門36 HTMLの標準フォームにExtJSのフィールドを設置する

佐竹裕行 — Wed, 19 May 2010 04:02:30 +0000

今回はExtJSのフォーム（フィールド）をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。

HTMLの標準フォームにExt.form.Textfieldをレンダリング

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

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

HTML:





    
    ExtJS名古屋勉強 htmlにフィールドをレンダリング

    
    
    
    

    
    
    
    


    
        

            Extのフォームのレイアウト HTMLにExtのフィールドを仕込む
        
        
        
            インプット1:
            インプット2:
            インプット3:
            インプット4:

            普通のイプット:
        

        
        
        

        Java Script：form-layout3.js

Java Script:


Ext.onReady(function()
{

    //エイリアスを作っておく
    var dh = Ext.DomHelper;

    for (var i=1;i < 5; i++)
    new Ext.form.TextField({
        renderTo:'input' + i,
        allowBlank:false,
        name:'input' + i,
        listeners:{
            blur:function(field){
                var value = field.getValue();
                console.debug(value);
                console.debug(value.length);
                if (value.length < 5) {
                    msg = '短すぎます';
                    field.markInvalid(msg);
                }
            },
            invalid:function(field,msg){
                var msgdiv = Ext.get('msg-' + field.name);
                if (msgdiv) {
                    msgdiv.remove();
                }
                dh.append('msg',
                    {
                        tag: 'div',
                        cls:'message',
                        id: 'msg-' + field.name,
                        html:field.name + ':' + msg
                    }
                );
            },
            valid:function(field){
                var msg = Ext.get('msg-' + field.name);
                if (msg) {
                    msg.remove();
                }
            }
        }
    });

    new Ext.Button({
        renderTo:'submit',
        text:'送信',
        iconCls:'submit',
        handler:function(){
            document.extform.submit();
        }
    });
});

実行結果:

HTMLの標準フォームにExt.form.Textfieldをレンダリング

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


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

ExtJSのフィールドをHTMLで記述したフォームの中に設置しています。フィールドのrenderToコンフィグでレンダリング先を指定しいます。
例えばinput1のフィールドはspan#input1に下のように描画されます。

このようにテキストフィールドはinput type=”text”…という要素が生成されるためHTMLのフォームの中にExtJSのフィールドを仕込むことができます。
ただしfieldLabelなどの機能は利用できません。fieldLabelなどは親となるコンポーネントに依存しているためです。
ExtJSのフィールドにすることで、イベントリスナを設定することができるようになります。サンプルコードではblurイベントが発火されると、長さをチェックするような処理を記述しています。もちろんAjaxリクエストなども可能です。
invalid時のエラーメッセージも表示されなくなるので、サンプルコードではDomHelperを使ってエラーメッセージを表示するようにしています。

一見普通のフォームに見せておいて裏側でバリバリExtを使うといったことが可能になります。
サンプルコードではサブミットボタンもExtJSのボタンにしてしています。フィールドと同じようにrenderToで指定した要素にレンダリングしています。
formBindは使えませんが、妥当性のチェックとボタンを手動でしていして、disabledに設定することもできると思います。
datefield等を使うこともできるので、単発で使うこともできますが、ExtJSのライブラリのサイズが大きいのが少しマイナス要素です。ExtJS2.3ではextjs.comで必要なライブラリだけを選べるサービスがあったのですが、3.ｘではなくなっています。

ExtJS入門34 ComboBoxの基本

佐竹裕行 — Mon, 17 May 2010 04:13:00 +0000

今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスはHTMLフォームのセレクトボックスのような選択式のフォームを生成します。ExtJSのコンボボックスでは、項目のデータをストアから利用します。今回はグリッドの回で使ったサンプルのストアとデータを利用しています。

ComboBoxの基本

グリッド関連の記事

ExtJSで楽しくRIA業務アプリ開発のgridの記事一覧

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

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

JSON DATA:


{
    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名古屋勉強会　フォーム　コンボボックス

    
    
    
    

    
    
    
    


    
        

            Extのコンボボックス
        
        
        

        

        Java Script：form-combo.js

        JSON file：data.json

Java Script:


Ext.onReady(function()
{
    var data = [
        {
            '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'
        }
    ];

    var combo1 = new Ext.form.ComboBox({
        name:'combo1',
        fieldLabel:'ブラウザを選択(ローカルデータ)',
        store:new Ext.data.JsonStore({
            fields:['id','name'],
            data:data
        }),
        mode:'local',
        typeAhead:true, //入力文字から自動補完
        displayField:'name',
        valueField:'id',
        emptyText:'入力可能',
        hiddenName:'browser1'
    });

    var combo2 = new Ext.form.ComboBox({
        name:'combo2',
        fieldLabel:'ブラウザを選択(リモートデータ)',
        store:new Ext.data.JsonStore({
            fields:['id','name','img'],
            url:'data.json',
            total:'total',
            root:'rows',
            autoLoad:true
        }),
        mode:'remote',
        triggerAction:'all',
        editable:false, //自由入力不可
        displayField:'name',
        emptyText:'選択してください',
        valueField:'id',
        //hidenNameをつけないとgetValuesしたときの値はdisplayFieldの値になる
    });

    var combo3 = new Ext.form.ComboBox({
        name:'combo3',
        fieldLabel:'ブラウザを選択(テンプレート)',
        store:new Ext.data.JsonStore({
            fields:['id','name','img'],
            url:'data.json',
            total:'total',
            root:'rows',
            autoLoad:true
        }),
        mode:'remote',
        triggerAction:'all',
        editable:false, //自由入力不可
        displayField:'name',
        valueField:'id',
        hiddenName:'browser3',
        itemSelector:'div.browser-list',
        emptyText:'選択してください',
        tpl:new Ext.XTemplate(
            '',
                '',
                '
',
                '{name}',
                '',
            ''
        )
    });

    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,
        items:[
            combo1,combo2,combo3
        ],
        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
                    });
                }
            }
        ]
    });
});

実行結果:

ComboBoxの基本

上の2つが基本的なコンボボックスです。まずこの2つの解説です。
コンボボックスは基本的にテキストフィールドです。スーパークラスも以下のようになっています
Observable > Component > BoxComponent > Field > TextField > TriggerField > ComboBox
クリックできて、クリックすると選択項目がたちあがるTriggerFieldがコンボボックスです。同じような動きをするフィールドにDateFieldがあります。こちらはクリックするとDatePickerが立ち上がるTriggerFieldといえます。
選択項目はDataViewをして描写されます。すこしややこしくなってきましたが、Ext.form.ComboBoxクラスを使っているならば基本的に面倒なことはComboBoxクラスがやってくれます。基本的なコンフィグオプションを設定するだけでコンボボックスを作成できます。

コンボボックスで設定する基本的なコンフィグオプションは以下のようなものです。

name: フィールドの名前、getValuesしたときのプロパティ名になる
typeAhead: boolean 入力から項目を自動補完するかどうか
triggerAction: ▼をクリックしたときに送信するクエリを選択。’all’など
store: ストア
mode: ストアにデータ読み込む方法　local もしくは remote
displayField: コンボボックスの表示部分に設定するストアの項目
valueField: コンボボックスの値として設定するストアの項目
hiddenName コンボボックスの値として設定するストアの項目

typeAheadとtriggerActionで基本的な動作を制御します。typeAheadがtrueの場合、フィールドに入力を行うとそれに対応する項目が絞り込まれます。triggerActionでは▼をクリックしたときに読み込まれるデータを取得するためにサーバーに送信するクエリを選択します。’all’を指定します。全件を取得したくない場合はフィールドに入力されている項目を初期のクエリとしてサーバーに送信することができます。その場合は以下のように設定します。


 queryParam:'searchkeyword',
 triggerAction:'query',

queryParamに送信するプロパティ名、triggerActionを’query’に変更。これでコンボボックスの項目を取得する際にフィールドに入力されいる項目を送信します。ただしフィールドに入力がない場合は、サーバーへの取得を行わないので注意が必要です。

コンボボックスにもストアが必要です。今回は以前グリッドサンプルコードで使ったブラウザシェアのデータを使いたいと思います。そのためストアも以前のグリッドパネルとよく似ています。
一つ目が選択項目となるデータをJSファイルの中（ローカル）に持ってJsonStoreのdataに読み込んでいる形です。都度リクエストをかけることなく選択項目を表示します。2つ目はデータをリモートに持ちリクエストを投げてデータをストアに読み込みます。


new Ext.data.JsonStore({
	fields:['id','name','img'],
	url:'data.json',	//ローカルの場合はJSONデータを指定
	total:'total',
	root:'rows',
	autoLoad:true
})

modeの設定はストアの読み込み方法に応じて’local’と’remote’のどちらかを設定します。

displayFieldはストアのfieldsの中でコンボボックスの選択項目に表示される項目を指定します。今回はブラウザ名を表示させるためにnameを設定しました。
valueFieldはfieldsのなかで値として設定する項目を指定します。valueFieldで設定された値はhiddenNameに指定された名前でフォームの値としてgetValues()を事項したときに取得されます。
この辺りがコンボボックスの少しややこしいところです。nameは選択されている項目を表示するためのテキストフィールド名前です。nameの名前でフォームの値として設定されるのは表示されている文字列です。
表示は文字列で、実際に送信される値はidの数字がよい、といった場合は別途hiddenNameで設定する必要があります。今回のサンプルではcombo1、combo2の両方にvalueFieldが設定されています、しかしcombo1はhiddenNameが設定されていますが、combo2には設定されていません。この場合getValues()したときに取得されるのは

browser1:2 //ブラウザのID
combo2:Firefox //フィールドに表示されていた文字列

となります。フィールドに表示されている値ではないものを送信したい場合はcombo1のようにhiddenNameを設定するようにします。

以上が基本的なコンボボックスの設定です。

少しややこしい説明でしたが、まとめると

ストアを作る
ストアに応じてmodeを決める。
ストアに応じてdisplayFieldを決める。
もし表示している値でないものを送る場合はvalueFieldとhiddenNameを設定する。
基本的にtriggerAction:’all’
入力補完する場合はtypeAheadをtrueに

といった形です。

3つ目のコンボボックスはおまけえ、セレクトボックスの表示項目のデザインを変更しています。


var combo3 = new Ext.form.ComboBox({
		・・・
        itemSelector:'div.browser-list',
        tpl:new Ext.XTemplate(
            '',
                '',
                '
',
                '{name}',
                '',
            ''
        )
		・・・
    });

コンボボックスのtplのコンフィグオプションにXTemplateでテンプレートを設定します。DataViewのようにitemSelectorを設定してクリックするノードを指定します。サンプルコードではdiv.browser-listを指定しています。今回のテンプレートではブラウザの画像を表示するように設定しています。XTemplateとDataViewの知識があれば特に難しいことは無く、簡単にデザインを変更できます。

ExtJS入門33 Columnレイアウトのフォーム

佐竹裕行 — Fri, 14 May 2010 03:50:49 +0000

フォームのレイアウトについてフォームパネルのではデフォルトで’form’レイアウトが設定されています。’form’レイアウトでは、fieldLabelを表示するなどフォームフィールドを設置に最適なレイアウトを提供してくれます。しかし複雑なフォームの配置ができません。フォームパネルのレイアウトコンフィグを変更することでより自由なレイアウトでフィールドを配置する方法を紹介します。
今回はcolumnレイアウトの紹介です。

Columnレイアウトのフォーム

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

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

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

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

HTML:





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

    
    
    
    

    
    
    
    


    
        

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

        

        Java Script：form-layout.js

Java Script:


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

実行結果:

Columnレイアウトのフォーム

まずcolumnレイアウトの紹介です。カラムレイアウトでは列表示を指定できます。itemsに配置するコンポーネントにcolumnWidthで幅の占有率を指定します。（0～1.0）。
これでフィールドをカラムの表示にできます。しかしカラムレイアウトの直下のitemsにフィールドを置いた場合、fieldLabel等が生成されません。fieldLabelを表示するためにはformレイアウトの中にフィールドを設置する必要があります。
そこで、columnレイアウトの直下のコンポーネントはfieldsetに設定してfieldsetのレイアウトをformにすることで,formレイアウト内にフィールドを配置することで解消できます。サンプルコードではフォームパネルの直下にfieldsetを9個設置してそれぞれ1～2個のフィールドを置いています。
構造だけを抜き出すとこんな感じになります。


new Ext.form.FormPanel({
       ・・・
        layout:'column',
        defaults:{
            columnWidth:.5,
            xtype:'fieldset',
            defaults:{
			・・・
            }
        },
        items:[
            {
                xtype:'displayfield',
                columnWidth:.9
            },
            {
				//filedset1
            },
            {
				//filedset2
            },
            {
				//filedset3
            },
            {
				//filedset4
            },
            {
				//filedset5
            },
            {
				//filedset6
            },
            {
				//filedset7
            {
                title:'左のセット',
				//filedset8
            },
            {
                title:'右のセット',
				//filedset9
        ]
		・・・
});

それぞれのfieldset内に実際の入力フィールドがあります。そしてcolumnWidthもフィールドではなくfieldsetに記述している点に注意してください。

fieldsetのオプションはほとんど同じなので,defaultsで設定を記述しています。defaultsの中のdefaultsはfieldset内のフィールドの初期値の設定です。
defaultsとdefaultsの中のdefaultsでフォーム内大まかなコンフィグを決めておくとコードが見やすくなります。


	defaults:{
            columnWidth:.5,
            border:false,
            xtype:'fieldset',
            labelAlign:'top',
            defaults:{
                xtype:'textfield',
                emptyText:'入力してください',   //空のときのテキスト
                anchor:'90%',
                msgTarget:'under',   //入力に誤りがある場合はフィールドの下に表示
                allowBlank:false,
                columnWidth:.3
            }
        },

フィールドセットはフィールドをまとめるコンテナで、パネルのように動作してくれます。Ext.form.FieldSetクラスは
Observable > Component > BoxComponent > Container > Panel > FieldSet
というようにパネルを継承しています。そのためExt.Panelで使えるレイアウト関連のオプションが使えるわけです(collapsibleなど)。
フィールドセットのデフォルトのlayoutはformに設定されています。そのためフィールドに配置したフィールドはformレイアウトで表示されます。そのためlayoutを指定しない場合は縦に並べて表示されます。(テキストフィールド8、9、10、11の部分)
サンプルコードは少し複雑ですがフィールドセットのベーシックな使い方をしているのがテキストフィールド8、9、10、11の部分になります。


			//defaultsで大まかなオプションは決めてある
			{
                title:'左のセット',
                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'
                    }
                ]
            }

今回の場合は
FormPanel
→fieldset
→→field
→fieldset
→→field
・・・
という構造になっています。このフォームの場合、値の取得や初期値のセットを再帰的に行わないといけない感じがしますが、フィールドセットにラップされているフィールドはFormPanelのgetFrom()メソッドできちんと取得されます。フォームの値の取得やセットのときはラップされていることを特に意識することなく実行できます。すごく便利ですね。

今回はカラムレイアウトの紹介でした。次回は別のレイアウトを紹介しようと思います。

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入門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の方が簡単でしたね。

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

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

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

エディタブル･グリッド

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

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

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

HTML:





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

    
    
    
    

    
    
    


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

        
        

        Java Script：editorgrid-basic.js

Java Script:


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

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

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

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

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

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

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

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

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

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

実行結果:

エディタブル･グリッド

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

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


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

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

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


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

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

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

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

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

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

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

右クリックメニュー

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

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

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

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

PHP:


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

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

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

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

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

    die();

HTML:





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

    
    
    
    

    
    
    


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

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

        Java Script：grid-click.js


        PHP(JSONデータ)：data.php

Java Script:


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

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

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

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

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

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

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

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

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

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

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

実行結果:

右クリックメニュー

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

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

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


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

		showInfo(record);
	}
}

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

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

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

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

になります

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


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

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

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

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


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

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

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

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

[ExtJS事例紹介]ウェディングステージグレイセル

佐竹裕行 — Thu, 25 Feb 2010 06:51:14 +0000

今回は弊社で作成したExtJSを活用したサイトの紹介です。

Wedding Stage GRACEL（ウエディングステージグレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。

サイトはこちらになります。

Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ　グレイセル

株式会社sus4ニュースリリースグレイセル様Webサイトをリニューアルしました

管理画面
管理画面では、ニュースの投稿、ギャラリーへの写真の追加、お問い合わせの管理などを1画面にViewportアプリで構築しています。

管理画面のサンプル

各項目の管理パネルではグリッドを使用して一覧表示を行い、ソーティングやフィルタリングしてローカルアプリのような操作感でコンテンツの管理が行えるようになっています。
お客様にも基本的な操作は別途マニュアルを確認しなくても、直感的にわかって頂けたようです。
またサーバーとはJSONをやり取りするだけですので、レスポンスも早く動作も軽快です。UIをExt JSに置き換えたことで業務の効率が良くなったのを実感していただけることと思います。

Ext Coreの活用
今回のサイトリニューアルでは管理画面だけでなく、トップページなど公開されているページにも積極的にExtを使用しました。
ExtJSをフルで丸々読み込むとライブラリのJSファイルだけでかなりの容量になってしまいますが、Ext Coreの場合はライブラリだけなら25kb程度です。Ext CoreではDOM操作やアニメーションなどのための便利な機能が詰まっています。今回はトップページのアニメーション、ギャラリーのLightboxなどに使用しています。

トップページ　アニメーション

トップページ

トップページ上部に展開されるアニメーションにExt Coreのアニメーションを使用しています。アニメーション時のDOMの操作もExt行っています。
フェードイン・フェードアウトアニメーションもスムーズでなかなかです。

ギャラリー　lightbox

Ext Lightbox

ギャラリーページでは写真をクリックするとLigthboxで写真を開きます。
LightboxはPrototype + Scriptaculousが有名ですが、今回はExt Coreのlightboxプラグインを使っています。
見た目は本家のLightboxそっくりですが、中身はExtで動いています。

今回は管理画面だけでなく、公開ページにもExtを使ってリニューアルを図りました。管理画面の直感的な操作に対する反応はなかなかよいので、実際の業務のなかでUIの置き換えによる業務効率の実感していただければありがたいです。またExt Coreを使ったアニメーションの動作もなかなかよさそうなので、これからも積極的に使っていこうと思います。

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

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

ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する

ExtJS入門34 ComboBoxの基本

ExtJS入門33 Columnレイアウトのフォーム

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

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

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

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

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

[ExtJS事例紹介]ウェディングステージグレイセル

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

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

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

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

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