« 2008年05月11日 - 2008年05月17日 | メイン | 2008年05月25日 - 2008年05月31日 »
firebugをいろいろいじくってまして、ウェブ関係の開発に使えそうなブックマークレットを作りました。ウェブ開発に使えそうとか言いながらIEでは動かないという素敵な仕様です。
| パーマリンク
| コメント (0)
| トラックバック (0)
ExtJSのエントリはこちらにまとめてあります【パス】 ext-2.1\examples\tree\reorder.html開いてみると、ツリーのルートノードが表示されているだけでクリックしても以下のノードが見えませんね。これはサーバサイトスクリプトを参照しに行っていて、その参照先がローカルのget-nodes.phpにあるためです。ですので直接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
});
}
});
var tree = new Ext.tree.TreePanel({
という箇所がツリーパネルそのものになります。ツリーを表現する以上、ノードとなるデータがひとつ以上必要になってきて、そのデータコンテンツはTreeNodeというクラスインスタンスを使うことになります。GridPanelやDataViewで使ったデータストアとは違ってくるようです。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.それではツリーパネルのコンフィグオプションを見てみます。
var tree = new Ext.tree.TreePanel({
title:'SimpleTree',
width:300,
useArrows:true,
enableDD:true,
root:root,
renderTo:'renderTarget',
続いてtbarというコンフィグオプションを設定していますが、この部分は最後に記述したいと思います。
function createNode( id, text, isLeaf, isDrag ){
return new Ext.tree.TreeNode({
draggable:isDrag,
id:id,
text:text,
leaf:isLeaf
});
}
メソッドcreateNodeはワタシが勝手に作ったメソッドです。このメソッドはパラメータに従ってTreeNodeをnewして返すだけのものですので特に細かい解説はいらないかと思います。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ドキュメント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()を使っています。
{ text: 'AddNode-Recursive', handler:function(){
function recursiveNode( pNode ){ /* ... */ };
root.eachChild( recursiveNode );
tree.expandAll();
}}
途中にrecursiveNodeというメソッドの定義がハンドラの中に入ってきていますのでちょっと分かりにくいですが、recursiveNodeを省いて見ると、このハンドラはeachChild( Function fn, [Object scope], [Array args] ) : voidこのメソッドはTreeNodeのメソッドなのですが、ノードが持つ子ノード分イテレートしてFunction fnを呼び出すというものです。第２引数のスコープは実際に与えるか、与えないとイテレート中のカレントのノードがFunction fnに与えられるみたいです。第３引数の"引数"も同様です。
| パーマリンク
| コメント (0)
| トラックバック (0)
firebugをいろいろいじくってまして、ウェブ関係の開発に使えそうなブックマークレットを作りました。ウェブ開発に使えそうとか言いながらIEでは動かないという素敵な仕様です。
| パーマリンク
| コメント (0)
| トラックバック (0)
