TreePanel繼承自Panel，在ExtJS中使用樹控件含有豐富的屬性和方法實現復雜的功能。其中Ext.tree.TreeNode代表壹個樹節點，比較常用的屬性包括text、id、icon、checked等、異步樹Ext.tree.AsyncTreeNode、樹加載器Ext.tree.TreeLoader。下面介紹幾個extjs中treepanel例子：
壹、TreePanel基本配置參數:
//TreePanel配置參數
animate:true//展開,收縮動畫,false時,則沒有動畫效果
autoHeight:true//自動高度,默認為false
enableDrag:true//樹的節點可以拖動Drag(效果上是),註意不是Draggable
enableDD:true//不僅可以拖動,還可以通過Drag改變節點的層次結構(drap和drop)
enableDrop:true//僅僅drop
lines:true//節點間的虛線條
loader:Ext.tree.TreeLoader//加載節點數據
root:Ext.tree.TreeNode//根節點
rootVisible:false//false不顯示根節點,默認為true
trackMouseOver:false//false則mouseover無效果
useArrows:true//小箭頭
二、TreeNode的基本配置參數:
//TreeNode常用配置參數
checked:false//true則在text前有個選中的復選框,false則text前有個未選中的復選框,默認沒有任何框框
expanded:fasle//展開,默認不展開
href:"blogs.com"//節點的鏈接地址
hrefTarget:"mainFrame"//打開節點鏈接地址默認為blank,可以設置為iframe名稱id,則在iframe中打開
leaf:true//葉子節點,看情況設置
qtip:"提示"//提示信息,不過要?Ext.QuickTips.init();下
text:"節點文本"//節點文本
singleClickExpand:true//用單擊文本展開,默認為雙擊
三、treepanel實例：
第壹個靜態樹--最簡單的樹：
Ext.onReady(function(){var?mytree=new?Ext.tree.TreePanel({
el:"container",//應用到的html元素id
animate:true,//以動畫形式伸展,收縮子節點
title:"Extjs靜態樹",
collapsible:true,
rootVisible:true,//是否顯示根節點
autoScroll:true,
autoHeight:true,
width:150,
lines:true,//節點之間連接的橫豎線
loader:new?Ext.tree.TreeLoader(),//
root:new?Ext.tree.AsyncTreeNode({
id:"root",
text:"根節點",//節點名稱
expanded:true,//展開
leaf:false,//是否為葉子節點
children:[{text:'子節點壹',leaf:true},{id:'child2',text:'子節點二',children:[{text:"111"}]}]
})
});
mytree.render();//不要忘記render()下,不然不顯示哦
})
效果圖: