mojalog

何回かポストしたExtJSについてですが、イントロダクションのチュートリアルが日本語でありましたのでリンクしておきます。ワタシもこのチュートリアルを見ずにexampleのソースを読んでこんなもんかと使っていたのですが、非常に判りやすいチュートリアルでした！説明書ってなかなか読む気になれませんよね。直感で使わせてくれというのが正直なところですが、これは読んどきゃよかったです。

ExtJSの作法・DOMセレクタ・イベントハンドラ・ウィジェット・ajaxについて、チュートリアルに書かれているので時間が無い人用にこのエントリにまとめておきます。

＜ExtJSの作法＞

まず、作法としてExtJSを利用したコードはこんな風に書くといいらしいです。

Ext.onReady( function() {
    // ここにコードを書く
});

このメソッドは、DOMが完全に読みこまれた後に自動的に呼び出されるものです。 Ext.onReadyが呼び出された時、参照したいすべてのページ要素が利用できることが保証されています。

ということなので従います。

＜DOMセレクタ＞

javascriptで重要になってくるのが、ページのどのデータ要素(Element)を扱って処理するの？ということなのですが、普通はdocument.getElementById( 'hoge' )とかで取得します。ExtJSが用意しているのは、Ext.get()というメソッドで、

Ext.onReady( function() {
    var hogeElem = Ext.get( 'hoge' );
});

という風に使うみたいです。このメソッドは、簡潔に言うと速くて、汎用的で、拡張してあるって言うことみたいですね。なるほどー。また、ID以外、たとえば属性やCSSクラス名でノードを取り出したい場合はDomQueryというDOM セレクタ ライブラリを使ってみてはどうかと言っています。

＜イベントハンドラ＞

javascriptのイベントハンドラでパッと浮かぶのは、htmlタグに仕込まれたonclickイベントハンドラでメソッドを呼び出したりすることかと思います。sweet()メソッドは用意されているものとして以下のように書いたりします。

<input type="button" value="OK" onclick="sweet()">

ExtJSでのイベントの応答は以下のように書くみたいです。

Ext.onReady( function() {
    Ext.get( 'hoge' ).on( 'click', function(){
        alert( "hoge" );
    });
});

上記で述べたExt.get()でデータ要素hogeを特定して、(Element.)onメソッドの第１パラメータで挙動(イベント名)の決定、第２パラメータで実装となるようです。もちろん、第２パラメータの匿名関数（無名関数）をインスタンスとして与えることも出来ます。

Ext.onReady( function() {
    var alertFuncInst = function(){
        alert( "hoge" );
    }
    Ext.get( 'hoge' ).on( 'click', alertFuncInst );
});

チュートリアルではさらにもう少し突っ込んだ内容が書かれています。上記に書いたイベントハンドラとなる匿名関数は引数を持ちませんが、(Element.)onメソッドはこの定義したイベントハンドラにイベントオブジェクトExt.EventObjectを投げてくれるようです。

Ext.onReady( function() {
    var alertFuncInst = function( evt ){
        // アニメーションつきでぐいーっとx:256 y:256座標に移動する
        Ext.get( evt.target ).moveTo( 256, 256, true );
    }
    Ext.get( 'hoge' ).on( 'click', alertFuncInst );
});

よくよく考えてみたらそりゃ投げてくれなきゃ困るかなとも思いますが、上記のようにEventObjectが使えます。上記のソースはhtmlのid:hogeを持つ要素をクリックするとアニメーションつきでぐいーっとx:256 y:256座標に移動する例です。

＜ウィジェット＞

ExtJSで一番惹きつけられるのがウィジェットではないでしょうか。これを使いたくて、いじってみて、よくわかんなくてチュートリアルにたどり着くという人が多いのではないでしょうか。ワタシがそれです。チュートリアルでも扱っているgridについて書いてみたいと思います。

JavaScriptでは、オブジェクトリテラルは{}で囲まれた名前/値の属性のリストで使用した時に動的に生成されるオブジェクトで、属性は[名前]:[属性]の形で記述されます。

