TreePanel組件（Ext.tree.TreePanel）^{logogram：Ext.tree.Panel | xtype:treepanel}

樹與節點

樹面板組件的根是源頭，從根上拓展出其它的子節點和葉子節點，前者可以繼續拓展出子節點，后者因為是葉子，所以不再有子節。Json自身就類似樹結構，所以使用Json作為樹面板的data是順理成章的事。節點都來自Ext.data.NodeInterface接口，該接口提供了對節點的創建、刪除、替換、查找、獲取、插入等操作。而且Ext.data.NodeInterface對象與Ext.data.Model對象之間存在可交換使用的屬性、方法，所以前者不但是節點同時也是一個記錄對象。也即你可以把節點看成Ext.data.Model對象，可以同時使用兩者所具備的屬性或方法。

樹.配置

store:?Ext.data.store
//配置數據存儲器。配置root指定節點數據。
?
root?：節點數據
//節點數據，如果配置了store就不需要再配置此項，兩項任選其一。
?
rootVisible:?bool
//是否顯示根節點。
?
renderTo:?Element?|?Dom?ID?|?Dom
//渲染到哪個元素里。
?
enableDD:?bool
//是否可拖動節點到其它任意節點中。
?
lines:?bool
//是否顯示樹的層次線
?
selModel：Ext.selection.Model
//選擇模式，參看：選擇模式
?
collapsible：bool
//是否在樹的標題欄顯示一個折疊展開的按鈕用于折疊或展開整棵樹
?
trackMouseOver:?bool
//鼠標劃過節點時是否顯示背景色
?
useArrows：bool
//節點前的折疊展開圖標使用vista風格的三角形圖標
?
columns：[]
//與GridPanel的columns用法完全相同，此項主要用于將樹顯示為表格樹
?
displayField:?string
//默認樹節點的文本顯示的是text字段，此項可以指定其它的字段用于顯示節點文本
?
valueField:?string
默認樹節點的值是id字段，此項可以指定其它的字段作為節點的值
?
folderSort：bool
//是否排序
?
hideHeaders：bool
//當樹為表格樹時是否顯示列頭

樹.方法

getRootNode()
//獲取根節點，返回Ext.data.NodeInterface
?
expand(bool)
//bool：是否開啟動畫效果
//展開樹
?
expandPath(idPath)
//idPath：節點id的路徑
//展開處于參數指定的路徑的節點
//示例：
//將展開根節點01下的0101子節點
tree.expandPath("/01/0101");
?
selectPath(idStrPath)
//與expandPath類似，但同時會選中節點的復選框。
?
collapse(direction,?bool)
//折疊樹
//direction：折疊的方向，可能的值如下：
//Ext.Component.DIRECTION_TOP
//Ext.Component.DIRECTION_RIGHT
//Ext.Component.DIRECTION_BOTTOM
//Ext.Component.DIRECTION_LEFT
//bool：是否開啟動畫效果???????
?
collapseAll()
//折疊所有節點
?
disable(bool)
//啟用或禁用樹
?
getChecked()
//獲取選中的節點，返回Ext.data.NodeInterface[]

getSelectionModel()
//獲取選擇模式對象，可調用isSelected(record)方法測試某節點是否被選中
?
getView()
//獲取視圖
?
nextNode()
//返回在樹的遍歷順序的下一個節點組件，返回Ext.Component。
?
nextSibling()
//返回此組件的下一個同級組件
?
previousNode()
//返回在樹的遍歷順序的前一個節點的組件.
?
previousSibling()
//返回此組件的前一個同級組件?

樹.事件

itemclick：fn(view,?node)
//view：視圖
//node：當前被點擊的節點
//節點被點擊時觸發
?
checkchange：fn(node,?isChecked)
//node：復選框狀態改變的節點
//isChecked：true或false
//節點的復選框狀態改變時觸發
?
beforeitemexpand:?fn(node)
//node：當前被展開的node
//展開節點時觸發
?
beforeitemcontextmenu:?fn(view,?record,?item,?index,?e)
//右擊某項時觸發
//示例：
listeners:?{
????beforeitemcontextmenu:?function?(?view,?record,?item,?index,?e)?{
????????e.preventDefault(true);
????????alert(record.get("id"));
????}
}

節.配置

id:?string
//節點的標識
?
text:?string
//節點名稱
?
checked:?bool
//在當前節點顯示復選框且是否選中。
?
expandable:?bool
//是否允許節點有展開折疊的功能
?
expanded：bool
//展開或折疊當前節點，true為展開
?
qtip:?string
//鼠標滑過當前節點顯示的提示信息
?
qtitle:?string
//提示信息的標題
?
singleClickExpanded:?bool
//是否單擊節點時就展開這個節點（+-或箭頭都是單擊時展開，但節點被單擊時默認是展開的，可設為false即不展開，只有雙擊才會展開）
?
leaf:?bool
//是否是葉子，此項影響到節點前的+-圖標的顯示，如果為false則顯示圖標，默認為false。還影響字節的顯示，如果此項為true，但同時又配置了當前節點的children，那么children就不會顯示出來。
?
children:?[Ext.data.Model實例,?……]
//子節點，此項用于配置子節點，但如果要獲取子節點應使用childNodes屬性。
?
alllowDrag:?bool
//是否允許拖動自身
?
allowDrop:?bool
//是否允許接收來自拖動的節點
?
href：stringUrl
//指示鏈接地址
?
hrefTarget
//指示如何打開鏈接

