通過查閱一些資料和自己之前了解到的一些相關知識，有時項目中需要用到。話不多說，先看一下效果圖：
我寫的這人員選擇的樹，主要是改寫了TreePanel,如下代碼：
ExtendTreePanel.js (該文件中可以寫一些觸發事件)
Ext.namespace('Ext.ysq');//Ext.namespace方法定義一個管理類的包，類似Java中定義的包名，目的是建立自己的一個對象名，方便管理，防止重復
Ext.ysq.ExtendTreePanel = Ext.extend(Ext.tree.TreePanel,{
initComponent:function(){
this.addEvents(//自定義事件
'nodechecked'
);
this.addListener({
checkchange:{//當一個帶有復選框的節點的復選框選中狀態發生變化時觸發
fn:function(node,checked){
if(!node.loaded){//子節點是否加載
node.expand();
}
this.selectChildNodes(node,checked);//選定子節點
if(node.parentNode){//是否為父節點
this.selectParentNodes(node,checked);//是否選定父節點
}
},
scope:this
}
});
Ext.ysq.ExtendTreePanel.superclass.initComponent.call(this);//直接調用父類的構造函數,或者一些屬性
},
selectChildNodes:function(Node,checked){
Node.eachChild(function(node){
node.attributes.checked = checked;
node.getUI().toggleCheck(checked);
if(!node.leaf){
if(!node.loaded){
node.expand();
}
this.selectChildNodes(node,checked);
}
},this);
},
selectParentNodes:function(Node,checked){//判斷父節點選中，子節點全部被選中
Node.eachChild(function(node){
node.getUI().toggleCheck(checked);
},this);
}
});
所需要展示的信息樹：
ExtendTreeTest.js:
var extPanel = new Ext.ysq.ExtendTreePanel({ title:'選擇人員信息', titleCollapse:false, useArrows:true, root:new Ext.tree.AsyncTreeNode({ id:'rootNode', checked:false, allowDrag:false, //expanded: true, //從該節點開始，展開節點（不級聯到下一節點） leaf:false, icon:'./image/im16x16.gif', expandable:true, lines:true,//節點之間連接的橫豎線 //animate : true,//設置為true以啟用展開/收縮時的動畫效果 singleClickExpand:true,//用單擊文本展開,默認為雙擊 loader: new Ext.tree.TreeLoader(), text:'通訊錄信息', children:[ {text:'城建辦', leaf:false, icon:'./image/im16x16.gif', checked:false, children:[ { text:'李昆學', leaf:true, icon:'./image/user_suit.gif', checked:false }, { text:'張馨文', leaf:true, icon:'./image/user_suit.gif', checked:false } ] }, {text:'總工會', leaf:false, icon:'./image/im16x16.gif', checked:false, children:[ { text:'黃海成', leaf:true, icon:'./image/user_suit.gif', checked:false }, { text:'徐進新', leaf:true, icon:'./image/user_suit.gif', checked:false } ] } ] }) }); var win = new Ext.Window({ title:'人員選擇窗口', width:420, height:380, frame:true, border:false, layout:'fit', buttonAlign:'center', draggable:false, closable:false, modal:true, items:[extPanel], buttons : [{ text : '傳閱', handler : function() { } }, { text : '關閉', handler : function() { }}] }); /*var dealpanel = new Ext.Panel({ border : false, title : '傳閱人員', layout : 'fit', height : 380, width : 420, autoScroll : true, items : [extPanel] });*/ Ext.onReady(function(){ //Ext.QuickTips.init(); //dealpanel.render("tab"); win.show(); });
最后，附帶一些有關tree中的配置屬性：（這些都可以在api中查看，轉載）
Extjs tree的相關方法及配置項
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中。
主要方法：
collapseAll()：收縮所有樹節點
expandAll()：展開所有樹節點
getRootNode()：獲取根節點
getNodeById(String id)：獲取指定id的節點
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展開panel的body以便讓其變得
可見
expandPath( String path, [String attr], [Function callback] )展開當前TreePanel中的指定路
getChecked( [String attribute], [TreeNode startNode] )獲得選中的節點列表，或者被選中節點的某個指定的屬性數組
selectPath( String path, [String attr], [Function callback] ) 從樹中選中所給路徑的節點
getSelectionModel()：返回此TreePanel使用的選擇模型
Ext.data.Node
主要配置項：
id：節點id
leaf：當前節點是否為葉子節點
主要屬性：
id：節點id
attributes：節點屬性的集合
parentNode：當前節點的父節點
childNodes：當前節點所有子節點組成的數組
firstChild：當前節點的第一個直接子節點，如果沒有則為null值
lastChild：當前節點的最后一個直接子節點，如果沒有則為null值
nextSibling：當前節點的下一個兄弟節點，如果沒有則為null值
previousSibling：當前節點的前一個兄弟節點，如果沒有則為null值
主要方法：
a( 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] )：用指定的排序函數為當前節點的子節點進行排序。
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對象
Ext.tree.AsyncTreeNode
主要配置項：
loader：當前節點的樹加載器，默認使用樹中配置的樹加載器
主要方法：
isLoaded()：當前節點是否已經加載數據
reload( Function callback, [Object scope] )：重新加載節點數據，並調用回調函數
Ext.tree.TreeNodeUI
主要方法：
getAnchor()：從節點的UI中獲取焦點的元素
getIconEl()：獲取圖標的元素
getTextEl()：獲取文本節點
addClass( String/Array className )：
removeClass( String/Array className )：
hide()：
show()：
isChecked()：取得節點的選擇狀態，如果當前節點沒有復選框則函數返回false
toggleCheck( Boolean (optional) )：設置節點復選框的選擇狀態
Ext.tree.DefaultSelectionModel
是TreePanel的默認選擇模式，該模式一次只能選擇樹中的一個節點。
主要方法：
clearSelections()：清除對樹中所有節點的選擇
getSelectedNode()：取得當前被選中的節點
isSelected( TreeNode node )：節點是否被選中
select( TreeNode node )：選中指定節點
unselect( TreeNode node )：取消指定節點的選中狀態
selectNext()：選擇當前被選節點的下一個節點
selectPrevious()：選擇當前被選節點的上一個節點
Ext.tree.MultiSelectionModel
是TreePanel的多選擇模式，該模式一次可以選擇樹中的多個節點。
主要方法：
clearSelections()：清除所有節點的選中狀態
getSelectedNodes()：取得被選節點組成的數組
isSelected( TreeNode node )：節點是否被選中
select( TreeNode node, [EventObject e], Boolean keepExisting )：選中指定節點
unselect( TreeNode node )：取消指定節點的選中狀態
Ext.tree.TreeLoader
提供了對子節點的延時加載功能，請求指定的URL地址，返回子節點數據，返回的數據格式如下：
[{id: 1, text: "node1", leaf: true, check: false },
{ id: 2, text: "node2",children: [{ id: 3, text: "node3", leaf: true}] } ]
[ { 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：需要加載子節點的樹節點。
Ext.tree.TreeEditor
主要配置項：
alignment：對齊方式。
editDelay：兩次點擊節點觸發編輯操作的延時時間，默認為350毫秒。
hideEl：在顯示編輯器組件時是否隱藏綁定元素。
maxWidth：編輯器的最大寬度，默認為250。
Ext.tree.TreeSorter
主要配置項：
property：用於排序的節點屬性名，默認為text。
dir：排序方向，可選值有asc、desc，默認為asc。
caseSensitive：是否區分大小寫，默認為false。
folderSort：葉節點是否排在非葉節點之下，默認為false。
leafAttr：葉子節點在folder排序時的值，默認為leaf。
sortType：一個自定義函數用於在排序前轉換節點值。