パッと見JSON形式？なのかなと思いましたが、オブジェクトリテラルと言うらしいです。まぁ詳しいことは判りません。(飽きてきた)要は、以下のように作って欲しいと言うことみたいです。

{
    title : 'hoge',
    width : 500
}

こんな形式で作られるように定義してみます。以下のような例になります。

    // インスタンスを定義する。
    var extObjInst = new Ext.***.*** ({
        title : 'hoge',
        width : 500
    });
    // 作ったインスタンスでいろんなメソッドコールする。
    extObjInst.***();

では実際のgridウィジェットを見てみます。の前にサンプルのgridがオブジェクトリテラルとしてどうやって作られているのか簡単に解説します。

1. データの実体：データそのものを連想配列で作ります。
2. データリーダ：作ったデータを行として解釈するために必要らしい。
3. gridウィジェットの実体：
   1. データストア：１．２．で用意したデータを保持するために必要らしい
   2. 列モデル：列のヘッダー部分になる。これも必要
   3. gridウィジェットのオプション：レンダリングの位置や、サイズ、タイトルなどの設定オプション

Ext.onReady( function() {
    // データの実体：データそのものを連想配列で作ります。
    var myData = [
        ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];

    // データリーダ：作ったデータを行として解釈するために必要らしい。
    var myReader = new Ext.data.ArrayReader({}, [
        {name: 'company'},
        {name: 'price', type: 'float'},
        {name: 'change', type: 'float'},
        {name: 'pctChange', type: 'float'},
        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]);
    
    // gridウィジェットの実体
    var grid = new Ext.grid.GridPanel({

        // データストア：１．２．で用意したデータを保持するために必要らしい
        store: new Ext.data.Store({
            data: myData,
            reader: myReader
        }),

        // 列モデル：列のヘッダー部分になる。これも必要
        columns: [
            {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
            {header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
            {header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 120, sortable: true, 
                renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

        // gridウィジェットのオプション
        viewConfig: {
            // ビューにカラムがスクロールバー無しで表現される
            forceFit: true
        },

        // レンダリングの位置
        renderTo: 'content',
        title: 'My First Grid',
        width: 500,
        frame: true
    });
});

＜ajax＞

サーバで持っているデータを非同期にどうやって引っ張るのかはワタシも知りたかったことなのですが、今までは普通にXMLHttpRequestを使っていました。なにやってんだろ。あはは
肝は、もらったデータのレンダリングの作法かな？と思います。ちょっとこの発想は無かったという感じなのですが、Ext.Elementクラスを利用してhttp越しにデータをもらうみたいです。要素本人が取り行くのかよ！？と思いましたが、裏でUpdaterなるクラスが動いているらしいです。

clickのハンドラは、 Updater と呼ばれるExtに組みこまれている特別なクラスを使っていまして、このクラスはAjaxリクエストを送ってて、レスポンスを受けてElementをさくっと更新しています。 Updaterは更新したい要素(この場合msg div)を通じてアクセスすることでダイレクトに使うことができます。 Element.loadが使用された時に、サーバーのレスポンスは自動的に要素のinnerHTMLを置き替えます。単にURLのサーバーベースのプロセスに渡すことで、クエリストリングのパラメータは処理されて要素のinnerHTMLの中にテキストとして表示されます。で、msg divが表示され(最初はhidden)ます。

とのこと。

Ext.onReady(function(){
    Ext.get( 'okButton' ).on( 'click', function(){
        var msg = Ext.get( 'msg' );
        msg.load( {
            url: 'ajax-example.php', // <-- change if necessary
            params: 'name=' + Ext.get( 'name' ).dom.value,
            text: 'Updating...'
        } );
        msg.show();
    });
});

ちなみにURLのパラメータを複数渡したい場合は、

params : {param1: 1, param2: 2}

と書いてあげて、ajax-example.php?param1=1&param2=2となるらしいです。試してません。
というわけで、レッツExtJS！

via : チュートリアルExt version 2.0
via : ExtJS2.0 API Doc
via :イベントハンドラ確認コード生成