節.屬性.property??

childNodes
//獲取當前節點的所有子節點，返回代表子節點的Object數組，可通過在迭代時get到節點的屬性

firstChild
//獲取當前節點的第一個子節點

lastChild
//獲取當前節點的最后一個子節點

previousSibling
//獲取緊靠在當前節點前的第一個兄弟節點

nextSibling
//獲取緊靠在當前節點后的第一個兄弟節點

isFirst
//當前節點是否是其父節點所包含的第一個子節點

isLast
//當前節點是否是其父節點所包含的最后一個子節點

parentNode
//獲取當前節點的父節點

parentId
//獲取當前節點的父節點的id

index
//獲取當前節點在其父節點中所處的索引

depth
//獲取深度級別???
//節沒有提供測試是否自身是否被選中，可使用樹的getChecked(0方法或使用樹的getSel

節.方法

appendChild(Ext.data.NodeInterface?|?Ext.data.NodeInterface[])
//在當前節點的末尾添加新節點
?
expand(bool)
//bool：為true時將自動遞歸展開所有子節點
//展開
?
isExpanded()
//是否是展開狀態
?
collapse()
//折疊
?
collapseChildren()
//折疊當前節點的所有子節點
?
createNode()
//創建節點，占時沒搞懂怎么創建后加入tree
?
destroy()
//自毀
?
eachChild(fn)
//遍歷當前節點的所有子節點，在函數的任何位置返回false則會終止遍歷
?
findChild(property,?value,?deep)
//property：屬性名
//value：屬性值
//deep：深度級別，如果為true則查找范圍包括后代節點
//查找具備參數指定的屬性和屬性值的第一個子節點，返回?Ext.data.NodeInterface
?
findChildBy(fn,?scope,?deep)
//fn：如果某節點匹配函數的規則，必須返回true
//scope：作用域
//deep：深度級別，如果為true則查找范圍包括后代節點
//通過自定義函數查找匹配的第一個子節點，返回?Ext.data.NodeInterface
?
getChildAt(index)
//獲取指定索引處的子節點，返回?Ext.data.NodeInterface
?
getDepth()
//獲取當前節點的深度級別
?
getPath()
//獲取當前節點相對于根節點的層級路徑
?
hasChildNodes()
//是否具有子節點
?
indexOf(childNode)
//在當前節點中獲取參數指定的子節點的索引
?
indexOfId(string)
//在當前節點中根據參數指定的ID獲取子節點
?
insertBefore(x,?y)
//x?|?y：當前節點的子節點
//在當前節點的子節點中，將x插入到y之前
?
insertChild(index,?node)
//將節點插入到當前節點的子節點的索引指定處
?
isLeaf()
//是否是葉子節點
?
isRoot()
//是否是根節點
?
remove(bool)
//移除自身，如果bool為true，則直接銷毀。
?
removeAll()
//移除所有子節點
?
removeChild(childNode,?bool)
//移除參數指定的子節點，如果bool為true則直接銷毀
?
replaceChild(new,old)
//在當前節點中，用new替換old

樹的例子

var?tree?=?new?Ext.tree.TreePanel({
????title:?"Simple?Tree",
????renderTo:?Ext.getBody(),
????width:?200,
????height:?150,
????root:?{
????????text:?"根",
????????children:?[
????????????{?text:?"哲學",?leaf:?false?},
????????????{?text:?"數理",?leaf:?false?},
????????????{?text:?"英語",?leaf:?false?},
????????]
????}
});

動態添加節點?

//創建一個節點
var?childNode?=?{?Text:?addValue,?ParentID:?parentID?};
fatherNode.appendChild(childNode);

動態加載樹

store專門有一個叫做Ext.data.TreeStore的數據存儲器，它對樹面板提供了支持，可以使用proxy請求服務端的數據。通常我們讀取的樹的節點數據都來自數據庫的表，而表字段名稱不一定就和text、leaf、parentId完全一樣，這樣就需要創建本地數據模型（Ext.data.Model）匹配數據庫表的字段，通過Ext.data.TreeStore這個專門針對動態加載樹的存儲器去請求服務端的數據。那么假如服務端的數據并沒有text這樣的字段，樹又如何顯示節點名稱呢？只需要配置樹的displayField和valueField就OK，前者指定節點顯示的名稱是服務端數據的哪個字段，后者指定節點id或者父id，這由你自己決定。以下創建了一棵動態加載數據的樹，首次Ajax加載只獲取第一層節點，然后在proxy上注冊了偵聽，當某節點被展開時proxy會繼續發起Ajax請求并將PID的值設為當前被展開節點的ID。服務端request到這個值再從數據庫查詢出其下的子節點，通過JsonCovert將記錄轉換位字符串輸送到客戶端。這樣，proxy會自動將子節點綁定到被展開的那個節點下面，不需要我們做額外的工作。

