轉自：http://web.qhwins.com/CSS-JS-XML/2011091312092944999107.html
config定義{
animate : Boolean,
containerScroll : Boolean,
ddAppendOnly : String, /*很顯然這是api的一個錯誤,treepanel.js中惟一用到它的地方是this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
})
只有沒有定義dropConfig才會影響ddconfig的appendOnly,原api說明是
True if the tree should only allow append drops 只有當值為真時才允許以追加的方式接受拖曳*/
ddGroup : String,
ddScroll : Boolean,
dragConfig : Object,
dropConfig : Object,
enableDD : Boolean,
enableDrag : Boolean,
enableDrop : Boolean, //以上參數更應該放在Ext.dd中學習
hlColor : String, //高亮顏色
hlDrop : Boolean //曳入時高亮顯示?
lines : Boolean //顯示樹形控件的前導線
loader : Ext.tree.TreeLoader //這是個重要的參數,用於方便的構建樹形菜單,用於遠程調用樹狀數據
pathSeparator : String //默徑分隔符.默認為/
rootVisible : Boolean //根可見?這是個有趣的屬性,因為樹只能有且僅有一個根,當我們需要兩個或更多的"根"時就要用它了
selModel : Boolean /*選擇模式,默認的是一個Ext.tree.DefaultSelectionModel實例,也可以是 Ext.tree.MultiSelectionModel,如果你有興趣,還可以自己定義,當然,它絕對不是一個布爾值
另,雖然內置的兩種選擇方式都支持getSelectedNodes和clearSelections() 方法,但treenode中好象只用到的select/unSelecte/isSelected,如果自己繼承寫SelectionModel應該至少 支持這三個方法
*/
singleExpand : Boolean //在所有的兄弟節點中只能有一個被展開
屬性
dragZone : Ext.tree.TreeDragZone
dropZone : Ext.tree.TreeDropZone
root : Node //最重要的也就是這個屬性了
方法
TreePanel( Object config )
構造
collapseAll() : void
expandAll() : void
收起展開所有節點
expandPath( String path, [String attr], [Function callback] ) : void
由path找到節點,展開樹到此節點
getChecked( [String attribute], [TreeNode startNode] ) : Array
返回一個包含所有選中節點的數組.或者所有選中節點的屬性attribute組成的數組
getEl() : Element
返回當前TreePanel的容器對象
getLoader() : Ext.tree.TreeLoader
當前所使用的TreeLoader對象
getNodeById( String id ) : Node
由指定的節點id找到節點對象
getRootNode() : Node
得到根節點,同屬性root
getSelectionModel() : TreeSelectionModel
得到選擇模式
getTreeEl() : Ext.Element
返回當前tree下面的元素
selectPath( String path, [String attr], [Function callback] ) : void
由path選擇指定的節點,它事實上調用的是expandPath用於展開節點對象
setRootNode( Node node ) : Node
設置根節點
事件
append : ( Tree tree, Node parent, Node node, Number index )
beforeappend : ( Tree tree, Node parent, Node node )
beforechildrenrendered : ( Node node )
beforeclick : ( Node node, Ext.EventObject e )
beforecollapsenode : ( Node node, Boolean deep, Boolean anim )
beforeexpandnode : ( Node node, Boolean deep, Boolean anim )
beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )
beforeload : ( Node node )
beforemove : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )
beforenodedrop : ( Object dropEvent )
beforeremove : ( Tree tree, Node parent, Node node )
checkchange : ( Node this, Boolean checked )
click : ( Node node, Ext.EventObject e )
collapsenode : ( Node node )
contextmenu : ( Node node, Ext.EventObject e )
dblclick : ( Node node, Ext.EventObject e )
disabledchange : ( Node node, Boolean disabled )
dragdrop : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e )
enddrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )
expandnode : ( Node node )
insert : ( Tree tree, Node parent, Node node, Node refNode )]
load : ( Node node )
move : ( Tree tree, Node node, Node oldParent, Node newParent, Number
nodedragover : ( Object dragOverEvent )
nodedrop : ( Object dropEvent )
remove : ( Tree tree, Node parent, Node node )
startdrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )
textchange : ( Node node, String text, String oldText )
Ext.tree.TreeNode
樹狀控件的節點類,繼承自Ext.data.Node
config{
allowChildren : Boolean
allowDrag : Boolean
allowDrop : Boolean
checked : Boolean //無論設為真還是假都會在前面有個選擇框,默認未設置
cls : String
disabled : Boolean
draggable : Boolean
expandable : Boolean
expanded : Boolean
href : String //超鏈接
hrefTarget : String
icon : String //圖標
iconCls : String
isTarget : Boolean //是拖曳的目標?
qtip : String //提示
qtipCfg : String //
singleClickExpand : Boolean //單擊展開
text : String //文本內容
uiProvider : Function //默認Ext.tree.TreeNodeUI,如果想自己提供ui可以自已再繼承Ext.tree.TreeNodeUI
}
屬性
disabled : Boolean
text : String
ui : TreeNodeUI //此屬性只讀.參見uiProvider
方法
TreeNode( Object/String attributes )
構造
collapse( [Boolean deep], [Boolean anim] ) : void
收起本節點
collapseChildNodes( [Boolean deep] ) : void
收起子節點
disable() : void
enable() : void
禁止允許
ensureVisible() : void
確保所有的父節點都是展開的
expand( [Boolean deep], [Boolean anim], [Function callback] ) : void
展開到當前節點
expand( [Boolean deep], [Boolean anim], [Function callback] ) : void
展開本節點
expandChildNodes( [Boolean deep] ) : void
展開所有的子節點
getUI() : TreeNodeUI
返回ui屬性
isExpanded() : Boolean
當前節點是否展開
isSelected() : Boolean
當前節點是否選擇
select() : void
選擇當前節點
setText( String text ) : void
設置當前節點的文本
toggle() : void
在展開或收起狀態間切換
unselect() : void
取消選擇
事件
beforechildrenrendered : ( Node this )
beforeclick : ( Node this, Ext.EventObject e )
beforecollapse : ( Node this, Boolean deep, Boolean anim )
beforeexpand : ( Node this, Boolean deep, Boolean anim )
checkchange : ( Node this, Boolean checked )
click : ( Node this, Ext.EventObject e )
collapse : ( Node this )
contextmenu : ( Node this, Ext.EventObject e )
dblclick : ( Node this, Ext.EventObject e )
disabledchange : ( Node this, Boolean disabled )
expand : ( Node this )
textchange : ( Node this, String text, String oldText )
Ext.tree.AsyncTreeNode
繼承自Ext.tree.TreeNode,支持異步創建,很顯然除了多個loader與TreeNode沒什么區別
config{
loader : TreeLoader
}
屬性
loader : TreeLoader
方法
AsyncTreeNode( Object/String attributes )
isLoaded() : Boolean
isLoading() : Boolean
reload( Function callback ) : void
事件
beforeload : ( Node this )
load : ( Node this )
Ext.tree.TreeNodeUI
為節點輸出而設計,如果想創建自己的ui,應該繼承此類
方法
addClass( String/Array className ) : void
增加樣式類
getAnchor() : HtmlElement
返回<a>元素
getIconEl() : HtmlElement
返回<img>元素
getTextEl() : HtmlNode
返回文本節點
hide() : void
隱藏
isChecked() : Boolean
選中?
removeClass( String/Array className ) : void
移除樣式
show() : void[/b][b]
顯示
toggleCheck( Boolean (optional) ) : void
切換選中狀態
Ext.tree.RootTreeNodeUI
api上說它繼承自object,事實上treenodeui它中繼承自Ext.tree.TreeNodeUI,也只有這樣才合理,用於輸出根節點
Ext.tree.TreeLoader
用於遠程讀取樹狀數據來構造TreeNode的子節點
config{
baseAttrs : Object //構造子節點的基礎屬性
baseParams : Object //請求url的傳入參數
clearOnLoad : Boolean //重新載入前先清空子節點
dataUrl : String //遠程請求時的url
preloadChildren : Boolean //節點第一次載入時遞歸的載入所有子孫節點的children屬性
uiProviders : Object //ui提供者
url : String //等同於dataUrl
}
方法
TreeLoader( Object config )
構造
createNode() : void
創建節點,treeloader.js中定義的是createNode : function(attr),傳入的應該是一個定制的節點
load( Ext.tree.TreeNode node, Function callback ) : void
為node載入子節點
事件
beforeload : ( Object This, Object node, Object callback )
load : ( Object This, Object node, Object response )
loadexception : ( Object This, Object node, Object response )
Ext.tree.TreeSorter
排序
config{
caseSensitive : Boolean//大小寫敏感,默認為false
dir : String //正序還是倒序,可選asc/desc.默認asc
folderSort : Boolean //葉節點排在非葉節點之下 ,默認為真
leafAttr : String //在folderSort中排序時的使用的屬性,默認為leaf
property : String //用於排序的屬性.默認為text
sortType : Function //可以通過特定的sortType先轉換再排序
}
方法
TreeSorter( TreePanel tree, Object config )
構造
Ext.tree.TreeFilter
過濾器
clear() : void
清除當前過濾器
filter( String/RegExp value, [String attr], [TreeNode startNode] ) : void
filterBy( Function fn, [Object scope] ) : void
使用過濾器,但正如api中所說的,這是個實驗性的數,還有很多不足,基本上很難真的作用
慣例來個小示例
Ext.onReady(function() {
//建立樹
var tree=new Ext.tree.TreePanel( {
el:Ext.getBody(),
autoScroll:true,
animate:true,
height:200,
enableDD:true,
containerScroll: true
});
//建立根
var root = new Ext.tree.TreeNode( {
text: 'Ext JS',
draggable:false,
id:'root'
});
//設置根
tree.setRootNode(root);
tree.render();
//增加子節點
root.appendChild(new Ext.tree.TreeNode( {
text: 'csdn',
href:'http://www.csdn.net',
id:'node_csdn'
}));
root.appendChild(new Ext.tree.TreeNode( {
text: 'duduw',
href:'http://www.duduw.com',
id:'duduw_Node'
}));
//設置屬性
tree.root.attributes.description='這是根節點';
//getNodeById
tree.getNodeById('duduw_Node').attributes.description='這是葉節點';
//選擇第一個子節點
tree.selectPath('/root/node_csdn');
//事件
tree.on('click',function(node,e) {
e.stopEvent();
if(node.attributes.description) {
Ext.MessageBox.show( {title:'您選擇了',
msg:String.format("description:{0}<br/>href:{1}",node.attributes.description,node.attributes.href)
});
}
});
});