extjs4 tree 父子节点联级勾选，半选节点半透明处理

1.extjs3有节点半选，有node.getUI（）

node.getUI().toggleCheck(parentChk);//节点选中状态
node.getUI().checkbox.indeterminate = true; //半选中状态
node.getUI().checkbox.indeterminate = false;取消半选中状态

extjs4中没有。因此对于节点的子节点未全部选中，复选框须做区别显示的问题，常规API中找不到对应方式方法。参考CSDN上处理节点disable的显示处理方法，做类似处理。

参考链接：http://blog.csdn.net/kunoy/article/details/7930045

2.父子节点联级勾选，网上有说用fireEvent( String eventName, Object... args )递归触发事件，反正我这么处理是没有效果，做不到所有父子节点都联级，变通一下用递归方法处理也可以解决此问题。

思路：直接改js生成页面css。因为extjs在节点收缩展开时都有对节点css做更改，所以在收缩时，展开后都要处理一下节点及其子节点的样式（此方式效果不理想，有延迟的迹象）。

后记：重定义源码来解决显示问题，只需要修改Ext.tree.Column中的treeRenderer函数即可,能完美解决半选中的显示问题。

原思路代码展示：

//我这里用的是treeStore，其实直接用treePanel也是一样的
treeStore.on('itemcollapse', function (node,opt) {setNode(treeStore,node,node.isHalfSelected)}, treeStore);
treeStore.on('afteritemexpand', function (node,opt) {setNode(treeStore,node,node.isHalfSelected);setChildStyle(treeStore,node)}, treeStore);
treeStore.on('checkchange', function (node, checked, opt) {treeStoreSelectedSon(node,checked);treeStoreSelectedFather(node,checked);}, treeStore);
    //递归选子节点    
    var treeStoreSelectedSon = function(node,checked) 
    {              
           //node.expand();
           node.isHalfSelected = false;
           node.eachChild(function(child) {         //循环下一级的所有子节点 
                  if (null != child.get('checked')) //这里这么写是因为后台有些节点的checked没赋值，其在web上不显示复选框，这里就过滤掉对它们
                  {
                        child.set('checked', checked);       //选中 
                        treeStoreSelectedSon(child,checked);          //递归选中子节点
                  }                                       
           });  
    }   
    
    //递归选父节点    
    var treeStoreSelectedFather = function(node,checked) 
    {
        var parent = node.parentNode;   //获取父节点 
        var flag = false;           
        var hasUnCheckedChild = false;
        var isHalfSelected = false;
        if (null != parent) {                 //是否有子节点            
          parent.eachChild(function(child) {         //循环下一级的所有子节点 
                    
                  if (child.get('checked') == true)
                  {
                        flag = true;
                        if (child.isHalfSelected)
                        {
                              isHalfSelected = true;
                        }
                  } 
                  else if (child.get('checked') == false)
                  {
                        hasUnCheckedChild = true;
                  }
           });

             parent.set('checked', flag);
             if ((flag && hasUnCheckedChild) || isHalfSelected)
             {
                   parent.isHalfSelected = true;
                   setNode(codeChangeTree,parent,true);
             }
             else
             {
                   parent.isHalfSelected = false;
                   setNode(codeChangeTree,parent,false);
             }
             treeStoreSelectedFather (parent,flag);
                       
        } 
    } 

function setNode(tree,node,value){
        var checkbox=getCheckbox(tree,node);
        //checkbox.disabled=value;
        //半选中状态
        if (node.isHalfSelected != null)
        {
            if(value==true)
            {
                checkbox.className=checkbox.className.replace('Diy-mask','')+' Diy-mask';
            }
            //取消半选中
            else
            {
                checkbox.className=checkbox.className.replace('Diy-mask','');
            }
        }        
    }
    
    function getCheckbox(tree,node){
        var td=tree.getView().getNode(node).firstChild.firstChild;
        var checkbox=td.getElementsByTagName('input')[0];
        return checkbox;
    } 
    
    function setChildStyle(tree,node) 
    {          
        if (node.isExpanded())
        {
            node.eachChild(function(child) {         //循环下一级的所有子节点                      
                  if (child.isHalfSelected != null)
                  {
                        var checkbox=getCheckbox(tree,child);
                         //半选中状态
                      if(child.isHalfSelected == true)
                      {                     
                           checkbox.className=checkbox.className.replace(' Diy-mask','')+' Diy-mask';
                      }
                        //取消半选中
                      else
                      {
                          checkbox.className=checkbox.className.replace(' Diy-mask','');
                      }              
                      setChildStyle(tree,child);
                  }                     
            });
        }           
    }

css

.Diy-mask {
    opacity: 0.5;                   //chrome
    z-index: 100;
    filter:alpha(opacity=50);  //IE必须加这句
   -moz-opacity: 0.5;             //火狐    
}

----------------------------------------------------------华丽分割线，以下是一些extjs零碎-------------------------------------------------------------------------

另附更换树叶子节点图标的css，直接放到css中即可，但是css要放到extjs css之后引入，目的是覆盖extjs css中的样式。

.x-tree-icon-leaf{
 background-image:url(../images/test.png);
}

更换进度条样式，对进度条的字体加粗，居中显示

.x-progress-text {
  overflow: hidden;
  position: absolute;
  padding: 0 5px;
  height: 14px;
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  text-align: center; 
}

树节点被选中后的样式，节点被选中后文字呈蓝色

.x-tree-checked{
text-decoration:none !important;;
color:blue !important;
}

标签水平垂直居中样式

.lableCentre{
    line-height:20px;
    vertical-align:middle;
    font-weight:bold;
}
//引用
{
  xtype: 'label',
  id : 'testLabel',
  text : '',
  cls : 'lableCentre'
}

请求大量数据时，param中参数过长，用get请求浏览器会报错，需要post请求

 proxy: {
        type: 'ajax',
        url: basePath + 'TestSelect?parameter=getTestList',
        actionMethods: { read: 'POST' },//post设置
        reader: {
            type: 'json',            
            idProperty: 'name'
        }
    },

树中文本可以被选中用于复制粘贴

viewConfig:{   
           enableTextSelection:true  
},

--OVER