數據庫

?

客戶端?

//創建model
Ext.define("trees",?{
????extend:?"Ext.data.Model",
????//對應數據庫表的字段
????fields:?['ID',?"Text",?"ParentID"]
});

//創建Store
var?treeStore?=?Ext.create("Ext.data.TreeStore",?{
????model:?"trees",
????proxy:?{
????????type:?"ajax",
????????url:?"treeHandler.ashx",
????????extraParams:?{?PID:?0?},
????????reader:?{
????????????type:?'json',
????????????root:?'ds'
????????}
????},
????listeners:?{
????????beforeexpand:?function?(node)?{
????????????//?因為根節點是服務端JsonConvert返回的數據，root是ds
????????????//?ds是不需要顯示的，所以首次渲染樹時就會自動展開樹
????????????//?此時node是不確定的，直到用戶展開了樹才能捕獲被展開的節點
????????????if?(node.get('ID'))?{?this.proxy.extraParams.PID?=?node.get('ID');?}
????????}
????},
????//自動加載數據，即不需要在后面load了
????autoLoad:?true
});

//創建樹
var?MyTree?=?Ext.create("Ext.tree.Panel",?{
????renderTo:?Ext.getBody(),
????width:?220,
????title:?'simpleDataTree',
????store:?treeStore,
????useArrows:?true,
????rootVisible:?false,
????displayField:?"Text",
????valueField:?"ParentID"
})

服務端

public?void?ProcessRequest(?HttpContext?context?)
{
????context.Response.ContentType?=?"text/plain";
????string?PID?=?context.Request["PID"];
????DataSet?ds?=?Trees.GetList(?"ParentID="?+?PID?);
????if?(ds.Tables.Count?==?0)?{?return;?}
????string?nodeList?=?JsonConvert.SerializeObject(?ds?);
????context.Response.Write(?nodeList?);
????context.Response.End(?);
}

遞歸樹

var?tree?=?new?Ext.tree.TreePanel({
????title:?"Simple?Tree",
????renderTo:?Ext.getBody(),
????width:?200,
????height:?150,
????store:?store
});

var?px?=?100;
function?printMessage(node,?px)?{
????var?msg?=?"<div?style='margin-left:"?+?String(px)?+?"px;'>"?+?node.get("id")?+?"："?+?node.get("text")?+?"</div>"
????var?p?=?document.createElement("p");
????p.innerHTML?=?msg;
????document.body.appendChild(p);
????if?(node.childNodes)?{
????????for?(var?i?=?0;?i?<?node.childNodes.length;?i++)?{
????????????px?+=?(i?>?0???0?:?100);
????????????printMessage(node.childNodes[i],?px);
????????}
????}
}

printMessage(tree.getRootNode(),?px);

表格樹（自定義字段）

可以自定義節點的屬性，這需要在數據模型上定義字段。，然后在樹中使用xtype: "treecolumn"將樹配置為表格樹。

Ext.define("treeModel",?{
????extend:?"Ext.data.Model",
????fields:?[
????????{?name:?"text",?type:?"string"?},
????????{?name:?"myText",?type:?"string"?}
????],
});

var?store?=?new?Ext.data.TreeStore({
????model:?"treeModel",
????root:?{
????????text:?"根",
????????id:?"01",
????????myText:?"sencha",
????????children:?[
????????????{?text:?"哲學",?id:?"0101",?myText:?"philosophy",?leaf:?true?},
????????????{?text:?"數理",?id:?"0102",?myText:?"mathematics",?leaf:?true?},
????????????{?text:?"英語",?id:?"0103",?leaf:?true,?myText:?"english",?leaf:?true?}
????????]
????}
});

var?tree?=?new?Ext.tree.TreePanel({
????title:?"Simple?Tree",
????renderTo:?Ext.getBody(),
????width:?350,
????height:?250,
????enableColumnResize:?true,
????columns:?[
????????{?xtype:?"treecolumn",?text:?"text",?dataIndex:?"text"?},
????????{?text:?"myText",?dataIndex:?"myText"?}
????],
????store:?store,
????listeners:?{
????????itemclick:?function?(view,?node)?{
????????????Ext.Msg.alert('',?node.get("myText"));
????????}
????}
});

復選框樹

以下代碼結合了復選框事件，當某個父節點的復選框的狀態發生改變的時候，通過函數遞歸將其子節點的復選框狀態與父節點的復選框狀態設為一致。以下是在每個節點中配置了checked，你也可以在TreePanel例統一配置選擇模型為復選框模式。即 selModel:new Ext.selection.CheckboxModel({checkOnly:false})?

