mojalog labs ExtJS まとめ http://wiki.mojalog.com/extjs/ ExtJSのまとめページです mojalog(メインブログ) ja Copyright 2008 Thu, 11 Dec 2008 22:45:25 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss ExtJSでAIRやってみた ExtGridAir.png ExtJSのエントリはこちらにまとめてあります

ダウンロードページより、アーカイブ(Ext JS 2.2 SDK)をダウンロードして解凍してください。20081211時点のバージョンは ext-2.2 です。
今日は、ExtJSのAIRアプリケーションを解説してみたいと思います。
最近作ったやる夫AIRはHTML１本だけのコンテンツだったのでflexSDKのadtコマンドでパッケージを簡単に作れましたが、ExtJSはスクリプトもスタイルもイメージファイルもたくさんあるので、AIRパッケージを作るのに苦労しそうなので今回はaptanaを使っています。

基本的には、普通にHTMLとExtJSでアプリケーションを作っていって、AIR化するだけなのですが本家のサンプルを見るとHTMLは以下のようにほとんど書いていなかったのでこれを真似して作ってみます。

main.html

<html>
<head>
	<title>ExtGridAIR</title>
	<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />
	<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
	<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="lib/ext/ext-all.js"></script>
	<script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
	<script type="text/javascript" src="main.js"></script>
</head>
<body>
<span></span>
</body>
</html>
見るとスタイルシートにext-air.cssを追加して、さらにスクリプトにAIRAliases.jsとext-air.jsが使われています。main.jsは以下のとおりになります。
AIRアプリを作る場合は、Ext.air.NativeWindowを使ってウィンドウを構築するようです。さらにViewPortでレイアウトを組むというやり方です。たぶんmain.htmlのエレメントに直接gridやtreeなどをレンダリングしても大丈夫だと思います。が、non-application Sandboxのhtmlをiframeで組んであげる必要が出てきたりします。このsandboxの話は八角研究所のエントリに詳しく載っています

main.js

Ext.onReady( function(){
	(
		new Ext.air.NativeWindow({
			id: 'mainWindow',
			instance: window.nativeWindow,
			width : 316,
			height : 150
		})
	).show();

	new Ext.Viewport({
	    layout:'fit',
	    items: new Ext.grid.GridPanel({
	        store: new Ext.data.SimpleStore({
		        fields: [{ name: 'a' },{ name: 'b' }],
		        data:[[ 'hoge', 1 ],[ 'moge', 2 ],[ 'fuga', 3 ]]
		    }),
	        cm: new Ext.grid.ColumnModel([
		        { id : "gridid", header: "title", sortable: true, dataIndex: 'a' },
		        { header: "number", sortable: true, dataIndex: 'b' }
		    ]),
	        title:'simple-grid',
	        stripeRows:true,
	        view: new Ext.grid.GridView({
	            forceFit:true
	        })		
	    })
	});
});
こんなかんじでViewPortをつかってあげると、デスクトップアプリケーションぽく綺麗にまとまりますね。今回はgirdを１個だけ載せているのでExt.ViewPortのlayoutを'fit'で使っていますが、absolute, accordion, anchor, border, card, column, fit, form, tableなんかで組めるようです。詳しくはExt.ContainerのlayoutConfigを見てください。 
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
	<id>com.adobe.example.extGrid</id>
	<filename>extGrid</filename>
	<name>extGrid</name>
	<version>2.0</version>
	<description></description>
	<copyright></copyright>
	<initialWindow>
		<content>extGrid.html</content>
		<title/>
		<systemChrome>standard</systemChrome>
		<transparent>false</transparent>
		<visible>false</visible>
		<minimizable>true</minimizable>
		<maximizable>true</maximizable>
		<resizable>true</resizable>
	</initialWindow>
	<icon>
		<image16x16>icons/AIRApp_16.png</image16x16>
		<image32x32>icons/AIRApp_32.png</image32x32>
		<image48x48>icons/AIRApp_48.png</image48x48>
		<image128x128>icons/AIRApp_128.png</image128x128>
	</icon>
		<fileTypes>
	</fileTypes>
</application>

AIRパッケージ化

airadt.png export adobe air packageをクリックします。AdobeAirPackageExporterがあがるのでnextを押してウィザードに従います。

certificateが空の場合は、ConfigureCertificateという青地の箇所をクリックして証明書を作成します。証明書の作成は、以下のスクリーンショットのように証明書名とパスワード、パブリッシャを設定するだけで作られます。
作られた証明書のパスワードをポップアップ元のDigitalSigning画面で設定してnextを押すことでパッケージに含まれるコンテンツを選べます。

cert.png 選ぶコンテンツは、全部入れれば間違いはありませんが、かなり冗長なファイルも含まれます。ExtJSで利用しているスタイルや画像などを選んでfinishを押すとairパッケージが作成されます。airパッケージをインストールして試してみましょう！ ]]> http://wiki.mojalog.com/extjs/2008/12/extjsair.html http://wiki.mojalog.com/extjs/2008/12/extjsair.html ColumnModel GridPanel GridView NativeWindow SimpleStore air data grid Thu, 11 Dec 2008 22:45:25 +0900 Ext.DomQueryの基本的な使い方#1 domQuery.PNG ExtJSのDOMセレクタはExt.query()というメソッドで使えるようになっています。Ext.query()メソッドは2つのパラメータを持ち、第1パラメータに取得したい場所を書式に基づいた文字列で与えて、第2パラメータにエレメントのidを渡します。第2パラメータは省略可能ですのでこれを使わずとも、第1パラメータだけでかなり柔軟な取得ができます。また、Ext.query()メソッドはExt.DomQuery.select()のエイリアス(shorthand)ですので、どちらを使ってもいいようです。
動作サンプル

DomQueryで探索するサンプルHTML

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div id="fuga" class="piyo">
   ここはdiv#fuga.piyoです。
   <span class="fuga">
    ここはspan.fugaです。div#fuga.piyoの中に配置されています。
   </span>
   <a href="#" class="piyo">
    ここはa.piyoです。span.fugaと同じ高さで、その直後に配置されています
   </a>
  </div>
  <div id="piyo" class="fuga">
   ここはdiv#piyo.fugaです。
   <a href="#">
    ここはaです。div#piyo.fuga直下に配置されています。
   </a>
   <p>
    ここはpです。div#piyo.fugaの中に配置されています。
    <a href="#">
     ここはaです。div#piyo.fuga内ですがその直下にはありません。
    </a>
    <a href="#">
     ここはaです。div#piyo.fuga内ですがその直下にはありません。
    </a>
   </p>
   <span class="fuga">
    ここはspan.fugaです。div#piyo.fugaの中に配置されています。
   </span>
   <p class="piyo">
    ここはp.piyoです。span.fugaと同じ高さでその直後に配置されています
   </p>
  </div>
  <p class="piyo">
   ここはp.piyoです。div#piyo.fugaと同じ高さでその直後に配置されています
  </p>
