需求：
在使用Ext.net的TreePanel時，我們需要使用節點的Checkbox關聯狀态：
當選中一個樹節點的Checkbox時，需要讓它的父節點設為選中，并同時選中他所有的子節點。
當取消一個樹節點的Checkbox選中狀态時，需要同時取消它所有子節點的選中狀态。
很多資料上作用node.getUI().checkbox.checked = true/flase;方式來設定節點checkbox的狀态，但這種方式在關聯的情況下容易出現一個問題，就是通過TreePanel1.getChecked();不能擷取到選中節點的值，是以建議使用node.ui.toggleCheck(checked)方法來處理。
但toggleCheck同樣存在一個問題：
check子節點時，使用parentNode.getUI().toggleCheck(true)選中父節點，會觸發父節點被選中的事件。需要這裡不需要它觸發父節點被選中事件，需要重定一下toggleCheck方法。
下面demo使用VS2010 + Ext.net 1.2版本實作，測試通過：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreePanelCheckBox.aspx.cs"
Inherits="ExtNet12Examples.TreePanel.TreePanelCheckBox" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreePanel 的Checkbox操作及父子級Checkbox關聯Demo</title>
<script type="text/javascript">
function checkchange(node, checked) {
if (checked) {
checkParentNode(node.parentNode, checked);
}
checkChildNode(node, checked);
}
function checkChildNode(node, checked) {
if (node == undefined) {
return;
}
node.attributes.checked = checked;
node.ui.toggleCheck(checked);
node.eachChild(function (child) {
checkChildNode(child, checked);
});
}
function checkParentNode(node, checked) {
if (node == undefined) {
return;
}
node.attributes.checked = checked;
node.ui.toggleCheck(checked);
checkParentNode(node.parentNode);
}
var getCheckedNodes = function () {
var msg = "",
selNodes = TreePanel1.getChecked();
Ext.each(selNodes, function (node) {
if (msg.length > 0) {
msg += ", ";
}
msg += node.text;
});
Ext.Msg.show({
title: "Selected Nodes",
msg: msg.length > 0 ? msg : "None",
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
Ext.override(Ext.tree.TreeNodeUI, {
toggleCheck: function (value) {
var cb = this.checkbox;
if (cb) {
cb.checked = (value === undefined ? !cb.checked : value);
// this.onCheckChange();
}
}
});
</script>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:TreePanel ID="TreePanel1" runat="server" Width="200" AutoScroll="true" ContainerScroll="true" Animate="false"
CollapseFirst="true" BodyStyle="background-color:#F1F7FE;" RootVisible="false">
<Root>
<ext:TreeNode runat="Server" Text="根" NodeID="root">
<Nodes>
<ext:TreeNode Text="test1" NodeID="test1" Checked="False" Expanded="true">
<Nodes>
<ext:TreeNode Text="c_test1" NodeID="c_test1" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test2" NodeID="c_test2" Checked="False" Expanded="true">
<Nodes>
<ext:TreeNode Text="cc_test1" NodeID="cc_test1" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="cc_test2" NodeID="cc_test2" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="cc_test3" NodeID="cc_test3" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="cc_test4" NodeID="cc_test4" Checked="False">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="c_test3" NodeID="c_test3" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test4" NodeID="c_test4" Checked="False">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="test2" NodeID="test2" Checked="False">
<Nodes>
<ext:TreeNode Text="c_test11" NodeID="c_test11" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test22" NodeID="c_test22" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test33" NodeID="c_test33" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test44" NodeID="c_test44" Checked="False">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="test3" NodeID="test3" Checked="False">
<Nodes>
<ext:TreeNode Text="c_test111" NodeID="c_test111" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test222" NodeID="c_test222" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test333" NodeID="c_test333" Checked="False">
</ext:TreeNode>
<ext:TreeNode Text="c_test444" NodeID="c_test444" Checked="False">
<Listeners>
</Listeners>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<CheckChange Fn="checkchange" />
</Listeners>
</ext:TreePanel>
<ext:Button ID="Button1" runat="server" Text="Submit">
<Listeners>
<Click Fn="getCheckedNodes" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
效果：
源碼：http://download.csdn.net/detail/llxchen/4533901
原下載下傳：http://download.csdn.net/detail/llxchen/4533696 有Bug，請勿下載下傳。
![在DOS下運作不了ipconfig指令[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)