Extjs _ extjs

TreePanel + chekBox: Select All and clear selected items. You must have seen this effect during your learning and usage. Next, let's introduce the implementation process and details in detail. If you are interested, refer to the following: The Code is as follows:

// Tree
Var treePanel = new Ext. tree. TreePanel ({
Id: 'ptree ',
Region: 'west ',
Layout: 'anchor ',
Border: false,
RootVisible: false,
Root :{},
Listeners :{
Render: function (){
AuthorityTree (treePanel);/* render tree */
},
Checkchange: function (node, state ){
If (node. parentNode! = Null ){
// Select a subnode to select the corresponding parent node
Var pNode = node. parentNode;
If (state | treePanel. getChecked (id, pNode) = ""){
PNode. ui. toggleCheck (state); // trigger the parent node to be selected
PNode. attributes. checked = state;
}
}
TreeId = node. attributes. id;
TreeName = node. attributes. text;
}
}
});
// OPERATION button
Tbar :[{
Id: 'btnqingkong ',
Text: 'clear ',
IconCls: 'winupdate-icon ',
Handler: function (){
Var nodes = Ext. getCmp ('ptree '). getChecked ();
If (nodes & nodes. length ){
For (var I = 0; I <nodes. length; I ++ ){
// Set the UI status to unselected
Nodes [I]. getUI (). toggleCheck (false );
// Set the node attribute to the unselected status
Nodes [I]. attributes. checked = false;
}
}
}
},{
Id: 'btnquanxuany ',
Text: 'select all ',
IconCls: 'winupdate-icon ',
Handler: function (){
Var nodeT = Ext. getCmp ('ptree '). getRootNode ();
TreeCheckTrue (nodeT );
}
}]
/**
* Select all checkTree
*/
Var treeCheckTrue = function (node)
{
Node. eachChild (function (child ){
Child. getUI (). toggleCheck (true );
Child. attributes. checked = true;
TreeCheckTrue (child );
});
}
/**
* CheckTree clearing
*/
Var treeCheckfalse = function (tree)
{
Var nodes = tree. getChecked ();
If (nodes & nodes. length ){
For (var I = 0; I // Set the UI status to unselected
Nodes [I]. getUI (). toggleCheck (false );
// Set the node attribute to the unselected status
Nodes [I]. attributes. checked = false;
}
}
}