var?store?=?new?Ext.data.TreeStore({
????root:?{
????????text:?"根",
????????id:?"01",
????????checked:?false,
????????children:?[
????????????{
????????????????text:?"哲學",?id:?"0101",?leaf:?false,?checked:?false,
????????????????children:?[
????????????????????{
????????????????????????text:?"測試",?id:?"010101",?leaf:?false,?checked:?false,
????????????????????????children:?[
????????????????????????????{?text:?"測試",?id:?"01010101",?leaf:?true,?checked:?false?},
????????????????????????????{?text:?"測試",?id:?"01010102",?leaf:?true,?checked:?false?}
????????????????????????]
????????????????????},
????????????????????{?text:?"測試",?id:?"010102",?leaf:?true,?checked:?false?}
????????????????]
????????????},
????????????{?text:?"數理",?id:?"0102",?leaf:?true,?checked:?true?},
????????????{?text:?"英語",?id:?"0103",?leaf:?true,?checked:?false?}
????????]
????}
});
?
var?tree?=?new?Ext.tree.TreePanel({
????title:?"Simple?Tree",
????renderTo:?Ext.getBody(),
????width:?250,
????height:?250,
????store:?store,
????listeners:?{
????????checkchange:?function?(node,?isChecked)?{
????????????if?(node.childNodes.length?>?0)?{?changeChecked(node.childNodes,?isChecked)?}
????????????//嵌套了遞歸函數
????????????function?changeChecked(childs,?isChecked)?{
????????????????for?(var?index?in?childs)?{
????????????????????childs[index].set("checked",?isChecked);
????????????????????if?(childs[index].childNodes.length?>?0)?{
????????????????????????arguments.callee(childs[index].childNodes,?isChecked);
????????????????????}
????????????????}
????????????};
????????}
????}
});?

?

無限極下拉樹?

Ext.define("Ext.Yin.comboboxtree",?{
????extend:?"Ext.form.field.Picker",
????//注冊自定義組件的alias，即為組件綁定xtype，此處xtype為comboboxtree
????alias:?"widget.comboboxtree",
????requires:?["Ext.tree.Panel"],
????textVal:?[],
????hideVal:?[],
????paVal:[],???
????initComponent:?function?()?{
????????var?self?=?this;
????????Ext.apply(self,?{
????????????fieldLabel:?self.fieldLabel,
????????????labelWidth:?self.labelWidth
????????});
????????self.callParent();
????},
????//查找被選中節點的祖先節點，只返回第一層的ID
????geterRootChildID:?function?(r,?id)?{
????????while?(true)?{
????????????if?(r.get("parentid").tostring()?==?"")?{
????????????????return?id;
????????????}
????????????id?=?r.get("id");
????????????r?=?r.parentnode;
????????}
????},
????//查找該節點上的所有被選中的祖先節點中最上層的那個節點;
????getGrandaStateID:?function?(r)?{
????????var?self?=?this;
????????var?selction?=?self.picker.getSelectionModel();?????
????????var?id?=?"NAN";
????????while?(true)?{
????????????if?(r.get(self.paValueField).toString()?==?"")?{
????????????????return?id;
????????????}
????????????if?(selction.isSelected(r))?{
????????????????id?=?r.get(self.valueField);
????????????}
????????????r?=?r.parentNode;
????????}
????},
????checkControl:?function?()?{
????????var?self?=?this;
????????self.textVal?=?[];
????????self.hideVal?=?[];
????????var?records?=?self.picker.getSelectionModel().selected;
????????records.each(function?(record)?{
????????????self.textVal.push(record.get(self.displayField));?//?key
????????????self.hideVal.push(record.get(self.valueField));?//?value
????????});
????????self.setValue(self.textVal.join(','));?//?顯示給用戶看到的文本
????},
????createPicker:?function?()?{
????????var?self?=?this;
????????self.picker?=?new?Ext.tree.Panel({
????????????height:?300,//不要在外部配置comboboxtree的height
????????????autoScroll:?true,
????????????floating:?true,
????????????focusOnToFront:?false,
????????????shadow:?true,
????????????ownerCt:?this.ownerCt,
????????????useArrows:?true,
????????????store:?self.store,
????????????rootVisible:?false,
????????????displayField:?self.displayField,
????????????valueField:?self.valueField,
????????????paValueField:?self.paValueField,
????????????getPa:?self.getPa,
????????????selModel:?self.selModel,
????????????resizable:?self.resizableTree????????????
????????});
????????self.picker.on({
????????????//選擇發生變化時，此時需要將選中后又取消了選擇的節點從文本框、textVal、hideVal中移除
????????????selectionchange:?function?()?{
????????????????self.checkControl();
????????????},
????????????deselect:?function?(selmodel,?deRecord,?)?{???????????
????????????????var?index?=?self.paVal.indexOf(deRecord.get(self.valueField));
????????????????if?(index?!=?-1)?{
????????????????????//從數組中移除自身權限
????????????????????self.paVal.splice(index,?1);????????????????
????????????????}
????????????????var?selction?=?self.picker.getSelectionModel();
????????????????//如果子節有權限，則將自身權限移交子節
????????????????if?(deRecord.hasChildNodes())?{
????????????????????var?chids?=?deRecord.childNodes;
????????????????????chids.forEach(function?(rec)?{
????????????????????????if?(selction.isSelected(rec))?{
????????????????????????????self.paVal.push(rec.get(self.valueField));
????????????????????????}
????????????????????});
????????????????}
????????????},
????????????select:?function?(tree,?record,?item,?index,?e,?options)?{
????????????????//多選
????????????????if?(self.nodeMoreSelect)?{
????????????????????self.checkControl();
????????????????}
????????????????????//單選
????????????????else?{
????????????????????self.textVal?=?[];
????????????????????self.hideVal?=?[];
????????????????????self.textVal.push(record.get(self.displayField));?//key
????????????????????self.hideVal.push(record.get(self.valueField));?//?value
????????????????????self.setValue(record.get(self.displayField));?//?顯示給用戶看到的文本
????????????????}
????????????????//權限模式，只獲取被賦予了權限的節點其上層的權限，上層的權限必然高于子節點的權限
????????????????if?(self.getPa)?{
????????????????????var?selction?=?self.picker.getSelectionModel();
????????????????????if?(record.hasChildNodes())?{
????????????????????????var?chids?=?record.childNodes;
????????????????????????//賦予了當前被點擊節點的權限則應刪除當前節點的所有子節的權限
????????????????????????chids.forEach(function?(rec)?{
????????????????????????????var?index?=?self.paVal.indexOf(rec.get(self.valueField));
????????????????????????????if?(index?!=?-1)?{
????????????????????????????????self.paVal.splice(index,?1);
????????????????????????????}
????????????????????????});
????????????????????}?????????????
????????????????????
????????????????????var?selectedPaID?=?self.getGrandaStateID(record);????????????????????
????????????????????var?index?=?self.paVal.indexOf(record.get(self.valueField));
????????????????????//賦予了當前節點的祖先節點權限則將祖先節點的權限添加到數組，同時從數組中移除自身的權限
????????????????????if?(selectedPaID?!=?"NAN")?{
????????????????????????var?PaIndex?=?self.paVal.indexOf(selectedPaID);
????????????????????????if?(PaIndex?==?-1)?{
????????????????????????????self.paVal.push(selectedPaID);
????????????????????????}
????????????????????????if?(index?!=?-1)?{
????????????????????????????self.paVal.splice(record.get(self.valueField),1);????????????
????????????????????????}
????????????????????}
????????????????????????//否則將自身權限添加到數組
????????????????????else?{
????????????????????????self.paVal.push(record.get(self.valueField));????????????
????????????????????}
????????????????????
????????????????}
????????????}
????????});
????????return?self.picker;
????},
????alignPicker:?function?()?{
????????var?me?=?this,
????????????picker,?isAbove,?aboveSfx?=?'-above';
????????if?(this.isExpanded)?{
????????????picker?=?me.getPicker();
????????????if?(me.matchFieldWidth)?{
????????????????picker.setWidth(me.bodyEl.getWidth());
????????????}
????????????if?(picker.isFloating())?{
????????????????picker.alignTo(me.inputEl,?"",?me.pickerOffset);?//?""->tl
????????????????isAbove?=?picker.el.getY()?<?me.inputEl.getY();
????????????????me.bodyEl[isAbove???'addCls'?:?'removeCls'](me.openCls?+?aboveSfx);
????????????????picker.el[isAbove???'addCls'?:?'removeCls'](picker.baseCls?+?aboveSfx);
????????????}
????????}
????}
});