</body>
</html>

Elementセレクタ

Element(要素)とは？を先に説明しておきますと 
<a href="#" >リンク</a>
このタグ開始～タグ終了セットをElementと呼んでいます。よくタグとエレメントがごっちゃになったりしますが、タグは開始タグも終了タグもタグですので、エレメントより分解された言い方ですね。『タグと要素（エレメント）の違いを説明して』がわかりやすいです。

で、ちょっと余談ですが、じゃあエレメントとノードの違いって何よ？って疑問があって、C#でパタパタ実装しているとXmlElementとXmlNodeなんてのを使うことになるんですが、XmlElementとXmlNodeというクラスの扱いだけで言うと、「りんご:XmlElement」と「フルーツ:XmlNode」くらいに覚えておけばいいみたいです。XmlNodeのほうが抽象化されてるってか一般化されてるって言うかそういう風に腹に落としました。ふーん。
で、javascriptのgetElementByIdだとエレメントが返るぞと言われてる気がするのですが、selectSingleNodeっていわれるとノードだと言われる。後者はXPathで指定するので手続きは違うとして、返って来たモノはなんだろね。呼び方の違い？まぁタイプセーフではないのでごちゃごちゃいわないことにします。（余談なげー）

ということでElementセレクタの説明です。 
    Ext.query( "span" ); // [ span.fuga, span.fuga ]
このクエリは[ span.fuga, span.fuga ]という２つの要素からなる配列を返します。全ドキュメントからspanエレメントに合致するものを拾ってきます。 
    Ext.query( "span", "fuga" ); // [ span.fuga ]
このクエリは[ span.fuga ]という1つの要素からなる配列を返します。サンプルHTMLにはspanエレメントが2つありますが、idが"fuga"からなるdiv内のspanを指定していますので、前者のほうが返ります。

次は書式付の第1パラメータで取得する方法です。

id指定:"#"

idを指定してエレメントを拾いたい場合は、"#"をプレフィックスとして与えてあげます。 
    Ext.query( "#piyo" ); // [ div#piyo.fuga ]
このクエリは、idが"piyo"でclassが"fuga"のdivが返ります。2つあるdivのうち後者のほうが返ります。

class指定:"."

classを指定してエレメントを拾いたい場合は、"."をプレフィックスとして与えてあげます。 
    Ext.query( ".piyo" ); // [ div#fuga.piyo, a.piyo, p.piyo, p.piyo ]
このクエリは、classが"piyo"のエレメントを返します。

全指定:"*"

全ての要素を拾いたい場合は"*"を指定することで拾えます。 
    Ext.query( "*" ); // [ html, head, meta, body, div#fuga.piyo, span.fuga, a.piyo, div#piyo.fuga, a, p, a, a, span.fuga, p.piyo, p.piyo ]

子エレメント指定:" "(スペース)

あるエレメント内で指定した全ての子エレメントを拾う場合は、" "（スペース）を間にはさんで与えてあげます。 
    Ext.query( "div p" ); // [ p, p.piyo ]
このクエリは親にdivエレメントを持つ p を返します。 
    Ext.query( "div span" ); // [ span.fuga, span.fuga ]
このクエリは親にdivエレメントを持つspanエレメントを返すので、２つのspanが返ります。

直下の子エレメント指定:">"または"/"

あるエレメント内の直下の子エレメントを指定して拾う場合は">"または"/"を間にはさんで与えてあげます。 
    Ext.query( "div/a" ); // [ a.piyo, a ]
div#fuga.piyo直下のa.piyoエレメントとdiv#piyo.fuga直下のaエレメントを返します。pエレメント内の２つのaエレメントは直下にないので返しません。

直後の同じ高さ(兄弟要素)のエレメント指定:"+"

あるエレメントと同じ高さにいるエレメントで、その直後にいるエレメントを拾う場合は"+"を間にはさんで与えてあげます。一応挙動も確認したのですが（あまり使いそうにないなーと思いながら）、ちょっと自信ないです。 
    Ext.query( ".fuga+.piyo" ); // [ a.piyo, p.piyo, p.piyo ]
ちょっとわかりにくいですが、class="fuga"のエレメントと同じ高さにいて、その直後でclass="piyo"のエレメントを返しています。

後方の同じ高さ（兄弟要素）のエレメント指定:"+"

あるエレメントと同じ高さにいるエレメントで、その後方にいるエレメントを拾う場合は"~"を間にはさんで与えてあげます。 
    Ext.query( "a~span" ); // [ span.fuga ]
これもちょっとわかりにくいですが、aと同じ高さにいるspan.fugaを拾っています。"+"と違い、拾ってきたspan.fugaはaの直後にいません。これも一応挙動も確認したのですが、かなり自信ないです。

ほかにもアトリビュートから指定してエレメントを取得したり出来るのですがまた次回に紹介します。

via : DomQueryのチュートリアル
via : APIDoc
]]> http://wiki.mojalog.com/extjs/2008/06/extdomquery1.html http://wiki.mojalog.com/extjs/2008/06/extdomquery1.html DomQuery query select Thu, 26 Jun 2008 19:25:34 +0900 Ext.grid.EditorGridPanelの使い方 editorgridsumple.PNG ExtJSのエントリはこちらにまとめてあります

ダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080623時点のバージョンは ext-2.1 です。
今日は、ExtJSのEditor Grid Exampleを解説してみたいと思います。
ワタシが作ってみたEditorGridは、上記リンクのサンプルのようにプルダウンやチェックボックスは装備しておりません。EditorGridそのものは非常にシンプルに作った代わりに、編集されたセルを検出するボタンを追加してみました。Gridをフォームとしてどこかへポストしたいといった時に、有効かもしれません。あと、いきなりEditorGridPanelとか言われても・・と言う方にはここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するEditorGridPanelのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。
動作サンプルとサンプルソース 
Ext.onReady( function(){
    var id = 0;
    var reader = new Ext.data.ArrayReader( { id: 0 }, [
          { name: 'str', mapping: 1 },
       { name: 'num', mapping: 2 }
    ]);
    var store = new Ext.data.Store({
        reader: reader,
        data:[ 
            [ id++, 'hoge', 1 ],
            [ id++, 'moge', 2 ],
            [ id++, 'fuga', 3 ]
        ]
    });
    
    var clmnModel = new Ext.grid.ColumnModel([
        { header: "Title", width: 200, sortable: true, dataIndex: 'str', editor: new Ext.form.TextField() },
        { header: "Number", width: 100, sortable: true, dataIndex: 'num', editor: new Ext.form.NumberField() }
    ]);

    var grid = new Ext.grid.EditorGridPanel({
        store:store,
        colModel:clmnModel,
        renderTo:'renderTarget',
        title:'simple-editorgrid',
        stripeRows:true,
        height:200,
        width:320,
        frame:true,
        clicksToEdit:1,
        tbar:[
        { text: 'touch', handler:function(){
            grid.getStore().each( function( targetObj ){
                var touchField = targetObj.getChanges();
                for( name in touchField ){
                    alert(
                        "index : [ " + targetObj.id + " ]\n" + 
                        "fieldName : [ " + name + " ]\n" +
                        "value : [ " + touchField[ name ] +" ]\n" 
                    );
                }
                targetObj.commit();
            });
        }}]
    });
});

