1、Ext.tree.TreePanel
主要配置項：
root：樹的根節點。
rootVisible：是否顯示根節點，默認為true。
useArrows：是否在樹中使用Vista樣式箭頭，默認為false。
lines：是否顯示樹線，默認為true。
loader：樹節點的加載器，默認為Ext.tree.TreeLoader。
selModel：樹的選擇模式，默認為Ext.tree.DefaultSelectionModel。
pathSeparator：樹節點路徑的分隔符，默認為“/”。
singleExpand：是否一次只展開樹中的一個節點，默認為true。
requestMethod：請求方法，可選值有POST、GET。
containerScroll：是否將樹形面板注冊到滾動管理器ScrollManager中。
autoScroll：當內容超過預設的高度時自動出現滾動條。
draggable：是否允許拖曳。
enableDD：設置樹的節點是否可以拖動。
主要方法：
collapseAll()：收縮所有樹節點
expandAll()：展開所有樹節點
getRootNode()：獲取根節點
getNodeById(String?id)：獲取指定id的節點
expand(?[Boolean?deep],?[Boolean?anim],?[Function?callback],?[Object?scope]?)
expandPath(?String?path,?[String?attr],?[Function?callback]?)
getChecked(?[String?attribute],?[TreeNode?startNode]?)
selectPath(?String?path,?[String?attr],?[Function?callback]?)
getSelectionModel()：
2、Ext.data.Node
主要配置項：
id：節點id
leaf：當前節點是否為葉子節點
主要屬性：
id：節點id
attributes：節點屬性的集合
parentNode：當前節點的父節點
childNodes：當前節點所有子節點組成的數組
firstChild：當前節點的第一個直接子節點，如果沒有則為null值
lastChild：當前節點的最后一個直接子節點，如果沒有則為null值
nextSibling：當前節點的下一個兄弟節點，如果沒有則為null值
previousSibling：當前節點的前一個兄弟節點，如果沒有則為null值
主要方法：
appendChild(?Node/Array?node?)：追加新的子節點
bubble(?Function?fn,?[Object?scope],?[Array?args]?)：從當前節點開始向上迭代調用指定函數，如果指定函數返回false則將終止迭代。
args：傳入函數中的參數，默認為當前節點
cascade(?Function?fn,?[Object?scope],?[Array?args]?)：從當前節點開始向下迭代調用指定函數，如果指定函數返回false則將終止迭代。
contains(?Node?node?)：當前節點是否包含指定子節點。
eachChild(?Function?fn,?[Object?scope],?[Array?args]?)：迭代當前節點的所有子節點調用指定函數，如果指定函數返回false則將終止迭代。
findChild(?String?attribute,?Mixed?value?)：查找具有指定屬性的第一個子節點。
findChildBy(?Function?fn,?[Object?scope]?)：根據自定義函數查找第一個符合要求的子節點，如果自定義函數返回true則說明匹配成功。
getDepth()：取得當前節點的深度，根節點的深度為0
getOwnerTree()：取得當前節點所在樹。
getPath(?[String?attr]?)：取得當前節點對應的路徑，這個路徑在程序中可用于展開或者選擇節點。
attr：用于查找路徑的屬性，默認為節點id
hasChildNodes()：是否有子節點
indexOf(?Node?node?)：取得指定子節點的索引值，未找到返回-1。
insertBefore(?Node?node,?Node?refNode?)：在當前節點的指定子節點之前插入一個新的子節點。
node：要插入的新節點
isAncestor(?Node?node?)：判斷指定節點是否為當前節點的父節點（可以是任何一級中的父節點）。
isFirst()：是否為父節點的第一個子節點。
isLast()：是否為父節點的最后一個子節點。
isLeaf()：是否為葉子節點。
item(?Number?index?)：取得指定索引的子節點。
remove()：從父節點中刪除當前節點。
removeChild(?Node?node?)：刪除當前節點的指定子節點。
replaceChild(?Node?newChild,?Node?oldChild?)：用新的子節點替換當前節點的指定子節點。
sort(?Function?fn,?[Object?scope]?)：用指定的排序函數為當前節點的子節點進行排序。
3、Ext.tree.TreeNode
主要配置項：
text：節點上的文本信息
qtip：節點上的提示信息
icon：節點圖標對應的路徑
iconCls：應用到節點圖標上的樣式
checked：當前節點的選擇狀態
true：在節點前顯示一個選中狀態的復選框
false：在節點前顯示一個未選中狀態的復選框
不指定該值：不顯示任何復選框
href：節點的連接屬性，默認為#
hrefTarget：顯示節點連接的目標框架
editable：是否允許編輯，默認為true
expanded：是否展開節點，默認為false
disabled：是否禁用節點，默認為false
singleClickExpand：是否通過單擊方式展開節點
allowChildren：是否允許當前節點具有子節點，默認為true
expandable：當不含子節點時，是否總顯示一個加減圖標，默認為false
uiProvider：節點的UI類，默認為Ext.tree.TreeNodeUI
主要屬性：
text：節點上的文本信息
disabled：當前節點是否被禁用
主要方法：
collapse(?[Boolean?deep],?[Boolean?anim],?[Function?callback],?[Object?scope]?)：收縮當前節點
deep：是否級聯收縮全部子節點
collapseChildNodes(?[Boolean?deep]?)：收縮所有子節點
disable()：禁用當前節點
enable()：啟用當前節點
ensureVisible(?[Function?callback],?[Object?scope]?)：確保所有父節點都是展開的
expand(?[Boolean?deep],?[Boolean?anim],?[Function?callback],?[Object?scope]?)：展開當前節點
expandChildNodes(?[Boolean?deep]?)：展開所有子節點
isExpanded()：當前節點是否展開
isSelected()：當前節點是否被選中
select()：選擇當前節點
setText(?String?text?)：設置當前的文本
toggle()：切換當前節點的展開和收縮狀態
unselect()：取消對當前節點的選擇
getUI()：取得節點的UI對象
4、Ext.tree.AsyncTreeNode
主要配置項：
loader：當前節點的樹加載器，默認使用樹中配置的樹加載器
主要方法：
isLoaded()：當前節點是否已經加載數據
reload(?Function?callback,?[Object?scope]?)：重新加載節點數據，并調用回調函數
5、Ext.tree.TreeNodeUI
主要方法：
getAnchor()：從節點的UI中獲取焦點的<a>元素
getIconEl()：獲取圖標的<img>元素
getTextEl()：獲取文本節點
addClass(?String/Array?className?)：
removeClass(?String/Array?className?)：
hide()：
show()：
isChecked()：取得節點的選擇狀態，如果當前節點沒有復選框則函數返回false
toggleCheck(?Boolean?(optional)?)：設置節點復選框的選擇狀態
6、Ext.tree.TreeNodeUI作為樹形節點的視圖，我們可以通過node.ui的方式獲得某個Ext.tree.TreeNode實例對應的Ext.tree.TreeNodeUI。