引入擴展類后再創建它的實例?

Ext.onReady(function?()?{

????//創建model
????Ext.define("trees",?{
????????extend:?"Ext.data.Model",
????????//對應數據庫表的字段
????????fields:?['ID',?"Text",?"ParentID"]
????});

????//創建Store
????Ext.create("Ext.data.TreeStore",?{
????????storeId:?"comboStore",
????????model:?"trees",
????????proxy:?{
????????????type:?"ajax",
????????????url:?"AdminColumnHandler.ashx",
????????????extraParams:?{?PID:?0?},
????????????reader:?{
????????????????type:?'json',
????????????????root:?'ds'
????????????}
????????},
????????listeners:?{
????????????beforeexpand:?function?(node)?{
????????????????if?(node.get('ID'))?{?this.proxy.extraParams.PID?=?node.get('ID');?}
????????????}
????????},
????????autoLoad:?true
????});

????Ext.onReady(function?()?{
????????Ext.create("Ext.Yin.comboboxtree",?{
????????????id:?'combo',
????????????width:?270,
????????????fieldLabel:?'無限極下拉樹',
????????????labelWidth:?100,
????????????store:?"comboStore",
????????????displayField:?"Text",//下拉框數據模型（data.Model）中的key
????????????valueField:?"ID",//下拉框數據模型（data.Model）中的value
????????????paValueField:?"ParentID",//可選項，下拉框數據模型（data.Model）中的父ID字段名，配置此項后會得到一個包含上層權限ID的數組，如果有子節被選中，則子節ID不會存入數組，因為上層權限高于子節。
????????????renderTo:?Ext.getBody(),
????????????selModel:?new?Ext.selection.CheckboxModel({?checkOnly:?false,?mode:?"SIMPLE"?}),//復選框模式，如果多選?mode改為SIMPLE，單選改為SINGLE
????????????nodeMoreSelect:?true,//是否支持多選
????????????resizableTree:?true,//是否可拖拽調整大小????????????????
????????});
????});

????var?nodeNames?=?form.findField("combo").textVal;//獲取被選中的key，返回key的數組，無key時length為0
????var?nodeIDs?=?form.findField("combo").hideVal;//獲取被選中的value，返回value的數組，無value時length為0
????var?grandIDs?=?form.findField("combo").paVal;//獲取被選中的value，返回value的數組，此數組雖然存儲了被選中的節點的ID，但如果節點的某上層節點被選中則只返回上層節點的ID，無value時length為0
????xtype:?comboboxtree//也可以通過xtype配置下拉樹

});