【Ext.grid.EditorGridPanelの解説】

それではEditorGridPanelを見ていきたいと思います。普通のGridPanelの使い方はこちらを参照ください。

EditorGridPanel

    var grid = new Ext.grid.EditorGridPanel({
という箇所がエディターグリッドパネルそのものになります。GridPanelと違うところはコンフィグオプションの 
     clicksToEdit:1,
という個所と、カラムモデルにeditorというコンフィグオプションを適用しているところだけです。
clicksToEditのAPIDocをみると 
The number of clicks on a cell required to display the cell's editor (defaults to 2)
とありまして、セルが編集可能になるクリック数みたいなことが書いてありますが、なんかあんまり関係ないような気がします。（値がいくつでもダブルクリックで編集可能になった）このコンフィグオプションがなくても編集可能になりました。
で、実際に編集可能にするためにはカラムモデルにeditorという設定をしなければならないようです。 
    var clmnModel = new Ext.grid.ColumnModel([{ 
        header: "title", 
        width: 200, 
        dataIndex: 'str', 
        editor: new Ext.form.TextField()  // <-コレ
    },
ここのeditorにformパッケージのクラスでnewしてあげると、編集時にそのクラスで動くようになります。例えばComboBoxでnewしてあげるとプルダウンできるようになります。（適宜ComboBoxのコンフィグは必要になります）
これでEditorGridPanelが完成しました。

編集セルの特定

冒頭で記述しましたようにEditorGridの編集個所が特定できないと、どこかのページに値をポストしようにも出来ませんので、この解説をしたいと思います。ポストの前にとりあえず、gridのデータをどこかに渡すためには、
  1. どのレコードの、
  2. どのフィールドで
  3. どんな値に
変更されたのか？という情報は必要になってきます。今回はその情報を取り出すだけで、データをポストするところまで組んでいません。 
tbar:[
{ text: 'touch', handler:function(){
    grid.getStore().each( function( targetObj ){
        var touchField = targetObj.getChanges();
        for( name in touchField ){
            alert(
                "index : [ " + targetObj.id + " ]\n" + 
                "fieldName : [ " + name + " ]\n" +
                "value : [ " + touchField[ name ] +" ]\n" 
            );
        }
        targetObj.commit();
    });
}}]
というわけで、実装の解説を進めていきますが、tbarというコンフィグオプションは前回のTreePanelのときに解説しましたツールバーです。今回はツールバーにtouchというボタンを与えてあげて、そこにハンドラとして編集セルを見るメソッドを用意しました。
まず、gridが用意しているgetStore()メソッドを呼び出して、データストアを取得します。次に返ってきたstoreで持っているeachメソッドを使って、レコード単位に全てのオブジェクトを拾いあげます。
grid.getStore().each( function( targetObj ){
パラメータのtargetObjはExt.data.Recordのオブジェクトが入ってきますので、このオブジェクトに変更があったかどうかを聞きます。 
var touchField = targetObj.getChanges();
getChanges()メソッドはAPIDocに以下のような説明がありました。 
Gets a hash of only the fields that have been modified since this Record was created or commited.
「レコードが作られたか、あるいは、コミットされた後に編集されたフィールドをハッシュ（オブジェクト）で返すよー」と言っているみたいです。なるほど。便利。編集されてなければ返されたオブジェクトはプロパティを持たないようです。ですので、for～inで調べてみました。これで、編集されたフィールドと値を取得することが出来ます。
ちなみに、targetObjの実態はExt.data.Recordですので、idを持っていて自分がどのレコードかを知っているのですが、今回の実装はストアを作るときに明示的にidを振っています。 
    var id = 0;
    var reader = new Ext.data.ArrayReader( { id: 0 }, [
          { name: 'str', mapping: 1 },
       { name: 'num', mapping: 2 }
    ]);
    var store = new Ext.data.Store({
        reader: reader,
        data:[ 
            [ id++, 'hoge', 1 ],
            [ id++, 'moge', 2 ],
            [ id++, 'fuga', 3 ]
        ]
    });
前回作ったGridはSimpleStoreを使って簡単にデータストアを構築しましたが、今回はレコードのidも見たかったのでちょっと構築方法が違います。
ArrayReaderのコンストラクタの第1パラメータで、「レコードのidは扱うデータ（配列）の0番目ですよ」と明示的に指定しています。さらに第2引数でレコードのnameと扱うデータ（配列）の何番目かをmappingで指定しています。マッピングをずらすと、grid内にidを表示することも出来ます。idの生成やその一意性は実装依存ですが、自ら生成しなくとも勝手に割り当てられるようです。ただ、一意に割り当ててあげないとバインド出来ませんね。
これでソートしてレコードの位置が変わってもidでバインドできるようになりました。ちなみにレコードが上から何番目か？ってのを知りたい場合は、 
grid.getStore().indexOf( targetObj )
というstoreのindexOfでそのレコードが上から何番目に位置するのか聞けます。
で、最後にtargetObj.commit();で編集をコミットしてあげています。

というわけで、EditorGridPanelの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。 ]]> http://wiki.mojalog.com/extjs/2008/06/extgrideditorgridpanel.html http://wiki.mojalog.com/extjs/2008/06/extgrideditorgridpanel.html ArrayReader ColumnModel EditorGridPanel Store Toolbar data grid commit each getChanges getStore Mon, 23 Jun 2008 19:35:14 +0900 Ext.tree.TreePanelの使い方 simple-tree.PNG ダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080522時点のバージョンは ext-2.1 です。解凍したら、以下のパスのファイルを開いて見ましょう。 
【パス】
ext-2.1\examples\tree\reorder.html
開いてみると、ツリーのルートノードが表示されているだけでクリックしても以下のノードが見えませんね。これはサーバサイトスクリプトを参照しに行っていて、その参照先がローカルのget-nodes.phpにあるためです。ですので直接ExtJSのTreePanelサンプルを見てみます。
このウィジェットがTreePanelと呼ばれるものです。サンプルでは（ローカルパスで言う）ext-2.1\source以下のディレクトリ構造がツリーパネルで表現されていて、ディレクトリをクリックすると以下のノード一覧をロードしてずらっと表示する仕組みになっています。今日はこのTreePanelの基本的な実装を解説してみたいと思いますが、サーバサイドスクリプト抜きで静的なツリー構造をサンプルとして使いたいと思います。あと、いきなりTreePanelとか言われても・・と言う方にはここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するTreePanelのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。
動作サンプルとサンプルソース 
Ext.onReady( function(){
    var idx = 0;
    var root  = createNode( idx++, "root", false, false ); // branch unDraggable
    var node1 = createNode( idx++, "hoge", true, true );   // leaf draggable
    var node2 = createNode( idx++, "moge", false, true );  // branch draggable
    var node3 = createNode( idx++, "piyo", true, false );  // leaf unDraggable

    root.appendChild( node1 );
    root.appendChild( node2 );
    node2.appendChild( node3 );

    var tree = new Ext.tree.TreePanel({
        title:'SimpleTree',
        width:300,
        useArrows:true,
        enableDD:true,
        root:root,
        renderTo:'renderTarget',
        tbar:[ 
            { text: 'OpenAll', handler:function(){ tree.expandAll(); } },'-',
            { text: 'CloseAll', handler:function(){ tree.collapseAll(); } },'-',
            { text: 'AddNode-Recursive', handler:function(){ 
                function recursiveNode( pNode ){
                    alert( 'this->' + this.toString() + 
                           '\ndepth:' + pNode.getDepth() + 
                           '\ntext:' + pNode.text + 
                           '\nid:' + pNode.id );
                    pNode.eachChild( recursiveNode );
                    if( !pNode.isLeaf() ){
                        var setIdx = idx++;
                        pNode.appendChild( createNode( setIdx, 'add-' + setIdx, false, true ) );
                    }
                };
                root.eachChild( recursiveNode );
                tree.expandAll();
            }}
        ]
    });
    root.expand();
//    node2はデフォルトクローズの状態
//    node2.expand();
    function createNode( id, text, isLeaf, isDrag ){
        return new Ext.tree.TreeNode({
            draggable:isDrag,
            id:id,
            text:text,
            leaf:isLeaf
        });
    }
});

【Ext.tree.TreePanelの解説】

それではTreePanelを見ていきたいと思います。 
    var tree = new Ext.tree.TreePanel({
という箇所がツリーパネルそのものになります。ツリーを表現する以上、ノードとなるデータがひとつ以上必要になってきて、そのデータコンテンツはTreeNodeというクラスインスタンスを使うことになります。GridPanelやDataViewで使ったデータストアとは違ってくるようです。
ドキュメントには、以下のようにTreePanelがレンダリングされる前までに、コンフィグオプションのrootに有効なノードが入っていてくれとあります。コンフィグオプションのrootに直接突っ込んでもいいし、rootに対するセッターであるsetRootNode()メソッドでもよいとのことです。
A TreePanel must have a root node before it is rendered. This may either be specified using the root config option, or using the setRootNode method.
それではツリーパネルのコンフィグオプションを見てみます。
といっても、先述のとおり重要なコンフィグオプションはrootだけです。ここには次に述べるrootというTreeNodeのインスタンスを設定してあげてきます。
enableDD:true,は、ノードのドラッグアンドドロップが出来るかどうかです。TreeNodeインスタンスを作成するときにノード１つ１つに対してドラッグアンドドロップの設定が出来るのですが、TreePanelでfalseにすると全てのノードに対してドラッグアンドドロップが無効になります。
useArrows:true,は、表示系のコンフィグオプションで、これがfalseだとwindowsVista以前のエクスプローラのような[+]とか[-]のドリル表示になります。trueだとアロー型のドリル表示になります。
    var tree = new Ext.tree.TreePanel({
        title:'SimpleTree',
        width:300,
        useArrows:true,
        enableDD:true,
        root:root,
        renderTo:'renderTarget',
続いてtbarというコンフィグオプションを設定していますが、この部分は最後に記述したいと思います。

【TreeNodeの解説】

次は、実際のデータであるTreeNodeの部分を見ていきます。 
    function createNode( id, text, isLeaf, isDrag ){
        return new Ext.tree.TreeNode({
            draggable:isDrag,
            id:id,
            text:text,
            leaf:isLeaf
        });
    }
メソッドcreateNodeはワタシが勝手に作ったメソッドです。このメソッドはパラメータに従ってTreeNodeをnewして返すだけのものですので特に細かい解説はいらないかと思います。

ではTreeNodeのコンフィグオプションを見ていきます。まず、draggable:isDrag,はそのノードがドラッグアンドドロップできるかどうかを表していて、今回はパラメータに依存するつくりになっていて、trueでそのノードがドラッグアンドドロップできるようになり、falseで出来なくなります。
続いてidはそのツリー構造内のidを表すものです。明示的に設定しなくても勝手に振ってくれるようですが、ツリー構造内で一意にノードを特定したりすることがあるかと思いますので実装者が設定してあげたほうがいいと思います。ちなみに一意でなくとも動くには動くようです。
textは、そのままそのノードのテキスト表示部分です。このテキスト部分にはhrefというコンフィグオプションを加えることによってアンカーリンクを貼ることが出来ます。さらにhrefTargetでターゲットフレームの指定も出来ます。
最後のleafは、そのノードがリーフ（末端）であるかどうかです。leaf:trueですと、そのノード以下に子ノードを与えることが出来ません。leaf:falseだとブランチ（枝）を表していて子ノードを追加することが出来ます。

【Toolbarの解説】

最後にTreePanelの残りのコンフィグオプション、tbarについて解説したいと思います。tbarというコンフィグオプションはExt.Panelクラスを継承しているクラスであれば使えるコンフィグオプションです。～Panelという以下のパネル一覧であれば使えます。また、tbarはパネル上部にレンダリングされ、bbarはパネルの下部にレンダリングされます。

＜パネル一覧＞ 
EditorGridPanel Ext.grid.EditorGridPanel
FormPanel Ext.form.FormPanel
GridPanel Ext.grid.GridPanel
Panel Ext.Panel
TabPanel Ext.TabPanel
TreePanel Ext.tree.TreePanel
このtbarやbbarの実体はExt.Toolbarなのですが、このコンストラクタが以下のように追加したいボタンオブジェクトのコンフィグを配列としてパラメータに与えることが出来るので非常に分かりやすいです。 
tbar:[ 
    { text: 'OpenAll', handler:function(){ tree.expandAll(); } },'-',
    { text: 'CloseAll', handler:function(){ tree.collapseAll(); } },'-',
    { text: 'AddNode-Recursive', handler:function(){ 
        function recursiveNode( pNode ){
            alert( 'depth:' + pNode.getDepth() + '\ntext:' + pNode.text + '\nid:' + pNode.id );
            pNode.eachChild( recursiveNode );
            if( !pNode.isLeaf() ){
                var setIdx = idx++;
                pNode.appendChild( createNode( setIdx, 'add-' + setIdx, false, true ) );
            }
        };
        root.eachChild( recursiveNode );
        tree.expandAll();
    }}
]
もうちょっと詳しく説明すると、上記のようにオブジェクトを配列で渡した場合、その１つ１つはExt.Toolbar.Buttonオブジェクトを表しています。→APIドキュメント
Ext.Toolbar.Buttonのコンフィグオプションには、上記のようにtextとhandlerをあたえれば、その表示と挙動を実装することが出来ます。コンフィグオプションにxtypeと言うものがあるのですが、これを与えないで置くと、デフォルトでtbbuttonでレンダリングされ、xtype:'tbsplit'とするとボタンの横に▼が表示されてメニュードロップの表示が出来るようになります。また、ボタンとボタンの間にセパレータ（｜←こんなの）を表示させたい場合は、配列の要素として文字列の'-'を与えます。以下にToolbarコンポーネントのxtype一覧を記します

＜Toolbar components：xtype一覧＞ 
Toolbar components
---------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem
実装の解説に戻りますが、handlerの内容は、上からノードヒエラルキーの全体オープンとクローズです。tree.expandAll() / tree.collapseAll()を使っています。
最後のAddNode-Recursiveと言うボタンは、ハンドラにちょこちょこ実装が入っていますが、内容はルートノードから全てのノードをアラートして、そのノードがブランチである場合、直下に１つブランチを追加していく実装となっています。 
    { text: 'AddNode-Recursive', handler:function(){ 
        function recursiveNode( pNode ){ /* ... */ };
        root.eachChild( recursiveNode );
        tree.expandAll();
    }}
途中にrecursiveNodeというメソッドの定義がハンドラの中に入ってきていますのでちょっと分かりにくいですが、recursiveNodeを省いて見ると、このハンドラは
・ルートノードが持つ子ノード毎にrecursiveNodeと言うメソッドを呼んで
・最後にツリーを開くと言う処理だけです。
その"ノード毎に..."というところでeachChildメソッドが出てきましたので最後にTreeNodeに戻って解説します。
eachChild( Function fn, [Object scope], [Array args] ) : void
このメソッドはTreeNodeのメソッドなのですが、ノードが持つ子ノード分イテレートしてFunction fnを呼び出すというものです。第２引数のスコープは実際に与えるか、与えないとイテレート中のカレントのノードがFunction fnに与えられるみたいです。第３引数の"引数"も同様です。
ですので、function recursiveNode( pNode )の引数pNodeにはイテレート中のカレントノードが与えられてきます。そこから引数のpNodeで、さらにeachChildを呼び出して再帰します。再帰した後、ノードがブランチであれば、さらにブランチを追加すると言う仕組みになっています。

【余談】

１．マウスでノードをぐりぐりとドラッグアンドドロップしてみると、ちゃんとDepthが変わってくれます。ツリー構造とデータをそのまま維持しながらどこかにポストしたいとかがあれば、（jsonやXMLに変換する必要があるかもしれませんが）それも可能のようです。

２．今回はノードデータを自前で実装しましたが、Tree.TreeLoaderというデータのローダがあります。とても便利です。


というわけで、TreePanelの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。 ]]> http://wiki.mojalog.com/extjs/2008/05/exttreetreepanel.html http://wiki.mojalog.com/extjs/2008/05/exttreetreepanel.html Toolbar TreeNode TreePanel tree Panel eachChild setRootNode xtype Thu, 22 May 2008 19:51:04 +0900 ExtJSをfirebugでデバッグする便利な方法
firebugonextjs01.PNG
firebugonextjs02.PNG
firebugonextjs03.PNG
firebugonextjs04.PNG
firebugonextjs05.PNG
firebugonextjs06.PNG
firebugonextjs07.PNG
firebugonextjs08.PNG
firebugonextjs09.PNG
firebugonextjs10.PNG
firebugonextjs11.PNG
これまでにExtJSの使い方を何度かポストしていて、日本語のチュートリアルがあることもポストしましたが、チュートリアルのほとんどは英語で書かれています。ので、しっかりと読むには腰をすえなければならず、ちょこちょことtipsなんかを斜め読みしていたのですが、このページにExtJSの作りこみやデバッグを飛躍的に向上させる方法が載っていました。

javascriptのデバッグというとFireFoxプラグインのfirebugを思い浮かべます。そのとおり上記チュートリアルもfirebugを使ったデバッグです。もちろんこのブログで紹介しているExtJS関連のポストもfirebugを使ってデバッグしてはいますが、あまり使い込んでおらず適宜ブレークポイントを置いて変数なんかをウォッチする程度のものでした。知らなかったのはコンソールにスクリプトを直接書いて実行させることが出来るってことです。え・・・それって常識・・・とかドン引きされることかと思いますが、コンソールにスクリプトを直接書いて実行出来るらしいですよ！（同じことを２度言ってみました）（恥ずかしい子！）

恥ずかしい子はどうでもよいのですが、上記ページのチュートリアルを引用してキャプチャをいくつか追加しながらポストしたいと思います。
ココまで読んでいる方なら以下の資材はお持ちかと思いますが一応リンクしておきます。 firefoxをインストールしてfirebugを入れたらfirefoxでExt2.1-API Dcumentationを開きます。なぜこのページを開くのかと言いますと理由は単純でExtJSが全てロードされているためです。
開きましたら図のようにfirebugを立ち上げます。
ツール＞Firebug＞Open Firebugで開きます。
次にEnable FirebugをクリックしてこのExt2.1-API Dcumentationページをデバッグできる状態にします。
さらにConsoleタブをクリックして、コンソールを開きます。右ペインの複数行入力できるコンソールが開いていなければ右下のアイコンをクリックしてペインを開きます。
開いたらこのコンソールに以下のコードを入力し、RunをクリックするかCTRL+ENTERを押下します。 
Ext.get(document.body).update('<div id="test"></div>');
このコードはページのdocument.bodyを取得し、そのinnerHTMLをdiv id="test"で更新すると言うものです。HTMLタブをクリックしてbodyノードを開くとinnerHTMLが<div id="test"></div>になっていることが確認できます。同時に画面からコンテンツが消えます。コンテンツは消えますが、ExtJSのライブラリはロードされたままですので、コイツを利用してスクリプトのテストが行えるんです。

ためしに、 
new Ext.Panel({
    renderTo: 'test',
    width: '200px',
    title: 'My Title',
    html: 'My HTML content'
});
をコンソールにコピペ（追記）してCTRL+ENTERを押下します。すると、Ext.Panelが表示されます！ 
    renderTo: 'test',
というコンフィグオプションでdiv id="test"をレンダリング先としていますので、１行目は消さないでください。続けて、html: 'My HTML content'というコンフィグオプションの直後に 
    ,collapsible : Boolean
を挿入してみます。地味ですが、パネルのタイトルバー右に[▲]アイコンが表示され、パネルのボディが開いたり閉じたり出来るようになりました！ということはAPI DocumentationにあるExtクラスのメソッドや、コンフィグなどがリアルタイムにどんなものなのか確認できるようになったということですね。うわーすげー便利だ。

では次にrenderTo: 'test',と言う箇所を// でコメントアウトします。 
    //renderTo: 'test',
画面からパネルが消えますので,collapsible : Booleanの直後に以下のコードを挿入します。 
    ,x: 100
    ,y: 100
    ,renderTo: Ext.getBody()
    ,floating: true
    ,frame: true
    ,height: 200
    ,draggable: {
        insertProxy: false,
        onDrag : function(e){
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);
            var s = this.panel.getEl().shadow;
            if (s) {
               s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
        },
        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);
        }
    }
すると、パネルがドラッグ＆ドロップできるようになりました！
というわけで、日本語チュートリアルと全然変わりありませんが知ってるのと知らないのでは大違いなのでポストしてみました。何が一番びっくりしたのかと言いますと、このコンソールの使い方がgetfirebug.comにデカデカと載っていたことです。あーびっくりした。（しらじらしい） ]]> http://wiki.mojalog.com/extjs/2008/05/extjsfirebug.html http://wiki.mojalog.com/extjs/2008/05/extjsfirebug.html デバッグ Thu, 15 May 2008 21:06:17 +0900 Ext.DataViewの使い方 simpledataview.PNG ダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080513時点のバージョンは ext-2.1 です。解凍したら、以下のパスのファイルを開いて見ましょう。 
【パス】
ext-2.1\examples\view\data-view.html
開いてみると、何も見えませんね。これはサーバサイトスクリプトを参照しに行っていてその参照先がローカルのget-images.phpにあるためです。ですので直接ExtJSのDataViewサンプルを見てみます。
このウィジェットがDataViewと呼ばれるものです。サンプルではサムネイル画像がならんでいて、マウスをドラッグするか、CTRLまたはSHIFTキーを押しながら選択すると複数のアイテムが選択できるようになっています。今日はこのDataViewの基本的な実装を解説してみたいと思います。あと、いきなりDataViewとか言われても・・と言う方にはここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するDataViewのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。
動作サンプルとサンプルソース 
Ext.onReady( function(){
    var lookup = {};

    var siteData = [
        ['http://mojalog.com','http://capture.heartrails.com/small?http://mojalog.com','mojalog'],
        ['http://google.co.jp','http://capture.heartrails.com/small?http://google.co.jp','google'],
        ['http://yahoo.co.jp','http://capture.heartrails.com/small?http://yahoo.co.jp','yahoo'],
        ['http://extjs.com','http://capture.heartrails.com/small?http://extjs.com','extjs'],
        ['http://capture.heartrails.com','http://capture.heartrails.com/small?http://capture.heartrails.com','heartrails' ],
        ['http://youtube.com','http://capture.heartrails.com/small?http://youtube.com','youtube' ]
    ];

    var store = new Ext.data.SimpleStore({
        fields: [
           { name: 'siteurl'},
           { name: 'imgurl' },
           { name: 'name'   }
        ],
        data : siteData
    });

    var formatData = function(data){
        lookup[data.name] = data;
        return data;
    };

    var view = new Ext.DataView({
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{imgurl}" title="{name}"></div>',
                '<span>{name}</span>',
                '</div>',
            '</tpl>'
        ),
        singleSelect: true,
        overClass:'x-view-over',
        itemSelector: 'div.thumb-wrap',
        store: store,
        listeners: {
            'dblclick':{
                fn:function(){
                    var selNode = view.getSelectedNodes()[0];
                    var data = lookup[selNode.id];
                    location.href=data.siteurl;
                }
            }
        },
        prepareData: formatData.createDelegate( this )
    });

    var panel = new Ext.Panel({
        id: 'img-chooser-view',
        title: 'DataView',
        renderTo: 'container',
        width:320,
        autoScroll: true,
        items:view,
        collapsible:true
    });
});

【Ext.DataViewの解説】

それではDataViewを見ていきたいと思います。 
    var view = new Ext.DataView({
という箇所がデータビューそのものになります。前回のgridと同様にstoreというデータストアを保持していてこのstoreの内容がデータの実体になります。
DataViewのコンフィグオプションで必須となるのはitemSelectorと言うもののようです。 
itemSelector : String
This is a required setting. A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes this DataView will be working with.
とあり、これはDataViewがどのノードで動いているかを決定するために使われる、CSSセレクタというものらしいです。今回は値に'div.thumb-wrap'を持たせてあります。このノードを「データビューのデータとして扱います」ということになるんだと思います。
ちなみにdiv.thumb-wrapは、次のtplというコンフィグオプションで定義します。

tplは、以下のように定義してあります。

        tpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{imgurl}" title="{name}"></div>',
                '<span>{name}</span>',
                '</div>',
            '</tpl>'
        ),
このtplはExt.XTemplateを使ってテンプレートとして用いているのですが、このXTemplateが非常に強力で、tplノードのアトリビュートを使って演算を行い、実データをオートフィリングしてくれます。上記ではforという演算式を用いて、store内の複数データをスコープ内のタグに埋めていくようになっていますが、if演算式や内臓テンプレート変数、インラインコードの実行なんかも出来るようです。使いこなせればデータのデータのフィルタなんかも出来そうですね。XTemplateのAPIDocを貼っておきます。
上記は、{}で括られた name / imgurl をforで展開しています。このnameとimgurlはstoreのfieldsで定義した名前です。
DataViewの基本的なコンフィグオプションはこのくらいで、後はオプションみたいなものです。

overClassはマウスオーバー時のclassを値として持たせています。singleSelectはアイテムを複数選択状態に出来ないようにするものです。これに対してmultiSelectと言うものがあり、このコンフィグオプションを使用してtrueにしておくと、CTRLやSHIFTを押しながら複数選択することが出来ます。 
    overClass:'x-view-over',
    singleSelect: true,
'x-view-over'はスタイルシート内に定義していて、マウスオーバーしたときに表示が変わると言うものです。無くてもいいと思います。

最後にlistenersとprepareDataを解説します。 
    listeners: {
        'dblclick':{
            fn:function(){
                var selNode = view.getSelectedNodes()[0];
                var data = lookup[selNode.id];
                location.href=data.siteurl;
            }
        }
    },
    prepareData: formatData.createDelegate( this )
listenersはイベントリスナーのことです。今回はダブルクリックした際のイベントを拾って画面遷移を行っています。DataViewのgetSelectedNodes()で選択されたノードを返しますので、その先頭を拾ってstoreに格納したデータのsiteurlを解決しています。
prepareDataはメソッドなのですが、ロード時にキックされてデータの準備を行うもののようです。今回はformatDataメソッドにその処理を委譲していてlookupオブジェクトに、各データを突っ込んでいっています。lookupオブジェクトは、選択されたデータを探すために利用しています。
    var selNode = view.getSelectedNodes()[0];
    var data = lookup[selNode.id];
この２行はまず、DataViewで選択されたノードを取り出します。次に、selNode.idをlookupの連想配列のkeyとして指定して、該当のデータを特定します。これで、data.siteurlとか、data.nameとか、data.imgurlで参照が出来るようになっています。
selNode.idのidは前述のテンプレート定義の中の 
    '<div class="thumb-wrap" id="{name}">',
にあるように、ノードのidを指しているのですが、この値はstoreのfieldsの{name}が置かれています。
ロード時に、prepareDataで委譲したformatDataメソッドが呼ばれてlookupオブジェクトのkeyであるdata.nameに対してdataがドカドカと格納されていきます。 
    var formatData = function(data){
        lookup[data.name] = data;
        return data;
    };
これでlookupのkeyはnameで解決できると言うことです。（firebugで分かりました。）

というわけで、DataViewの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。 ]]> http://wiki.mojalog.com/extjs/2008/05/extdataview.html http://wiki.mojalog.com/extjs/2008/05/extdataview.html DataView SimpleStore data prepareData Tue, 13 May 2008 21:03:32 +0900 Ext.grid.GridPanelの使い方 まず、ExtJS javascriptライブラリをダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080428時点のバージョンは ext-2.1 です。解凍したら、以下のパスのファイルを開いて見ましょう。gridのサンプルはココからも見れます。 
【パス】
ext-2.1\examples\grid\array-grid.html
このウィジェットがgridと呼ばれるものです。エクセルのような罫線で表現されたウィジェットで、
  • ソート
  • 各セルの編集
  • グルーピング
  • サマリ
  • フィルタ
