extjs4.1实现tree节点checkbox disable的方法探讨

       需要实现的效果如图：

       当然这是用extjs3做出的效果，在3里面直接node.ui.checkbox.disabled=true即可，如果设置节点就用node.disable();
       但是现在问题就是在extjs4.1里面，就是找不到这个方法（反正我翻了很多遍api，就是没找到，如果你找到了，请告诉我一声，下面的方法可以直接路过了，嘿嘿、、、）。

       先说说思路，如果你用firefox看extjs3.x实现disable的dom变化就会发现这个东西：

       当某个组件设置disable后class就会多这个样式，一查看该样式你就明白了：

.x-masked {
    overflow: hidden !important;
}
}.ext-el-mask {
    background-color: #ccc;
}
.ext-el-mask {
    z-index: 100;
    position: absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=50);
    width: 100%;
    height: 100%;
    zoom: 1;
}

        关键是ext-el-mask这个样式，并且上图中蓝色的那个div层就是让组件变模糊的那个东西，好了，到这里我的思路就是自己定义一个样式，并且在方法里面添加该样式到组件上，这样效果就有了，具体代码如下，简单的不得了，不过缺陷太多：

.Diy-mask {
    opacity: 0.5;
    z-index: 100;
}
//-------------------------------
function setNode(tree,node,value){
    var checkbox=getCheckbox(tree,node);
    checkbox.disabled=value;
    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;
} 

    代码我就不具体解释了，应该都看得懂，用法就是：

setNode(tree,node,true) ---相当于---node.checkbox.disable();
setNode(tree,node,false) ---相当于---node.checkbox.enable();

      下面说说缺陷：

       1、不能独立设置某节点，这里需要的参数是tree,node,value，如果可以不要tree这个参数，那么这个方法就可以写到node的方法里面了，直接调用node.disable()什么的就得了，但是为了能够获取checkbox,不得不用tree.getView().getNode(node)，返回一个节点的html片段，好了，如果extjs4.1的api里面给个方法比如node.getEl()什么的也就阿弥陀佛了，问题就更简单方便了。

       2、实现的最终效果如下：

       效果是不是没extjs3.x的好，肯定了，因为3.x的checkbox disable不是用这种方法实现的，它应该采用的是直接把那个√换成模糊的，并不是在整个checkbox上加一层半透明的div，我是这样猜测的，具体没去研究，不过按这个思路应该也是好解决的。

     记：记下此篇主要是在几个论坛发了这个问题，希望有人解决了，可是等了大半时间，没人有实质性的解决办法，网上搜也搜不到类似的问题，无赖自己先实现个效果再说，呵呵、、、

 

2012-09-21更新：

        添加node方法如下：

Ext.apply(Ext.data.Model.prototype,{
	disabled:true,
	getNodeUI:function(treeid){
		var me=this;
		var checkbox;
		var nodeui;
		var tree=Ext.getCmp(treeid);
		if(tree){
			nodeui=tree.getView().getNode(me).firstChild.firstChild;
		}else{
			Ext.ComponentManager.all.each(function(key,value){
				var Type=value.getXType();
				if(Type=="treepanel"&&value.getView().getNode(me)){
					nodeui=value.getView().getNode(me).firstChild.firstChild;
				}
			});
		}
		checkbox=nodeui.getElementsByTagName('input')[0];
		return [nodeui,checkbox];
	},
	getCheckbox:function(treeid){
		var checkbox=this.getNodeUI(treeid)[1];
		return {
			disabled:checkbox.disabled,
			disable:function(){	
				checkbox.disabled=true;
				checkbox.className=checkbox.className.replace('Diy-mask','')+' Diy-mask';
			},
			enable:function(){
				checkbox.disabled=false;
				checkbox.className=checkbox.className.replace('Diy-mask','');
			}
		}
	},
	disable:function(treeid){
		this.disabled=true;
		var nodeui=this.getNodeUI(treeid)[0];	
		nodeui.className=nodeui.className.replace('Diy-mask','')+' Diy-mask';	
	},
	enable:function(treeid){
		this.disabled=false;
		var nodeui=this.getNodeUI(treeid)[0];	
		nodeui.className=nodeui.className.replace('Diy-mask','');
	}
});

使用方法：

node.disabled    //获取节点状态
node.disable()   //设置节点不可用
node.enable()    //设置节点可用
node.getCheckbox().disabled   //获取节点checkbox状态
node.getCheckbox().disable()  //设置节点checkbox不可用
node.getCheckbox().enable()   //设置节点checkbox可用

注意事项：

       使用node.disable(),node.enable(),node.getCheckbox()时，可以带树的ID参数，以方便快速获取到该节点，也可不带，此时将在全界面搜索该tree面板，满足条件后返回。

作者： kunoy

出处： http://blog.csdn.net/kunoy

申明：作者写博是为了总结经验，和交流学习之用。
如需转载，请尽量保留此申明，并在文章页面明显位置给出原文连接。谢谢！