How to Implement Tree node checkbox disable in extjs4.1

Effects to be achieved

Of course, this is the result of using extjs3. In 3, you can directly set node. UI. checkbox. Disabled = true. If you set the node, you can use node. Disable ();
But now the problem is that in extjs4.1, this method is not found (I have searched the API many times, but it is not found. If you find it, please let me know, the following method can pass by directly ,,,).

Let's talk about the idea first. If you use Firefox to check whether the DOM of extjs3.x implements disable, you will find this thing:

When a component is set to disable, the class will have this style, and you will understand it as soon as you view the style:

.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;}

The key is the ext-el-mask style, and the blue Div layer is the one that makes the component blur. Well, my idea here is to define a style by myself, add the style to the component in the method, and the effect will be achieved. The specific code is as follows, which is very simple, but there are too many defects:

.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;} 

I will not explain the code in detail, but I should understand it all. The usage is:

Setnode (tree, node, true) --- equivalent to --- node. checkbox. Disable (); setnode (tree, node, false) --- equivalent to --- node. checkbox. Enable ();

The following describes the defects:

1. A node cannot be set independently. The required parameters are tree, node, and value. If you can skip the tree parameter, this method can be written to the node method, directly call node. disable () or something, but tree has to be used to get the checkbox. getview (). getnode (node) returns the HTML segment of a node. All right, if a method such as node is provided in the API of extjs4.1. getel () or something is actually Amitabha, and the problem is simpler and more convenient.

2. The final result is as follows:

Is the result not as good as extjs3.x? Yes, because 3. the checkbox disable of X is not implemented in this way. It should be replaced with a fuzzy √ directly, instead of adding a translucent Div to the entire checkbox, I guess this is the case. I didn't study it, but it should be a good solution based on this idea.

Note: I wrote down this article mainly because I posted this issue on several forums. I hope someone can solve it. However, after waiting for more than half of the time, no one has any substantive solution, similar problems cannot be found on the Internet. The rogue will achieve the same effect first ,,,

 

Updated on:

The method for adding a node is as follows:

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','');}});

Usage:

Node. disabled // get node status. disable () // set node unavailable for the node. enable () // set node availability. getcheckbox (). disabled // get node checkbox status. getcheckbox (). disable () // set node checkbox unavailable node. getcheckbox (). enable () // set node checkbox availability

Note:

Use node. disable (), node. enable (), node. when getcheckbox () is used, you can include the ID parameter of the tree to quickly obtain the node or not. In this case, the tree panel is searched on the whole interface and the tree panel is returned after the conditions are met.

Author:Kunoy Source:Http://blog.csdn.net/kunoy Statement:The authors write blogs to sum up experience and exchange learning.
If you need to reprint the statement, please keep it as much as possible and provide the original article connection clearly on the article page. Thank you!