simplegrid.PNG なんかも出来ます。すごいですね。今日はこのgridの基本的な実装を解説してみたいと思います。あと、いきなりgirdとか言われても・・と言う方にはここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するgridのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。

動作サンプルとサンプルソース 
Ext.onReady( function(){
    var store = new Ext.data.SimpleStore({
        fields: [
            { name: 'a' },
            { name: 'b' }
        ],
        data:[ 
            [ 'hoge', 1 ],
            [ 'moge', 2 ],
            [ 'fuga', 3 ] 
        ]
    });

    var clmnModel = new Ext.grid.ColumnModel([
        { header: "title", width: 200, dataIndex: 'a' },
        { header: "number", width: 100, sortable: true, dataIndex: 'b' }
    ]);
 
    var grid = new Ext.grid.GridPanel({
        store:store,
        colModel:clmnModel,
        renderTo:'renderTarget',
        title:'simple-grid',
        stripeRows:true,
        height:150,
        width:316,
        frame:true
    });
});

【Ext.grid.GridPanelの解説】

それではgirdを見ていきたいと思います。 
    var grid = new Ext.grid.GridPanel({
という箇所がグリッドそのものになります。この定義の仕方は、これからたくさん出てくるので先に解説してしまいます。
Ext.grid.GridPanel({});の{}定義体はオブジェクトリテラルと呼ばれるもので、ExtJSではこの書式で実装していくことがほとんどです。使ってみればそんなに難しいものでは無く、
オブジェクトリテラルとは
  • 中カッコ{}で囲まれて、
  • カンマ,を使ってプロパティが区切られて定義されるもの
だと理解すればいいのではないかと思います。多分乱暴に色々切り捨てた言い方をしたのかもしれませんが、ワタシはそう理解しています。
そしてこのオブジェクトリテラルのプロパティ１つ１つを、ExtJSではコンフィグオプションと呼んでいます。 
Ext.grid.GridPanel({ /* コンフィグオプション群 */ })
このコンフィグオプションによって、いろんな表示設定や、機能設定が出来るようになっています。
サンプルソースのgridのコンフィグオプションを上から見ていくと、
store / colModel / renderTo / title / stripeRows / height / width / frame とありまして、このほかにも様々なコンフィグオプションがありますが、GridPanelで必須とされるのは store と colModel になります。ただ、renderToで表示先を指定してあげないと、このサンプルソースではgridが表示されませんので、このstore / colModel / renderTo以外をコメントアウトしたりしてどんなコンフィグなのか試してみるといいかもしれません。

それではこのコンフィグを解説していきたいと思います。
storeは、APIDocumentに 
store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
とあり、storeはデータソースであることがわかります。データの実体ですね。その型はExt.data.Storeを使っているよーと言うことです。

colModelは、 
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
とあり、girdの列定義をあらわしています。
ちなみにcolModelは、cmというコンフィグオプション名でもよくて、cmは、colModelを表すshorthand（ショートハンド（エイリアス？））だとAPIDocにあります。どちらでもいいですが、colModel / cm は必須コンフィグです。

renderToは、 
    renderTo:'renderTarget',
先にも記述したとおり、表示先を指定するコンフィグです。document.bodyとか、DOMノードのidを表示先に設定してあげます。サンプルソースのように、コンフィグオプションでレンダリング先を指定してあげることも出来ますし、出来上がったgridから以下のようにしてメソッドとして呼び出すことも出来ます。（メソッド名とコンフィグオプションは必ずしも一致しませんし、コンフィグオプションが全てメソッドとして利用できるわけではなさそうです。） 
    var grid = new Ext.grid.GridPanel({ /* config options */ });
    grid.render( 'renderTarget' );
サンプルソースで使ったコンフィグの残りは表示レイアウトのオプションになります。 
    title:'simple-grid',
    stripeRows:true,
    height:150,
    width:316,
    frame:true
titleはgirdのタイトルになります。これを設定しないとタイトルバーごと表示されません。何かを設定すれば、（例えば空文字でも）タイトルバーは残ります。
stripeRowsは、行を縞々に表示するコンフィグです。ちょっと色が薄いので判りにくいですが、これをtrueにすると行が縞々に表示されます。stripeRowsコンフィグを使わないで実装した場合、デフォルト値がfalseですので、縞々にはなりません。
height / widthはそのまま、縦・横の幅を表します。
最後のframeはこのgridの枠です。true / false で表示・非表示を表していて、デフォルトはfalseです。
コンフィグオプションをつけたり消したりして、表示を見て試してみれば判りやすいかと思います。

【Ext.data.SimpleStoreの解説】

では、GridPanelに必須コンフィグのstoreの解説です。 
    var store = new Ext.data.SimpleStore({
        fields: [
            { name: 'a' },
            { name: 'b' }
        ],
        data:[ 
            [ 'hoge', 1 ],
            [ 'moge', 2 ],
            [ 'fuga', 3 ] 
        ]
    });
ソースは上記のようになっています。gridと同じようにExt.data.SimpleStore({ /* コンフィグオプション群 */ })コンフィグオプションを設定します。Ext.data.SimpleStoreはExt.data.Storeを継承したデータストアで、配列でStoreデータを簡単に構築できるクラスです。見ると、fieldsもdataも配列で構築されていることがわかります。 
    fields: [
        { name: 'a' },
        { name: 'b' }
    ],
fieldsは、ストア上のフィールド定義です。名前に a / b と付けてみました。gridそのものを見ると列ヘッダにtitle / numberとありますが、ストア上にあるフィールド名は a / b となります。（girdはStoreとColumnModelのファサード（ラッパー）だと理解すればいいと思います。）データを正しくマッピングできるように重複しない名前を定義してあげてください。（マッピングは次のExt.grid.ColumnModelで行います。） 
    data:[ 
        [ 'hoge', 1 ],
        [ 'moge', 2 ],
        [ 'fuga', 3 ] 
    ]
dataは、そのまんまデータを表していて、多次元配列（２次元配列）で定義します。表のイメージを実装してあげることが出来るので便利ですが、多次元配列で定義することに注意してください。例えば、fieldsが１つの場合でも 
    data:[ 
        'hoge', 
        'moge', 
        'fuga' 
    ]
とせずに 
    data:[ 
        [ 'hoge' ], 
        [ 'moge' ], 
        [ 'fuga' ] 
    ]
のように多次元配列で構築する必要があります。

【Ext.grid.ColumnModelの解説】

    var clmnModel = new Ext.grid.ColumnModel([
        { header: "title", width: 200, dataIndex: 'a' },
        { header: "number", width: 100, sortable: true, dataIndex: 'b' }
    ]);
まず、ソースを抜き出してみました。このクラスは 
Ext.grid.ColumnModel([{ /* コンフィグオプション群 */ },{ /* コンフィグオプション群 */ } ]);
のように、配列でコンフィグオプションをイニシャライズする必要があります。カラム定義が１つの場合は、コンフィグオプション群も１つになるかと思いますが、以下のように配列で定義しないで実装すると正しく表示されません。（gridの中身が表示されなくなります） 
    // 正しく表示されない
    Ext.grid.ColumnModel({ /* コンフィグオプション群 */ });

    // 正しく表示される
    Ext.grid.ColumnModel([ { /* コンフィグオプション群 */ } ]);
コンフィグオプションの中身はその機能や、表示系のオプションがたくさん用意されていて、今回使ってみた機能はsortableというコンフィグです。読んで字のごとく該当列がソートできるか出来ないかを表すコンフィグです。デフォルト（sortableを実装していない場合）はソートできないので、titleフィールドはソート表示がグレーアウトされていて、numberフィールドはソードが出来るようになっています。
    { header: "title", width: 200, dataIndex: 'a' },
    { header: "number", width: 100, sortable: true, dataIndex: 'b' }
headerは列のタイトルとなるコンフィグで、widthは列の幅を表しています。dataIndexは上述のstoreで定義したnameとマッピングしています。必須ではありませんので定義しなくても表示されますが、明示的にマッピングして表示してあげたほうがいいかと思います。
他にもこのサンプルソースにすぐ使えそうな機能コンフィグとして以下のようなものがあります。editorというコンフィグで各セルの編集が出来るようになるのですが、これはgirdそのものがExt.grid.EditorGridPanelでないと機能しないようです。（次回解説します。）
  • hidden:Boolean
    • 列そのものを表示させるかどうかです。trueにすると非表示となります。カラムメニューから再表示させることが出来ます。
  • hideable:Boolean
    • 列を非表示に出来るかどうかです。falseにすると非表示にすることが出来なくなり、カラムメニューから該当列の表示・非表示のチェックボックスが消えます。
  • resizable:Boolean
    • 列の幅をリサイズできるかどうかです。falseにすると、リサイズが出来なくなります。
  • menuDisabled:Boolean
    • 列メニューを使えるようにするかどうかです。trueにすると、該当列の列メニュードロップダウン表示（▼←こんなの）がなくなりメニューが使えなくなります。
  • tooltip:String
    • 列にマウスをあわせたときにtooltipが表示されます。
というわけで、gridの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。 ]]> http://wiki.mojalog.com/extjs/2008/04/extjs_extgridgridpanel.html http://wiki.mojalog.com/extjs/2008/04/extjs_extgridgridpanel.html ColumnModel GridPanel SimpleStore data grid render renderTo Mon, 28 Apr 2008 21:19:01 +0900 お知らせ

■はじめに

このブログはExtJS / GWTについて淡々と綴っていくまとめサイトです。位置付けは自分用の備忘録になりますが、誤った情報を垂れ流す可能性も多々ありますのでコメントもトラックバックも開けておきます。

■更新履歴

■リンク


■サイトマップ

[ カテゴリ ]

パッケージレベルをトップレベルカテゴリとして、クラスやコンポーネントまでをカテゴリとして扱います。エントリを探す際にご利用ください。

[ タグ ]

プロパティ、メソッド、イベントをタグとして扱います。エントリを探す際にご利用ください。

]]> http://wiki.mojalog.com/extjs/2008/04/extjswiki.html http://wiki.mojalog.com/extjs/2008/04/extjswiki.html notice Tue, 22 Apr 2008 00:20:28 +0900