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