主要函數：

addClass(?)給節點增加樣式；

removeClass（）給節點刪除樣式；

getAnchor（）獲得頁面上與樹形對應的<a>標簽；

getIconEl（）獲得頁面上與樹形對應的<img>標簽；

getTextEl（）獲得頁面上與樹形對應的包含文字的<span>標簽部分；

hide(）和show（）函數可以控制樹形節點是否隱藏；

isChecked（）函數可以判斷節點中Checkbox狀態；

toggleCheck（）函數可以修改節點中的Checkbox狀態；

7、Ext.tree.DefaultSelectionModel
是TreePanel的默認選擇模式，該模式一次只能選擇樹中的一個節點。
主要方法：
clearSelections()：清除對樹中所有節點的選擇
getSelectedNode()：取得當前被選中的節點
isSelected(?TreeNode?node?)：節點是否被選中
select(?TreeNode?node?)：選中指定節點
unselect(?TreeNode?node?)：取消指定節點的選中狀態
selectNext()：選擇當前被選節點的下一個節點
selectPrevious()：選擇當前被選節點的上一個節點
8、Ext.tree.MultiSelectionModel
是TreePanel的多選擇模式，該模式一次可以選擇樹中的多個節點。
主要方法：
clearSelections()：清除所有節點的選中狀態
getSelectedNodes()：取得被選節點組成的數組
isSelected(?TreeNode?node?)：節點是否被選中
select(?TreeNode?node,?[EventObject?e],?Boolean?keepExisting?)：選中指定節點
unselect(?TreeNode?node?)：取消指定節點的選中狀態
9、Ext.tree.TreeLoader
提供了對子節點的延時加載功能，請求指定的URL地址，返回子節點數據，返回的數據格式如下：
[
{
id:?1,
text:?"node1",
leaf:?true,
check:?false
},
{
id:?2,
text:?"node2",
children:?[
{
id:?3,
text:?"node3",
leaf:?true
}
]
}
]
樹節點展開時，當前節點的id會作為請求參數被發送到服務器，在服務器可以通過node參數名進行獲取。
主要配置項：
dataUrl：獲取子節點的URL地址。
baseAttrs：子節點的基本屬性對象，該對象中的屬性將被添加到樹加載器創建的所有子節點上。優先服務器返回的同名屬性值。
baseParams：基本的請求參數，這些參數會被附加到每一個節點的請求中
clearOnLoad：在加載前是否移除已存在的子節點，默認為true。
preloadChildren：在第一次加載子節點后是否遞歸加載所有子節點。
requestMethod：請求方法，可選值有POST、GET。
uiProviders：加載器創建子節點的UI實現類。
url：與dataUrl作用相同。
主要方法：
load(?Ext.tree.TreeNode?node,?Function?callback,?(Object)?scope?)：從指定的URL加載樹節點。
node：需要加載子節點的樹節點。
10、Ext.tree.TreeEditor
主要配置項：
alignment：對齊方式。
editDelay：兩次點擊節點觸發編輯操作的延時時間，默認為350毫秒。
hideEl：在顯示編輯器組件時是否隱藏綁定元素。
maxWidth：編輯器的最大寬度，默認為250。
11、Ext.tree.TreeSorter
主要配置項：
property：用于排序的節點屬性名，默認為text。
dir：排序方向，可選值有asc、desc，默認為asc。
caseSensitive：是否區分大小寫，默認為false。
folderSort：葉節點是否排在非葉節點之下，默認為false。
leafAttr：葉子節點在folder排序時的值，默認為leaf。
sortType：一個自定義函數用于在排序前轉換節點值。

12、若要設置選中節點的屬性node.setText(‘new?node’)，其他屬性的設置可以模仿這種方式。

13、tree.setRootNode(?)設置根節點;root.appendChild(node1)表示把node1插到根上面,也就是root添加子節點node1;root.expand(true,true)其中第一個參數表示是否遞歸展開子節點，如果為false，就只展開第一級節點，下面的子節點仍然是折疊狀態。第二個參數表示是否要動畫效果。

注意：若要出現樹形效果，必須要給定一個初始高度，或者定義autoHeight為true。

14、若要從本地讀取json數據，需要寫個文本文件為樹形提供json數據。需要在TreePanel中設置屬性loader：new?Ext.tree.TreeLoader(dataUrl:’03-03.txt’}，還得將根節點的TreeNode改成AsyncTreeNode，因為TreeNode不支持Ajax，無法生成子節點。若要實現讀取本地js中的json數據，也需要設置loader，此處的url不需要設置，同樣TreeNode改成AsyncTreeNode。

注意：在txt文檔里應定義節點的屬性leaf：true，不然節點會無限循環下去。

15、若要實現從后臺讀取數據，需要給根節點設置個id，然后dataUrl將jsp或php文件鏈上，注意節點的id不能重復。這里不能再使用root.expand（true）進行遞歸展開了，不然會導致樹形節點不斷向后臺發送請求，直到所有的節點都展開為止，無法實現異步的效果。

16、icon比iconCls的優先級高，iconCls只能設置背景圖片，icon設置的是img中的src部分。

17、若是將tree渲染到某個panel里，不能再用root.expand(true,true)實現根節點展開功能，需要在root中加一個屬性expanded：true。

18、TreeNode里的view部分稱為UI，包括縮進用的空白，節點之間的連接線，節點展開和折疊的圖標以及顯示的標題。

19、在彈出框屬性中設置animEl：node.ui.textNode實現動態效果，是從節點飛出來的。

20、可以設置節點href屬性，以及在新頁面打開hrefTarget:’_blank’

21、treepanel事件有click，beforeload，contextmenu右鍵菜單事件，nodedrop，beforestartedit，complete等。

22、從一棵樹拖到另一棵樹，需要分別設置enableDrag和enableDrop。

23、clear(?)表示清空過濾條件，這會讓樹形顯示出所有節點；clearBlank：true表示如果查詢的字符串是空字符串，就執行clear（）;autoClear:true表示每次過濾之前先執行clear（），否則會在上次過濾的結果上進行查詢；remove表示會刪除不符合過濾條件的節點，這樣就不能使用clear（）恢復為過濾之前的狀態了。

轉載于:https://www.cnblogs.com/pinnasky/archive/2012/03/02/2377506.html

總結

以上是生活随笔為你收集整理的Tree.Panel各项属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。