添加刪除節點

客戶端?

Ext.onReady(function?()?{

????//統一驗證提示信息
????Ext.QuickTips.init();
????Ext.form.TextField.prototype.msgTarget?=?"title";

????if?(Ext.getCmp("addWin"))?{?return;?}

????//樹模型
????Ext.define("TreeDataModel",?{
????????extend:?"Ext.data.Model",
????????fields:?[
????????????"ID",?"Text",?"ParentID"
????????]
????});

????//樹的存儲器
????Ext.create("Ext.data.TreeStore",?{
????????storeId:?"TreeDataStore",
????????model:?"TreeDataModel",
????????autoLoad:?true,
????????proxy:?{
????????????type:?"ajax",
????????????url:?"AdminColumnHandler.ashx",
????????????extraParams:?{?PID:?0?},
????????????reader:?{
????????????????type:?'json',
????????????????root:?'ds'
????????????}
????????},
????????listeners:?{
????????????beforeexpand:?function?(node)?{
????????????????if?(node.get("ID"))?{
????????????????????this.proxy.extraParams.PID?=?node.get("ID");
????????????????}
????????????}
????????}
????});

????//展開樹的按鈕
????Ext.create("Ext.button.Button",?{
????????text:?"選擇父欄目",?style:?"background:red;border:none;margin:10px?0;",?icon:?"../Image/expand-down.png",
????????renderTo:?"expandTree",
????????handler:?function?()?{
????????????this.border?=?false;
????????????var?treepanel?=?Ext.getCmp("dataTree");
????????????if?(!window.counter)?{?window.counter?=?1;?}
????????????if?(window.counter?%?2?==?0)?{
????????????????treepanel.show();//顯示樹
????????????????this.setIcon("../Image/expand-down.png");
????????????}
????????????else?{
????????????????treepanel.hide();//隱藏樹
????????????????this.setIcon("../Image/expand.png");
????????????}
????????????window.counter?+=?1;
????????}
????});

????//樹
????Ext.create("Ext.tree.Panel",?{
????????id:?"dataTree",
????????title:?"columnItem",
????????frame:?true,
????????useArrows:?true,
????????rootVisible:?false,
????????displayField:?"Text",
????????valueField:?"ParentID",
????????renderTo:?"dataTree",
????????store:?Ext.getStore("TreeDataStore"),
????????listeners:?{
????????????beforeitemcontextmenu:?function?(view,?node,?item,?index,?e)?{
????????????????e.preventDefault();
????????????????Ext.create("Ext.menu.Menu",?{
????????????????????id:?"contextMenu",
????????????????????border:?false,
????????????????????listeners:?{
????????????????????????//右鍵菜單失去激活后應銷毀它
????????????????????????deactivate:?function?()?{
????????????????????????????this.destroy();
????????????????????????}
????????????????????},
????????????????????items:?[
????????????????????????{
????????????????????????????text:?"編輯",?icon:?"../Image/edit_16px.ico",
????????????????????????????handler:?function?()?{
????????????????????????????????var?updateText?=?node.get("Text");
????????????????????????????????var?updateId?=?node.get("Id");

????????????????????????????????//創建表單
????????????????????????????????Ext.create("Ext.form.Panel",?{
????????????????????????????????????id:?"formEdit",
????????????????????????????????????style:?"padding-top:10px;",
????????????????????????????????????border:?false,
????????????????????????????????????defaultType:?"textfield",
????????????????????????????????????items:?[
????????????????????????????????????????{
????????????????????????????????????????????fieldLabel:?"",?name:?"inputText",?labelWidth:?40,?emptyText:?node.get("Text"),
????????????????????????????????????????????validator:?function?(va)?{
????????????????????????????????????????????????var?valueLen?=?$(document).getStrLen(va);
????????????????????????????????????????????????if?($(document).TestEmpty(va))?{?return?"不能有空值"?}
????????????????????????????????????????????????if?(valueLen?<?4)?{?return?"不能少于4個字符，中文算兩個字符"?}
????????????????????????????????????????????????if?(valueLen?>?50)?{?return?"不能大于50個字符，中文算兩個字符"?}
????????????????????????????????????????????????return?true;
????????????????????????????????????????????}
????????????????????????????????????????}
????????????????????????????????????],
????????????????????????????????????buttons:?[
????????????????????????????????????????{
????????????????????????????????????????????text:?"",?style:?"background:none;border:none;color:black;",?icon:?"../Image/cancel.ico",?maxWidth:?22,
????????????????????????????????????????????handler:?function?()?{
????????????????????????????????????????????????Ext.getCmp("winEdit").destroy();
????????????????????????????????????????????}
????????????????????????????????????????},
????????????????????????????????????????{
????????????????????????????????????????????text:?"",?style:?"background:none;border:none;color:black;",?icon:?"../Image/yes.ico",?maxWidth:?22,
????????????????????????????????????????????handler:?function?()?{
????????????????????????????????????????????????var?form?=?Ext.getCmp("formEdit").getForm();
????????????????????????????????????????????????var?v?=?form.findField("inputText").getValue();
????????????????????????????????????????????????if?(form.isValid())?{
????????????????????????????????????????????????????Ext.getCmp("winEdit").destroy();
????????????????????????????????????????????????????Ext.Ajax.request({
????????????????????????????????????????????????????????method:?"post",
????????????????????????????????????????????????????????url:?"AdminColumnHandler.ashx",
????????????????????????????????????????????????????????params:?{?update:?"true",?updateId:?node.get("ID"),?updateText:?v?},
????????????????????????????????????????????????????????success:?function?(r)?{
????????????????????????????????????????????????????????????var?m?=?Ext.decode(r.responseText);
????????????????????????????????????????????????????????????Ext.Msg.alert("提示",?m.msg);
????????????????????????????????????????????????????????????//更新成功則在不刷新頁面的情況下立即更改節點的Text以便馬上可以看到修改后的效果
????????????????????????????????????????????????????????????if?(m.status?==?"1")?{
????????????????????????????????????????????????????????????????node.set("Text",?v);
????????????????????????????????????????????????????????????????node.commit();
????????????????????????????????????????????????????????????}
????????????????????????????????????????????????????????},
????????????????????????????????????????????????????????failure:?function?()?{
????????????????????????????????????????????????????????????Ext.Msg.alert("提示",?"http錯誤");
????????????????????????????????????????????????????????}
????????????????????????????????????????????????????});
????????????????????????????????????????????????}
????????????????????????????????????????????????else?{
????????????????????????????????????????????????????Ext.Msg.alert("",?"未通過驗證");
????????????????????????????????????????????????}
????????????????????????????????????????????}
????????????????????????????????????????}
????????????????????????????????????]
????????????????????????????????});

????????????????????????????????//創建彈出層
????????????????????????????????Ext.create("Ext.window.Window",?{
????????????????????????????????????id:?"winEdit",
????????????????????????????????????baseCls:?'my-panel-no-border',
????????????????????????????????????border:?false,?shadow:?false,?resizable:?false,?closable:?false,?draggable:?false,
????????????????????????????????????items:?Ext.getCmp("formEdit")
????????????????????????????????});

????????????????????????????????//彈出層顯示的坐標點
????????????????????????????????Ext.getCmp("winEdit").showAt(e.getPoint());
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????text:?"添加子項",?icon:?"../Image/add_16px.ico",
????????????????????????????handler:?function?()?{
????????????????????????????????var?addText?=?node.get("Text");
????????????????????????????????var?parentId?=?node.get("Id");

????????????????????????????????//創建表單
????????????????????????????????Ext.create("Ext.form.Panel",?{
????????????????????????????????????id:?"formEdit",
????????????????????????????????????style:?"padding-top:10px;",
????????????????????????????????????border:?false,
????????????????????????????????????defaultType:?"textfield",
????????????????????????????????????items:?[
????????????????????????????????????????{
????????????????????????????????????????????fieldLabel:?"",?name:?"inputText",?labelWidth:?40,?emptyText:?"新欄目名稱",
????????????????????????????????????????????validator:?function?(va)?{
????????????????????????????????????????????????var?valueLen?=?$(document).getStrLen(va);
????????????????????????????????????????????????if?($(document).TestEmpty(va))?{?return?"不能有空值"?}
????????????????????????????????????????????????if?(valueLen?<?4)?{?return?"不能少于4個字符，中文算兩個字符"?}
????????????????????????????????????????????????if?(valueLen?>?50)?{?return?"不能大于50個字符，中文算兩個字符"?}
????????????????????????????????????????????????return?true;
????????????????????????????????????????????}
????????????????????????????????????????}
????????????????????????????????????],
????????????????????????????????????buttons:?[
????????????????????????????????????????{
????????????????????????????????????????????text:?"",?style:?"background:none;border:none;color:black;",?icon:?"../Image/cancel.ico",?maxWidth:?22,
????????????????????????????????????????????handler:?function?()?{
????????????????????????????????????????????????Ext.getCmp("winEdit").destroy();
????????????????????????????????????????????}
????????????????????????????????????????},
????????????????????????????????????????{
????????????????????????????????????????????text:?"",?style:?"background:none;border:none;color:black;",?icon:?"../Image/yes.ico",?maxWidth:?22,
????????????????????????????????????????????handler:?function?()?{
????????????????????????????????????????????????var?form?=?Ext.getCmp("formEdit").getForm();
????????????????????????????????????????????????var?v?=?form.findField("inputText").getValue();
????????????????????????????????????????????????var?parentId?=?node.get("ID");
????????????????????????????????????????????????if?(form.isValid())?{
????????????????????????????????????????????????????Ext.getCmp("winEdit").destroy();
????????????????????????????????????????????????????Ext.Ajax.request({
????????????????????????????????????????????????????????method:?"post",
????????????????????????????????????????????????????????url:?"AdminColumnHandler.ashx",
????????????????????????????????????????????????????????params:?{?add:?"true",?parentId:?parentId,?addText:?v?},
????????????????????????????????????????????????????????success:?function?(r)?{
????????????????????????????????????????????????????????????var?m?=?Ext.decode(r.responseText);
????????????????????????????????????????????????????????????Ext.Msg.alert("提示",?m.msg);
????????????????????????????????????????????????????????????//更新成功則在不刷新頁面的情況下立即創建新節點以便馬上可以看到效果
????????????????????????????????????????????????????????????if?(m.status?==?"1")?{
????????????????????????????????????????????????????????????????var?childNode?=?{
????????????????????????????????????????????????????????????????????Text:?v,
????????????????????????????????????????????????????????????????????ParentID:?parentId
????????????????????????????????????????????????????????????????};
????????????????????????????????????????????????????????????????node.appendChild(childNode);
????????????????????????????????????????????????????????????????node.commit();
????????????????????????????????????????????????????????????}
????????????????????????????????????????????????????????},
????????????????????????????????????????????????????????failure:?function?()?{
????????????????????????????????????????????????????????????Ext.Msg.alert("提示",?"http錯誤");
????????????????????????????????????????????????????????}
????????????????????????????????????????????????????});
????????????????????????????????????????????????}
????????????????????????????????????????????????else?{
????????????????????????????????????????????????????Ext.Msg.alert("",?"未通過驗證");
????????????????????????????????????????????????}
????????????????????????????????????????????}
????????????????????????????????????????}
????????????????????????????????????]
????????????????????????????????});

????????????????????????????????//創建彈出層
????????????????????????????????Ext.create("Ext.window.Window",?{
????????????????????????????????????id:?"winEdit",
????????????????????????????????????baseCls:?'my-panel-no-border',
????????????????????????????????????border:?false,?shadow:?false,?resizable:?false,?closable:?false,?draggable:?false,
????????????????????????????????????items:?Ext.getCmp("formEdit")
????????????????????????????????});

????????????????????????????????//彈出層顯示的坐標點
????????????????????????????????Ext.getCmp("winEdit").showAt(e.getPoint());
????????????????????????????}
????????????????????????}
????????????????????]
????????????????});
????????????????if?(Ext.getCmp("contextMenu"))?{?Ext.getCmp("contextMenu").showAt(e.getPoint());?}
????????????}
????????}
????});

});

服務端?

namespace?XXX
{
????public?void?ProcessRequest(?HttpContext?context?)
????{
????????context.Response.ContentType?=?"text/plain";
????????string?PID?=?context.Request["PID"];
????????string?update?=?context.Request["update"];
????????string?add?=?context.Request["add"];
????????string?msg?=?"更新失敗";
????????string?status?=?"0";

????????//欄目樹
????????if?(!string.IsNullOrEmpty(?PID?))
????????{
????????????DataSet?ds?=?ColumnItem.GetList(?"parentId="?+?PID?);
????????????string?treeDataStr?=?JsonConvert.SerializeObject(?ds?);
????????????context.Response.Write(?treeDataStr?);
????????}

????????//更新欄目
????????else?if?(!string.IsNullOrEmpty(?update?))
????????{
????????????int?ID?=?int.Parse(?context.Request["updateId"].ToString(?)?);
????????????string?Text?=?context.Request["updateText"];
????????????ColumnItem?c?=?new?ColumnItem(?ID?);
????????????c.Text?=?Text;
????????????try
????????????{
????????????????c.Update(?);
????????????????msg?=?"更新成功";
????????????????status?=?"1";
????????????}
????????????finally
????????????{
????????????????context.Response.Write(?"{msg:'?"?+?msg?+?"?',status:'"?+?status?+?"'}"?);
????????????}
????????}

????????//增加欄目
????????else?if?(!string.IsNullOrEmpty(?add?))
????????{
????????????int?parentId?=?int.Parse(?context.Request["parentId"].ToString(?)?);
????????????string?addText?=?context.Request["addText"];
????????????ColumnItem?c?=?new?ColumnItem(?);
????????????c.Text?=?addText;
????????????c.ParentID?=?parentId;
????????????try
????????????{
????????????????c.Add(?);
????????????????msg?=?"添加成功";
????????????????status?=?"1";
????????????}
????????????finally
????????????{
????????????????context.Response.Write(?"{msg:'?"?+?msg?+?"?',status:'"?+?status?+?"'}"?);
????????????}
????????}

????????context.Response.End(?);
????}
} View Code

其它問題

1.刪除節點圖標

在每一個節點上配置一個iconCls? : 'no-icon'，使用css統一祛除：.no-icon {display:none;}。

2.復選框實現單選

Ext.selection.CheckboxModel本身有這個單選的配置，selModel: new Ext.selection.CheckboxModel({ checkOnly: false, mode: "SINGLE" })。

?

Javascript - 學習總目錄?

轉載于:https://www.cnblogs.com/myrocknroll/p/7163764.html

總結

以上是生活随笔為你收集整理的Javascript - ExtJs - TreePanel组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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