extjs 設置TreePanel CheckBox三態選中

對於TreePanel的Node我們需求是：1.選中某個節點A的CheckBox，節點A的所有子節點全部選中；2.節點A的所有子節點如果都選中，則A節點選中；3.節點A的某些節點選中，某些節點不選中，則A節點處於半選狀態。如下圖所示：

如何來實現呢？

研究發現TreePanel的節點的Checkbox可發現通過node.getUI().checkbox可以獲取到checkbox。設置checkbox的checked屬性為true / false 可以設置checkbox選中或者非選擇，那么三態的半選中狀態如何設置呢？可以通過設置checkbox的indeterminate屬性為true，checked為false可以實現。因此，可以如下處理：

  <ext:TreePanel runat="server" ID="tree" RootVisible="false">
                 <Loader>
                     <ext:TreeLoader DataUrl="/Home/GetNode">
                         <BaseParams>
                             <ext:Parameter Name="pNodeId" Value="node.id" Mode="Raw">
                             </ext:Parameter>
                         </BaseParams>
                     </ext:TreeLoader>
                 </Loader>
                 <Root>
                     <ext:AsyncTreeNode NodeID="root" Expanded="true">
                     </ext:AsyncTreeNode>
                 </Root>
                 <Listeners>
                     <CheckChange Fn="NodeCheckChange" />
                     <ExpandNode Fn="ExpandNode" />
                 </Listeners>
             </ext:TreePanel>

 public ActionResult GetNode(string pNodeId)
         {
             if (pNodeId == "root")
             {
                 pNodeId = "";
             }
             TreeNodeCollection nodeList = new TreeNodeCollection();
             for (int i = 0; i < 5; i++)
             {
                 AsyncTreeNode node = new AsyncTreeNode
                 {
                     NodeID = pNodeId + "." + (i + 1),
                     Checked = ThreeStateBool.False,
                     Text = string.Format("Node{0}", i + 1)
                 };
                 nodeList.Add(node);
             }
             string json = nodeList.ToJson();
             return Content(json);
         }

<script type="text/javascript">
         //設置節點子級全部選中
         function SetChildNodeChecked(node) {
             var isChecked = node.attributes.checked;
             var childCount = node.childNodes.length;
             if (childCount > 0) {
                 for (var i = 0; i < childCount; i++) {
                     var child = node.childNodes[i];
                     var checkBox = child.getUI().checkbox;
                     child.attributes.checked = isChecked;
                     checkBox.checked = isChecked;
                     checkBox.indeterminate = false;
                     this.SetChildNodeChecked(child);
                 }
             }
         }
         //設置節點父節點選中狀態
         function SetParentNodeCheckState(node) {
             var parentNode = node.parentNode;
             if (parentNode != null) {
                 var checkBox = parentNode.getUI().checkbox;
                 var isAllChildChecked = true;
                 var someChecked = false;
                 var childCount = parentNode.childNodes.length;
                 for (var i = 0; i < childCount; i++) {
                     var child = parentNode.childNodes[i];
                     if (child.attributes.checked) {
                         someChecked = true;
                     }
                     else if (child.getUI().checkbox.indeterminate == true && child.getUI().checkbox.checked == false) {
                         someChecked = true;
                         isAllChildChecked = false;
                         break;
                     }
                     else {
                         isAllChildChecked = false;
                     }
                 }
                 if (isAllChildChecked && someChecked) {
                     parentNode.attributes.checked = true;
                     if (checkBox != null) {
                         checkBox.indeterminate = false;
                         checkBox.checked = true;
                     }
                 }
                 else if (someChecked) {
                     parentNode.attributes.checked = false;
                     if (checkBox != null) {
                         checkBox.indeterminate = true;
                         checkBox.checked = false;
                     }
                 }
                 else {
                     parentNode.attributes.checked = false;
                     if (checkBox != null) {
                         checkBox.indeterminate = false;
                         checkBox.checked = false;
                     }
                 }
 
                 this.SetParentNodeCheckState(parentNode);
             }
         }
         //選擇指標類型結點時的操作:取消當前選擇結點以外的其它結點的選中狀態
         function NodeCheckChange(node) {
             SetChildNodeChecked(node);
             SetParentNodeCheckState(node);
         }
 
         function ExpandNode(node) {
             SetChildNodeChecked(node);
         }
     </script>