ext树树选择模式（Exttreeselectionmodel）

ext 树树选择模式（Ext tree selection model）
Ext tree node radio (reproduced from iteye) (2011-04-27 09:38:37) reprint labels: Classification: Xpress network.
In ext1.x, trees do not have checkbox, but fortunately this functionality is provided in the 2.X version. In many applications, the use of trees with checkbox is still very common
Ext2.X provides a simple realization of the checkbox, but for some complex needs, such as: multiple cascade (selected parent node, optional in all its sub nodes and all parent nodes), radio and so on, and no Ext2.X help us
There are the most difficult to resolve the situation, when the tree is asynchronous time to cascade multiple choice, to achieve some difficulty
Here, through the expansion of Ext.tree.TreeNodeUI, these problems have been well resolved
Extending the checkbox function to Ext.tree.TreeNodeUI, the node information returned from the background does not need to include the checked attribute
The extended function points are:
One, support only leaves of the tree to choose
Only when the tree attribute leaf = true is returned, the node is checkbox optional
When used, just declare the tree, plus the attribute onlyLeafCheckable: true can be, the default is false
Two, support for the tree radio
Only one node is allowed
When you use it, you just need to declare the tree and add the attribute checkModel: "single"
Three, support for multiple cascade tree
When selecting the node, automatically select all nodes of the node, or the node all the parent node (except the root node), especially when the node supports asynchronous, not shown, have child nodes from the background, and then the check / uncheck
When used, just declare the tree, plus the attribute checkModel: "cascade" or "parentCascade" or "childCascade"
Cascade: cascade selects all parent and child nodes
ParentCascade: cascade selects all parent nodes
ChildCascade: cascade selects all child nodes
Four, add "check" event
The event triggers when the checkbox of the tree node changes
When you use it, you just need to register events for trees, such as:
Tree.on ("check", function (node, checked) {...};
By default, checkModel'multiple', onlyLeafCheckable false is selected; all nodes are optional.
How to use loader to add
baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} to both
For example:
Js code
Java code
Var tree = new Ext.tree.TreePanel ({)
El:'tree-ct',
Width:568,
Height:300,
CheckModel:'cascade', multiselect on tree / cascade
OnlyLeafCheckable: false, on the tree all nodes are optional / /
Animate: false,
RootVisible: false,
AutoScroll:true,
DwrCall:Tmplt.getTmpltTree,
BaseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI} / / add uiProvider attribute
}),
Root: new Ext.tree.AsyncTreeNode ({id:'0'})
});
Tree.on ("check", function (node, checked) {alert (node.text+ = +checked)}); / / registered "check" event
Tree.render ();
Var tree = new Ext.tree.TreePanel ({)
El:'tree-ct',
Width:568,
Height:300,
CheckModel:'cascade', multiselect on tree / cascade
OnlyLeafCheckable: false,
Are all the nodes on the tree / optional
Animate: false,
RootVisible: false,
AutoScroll:true,
Loader: new Ext.tree.DWRTreeLoader ({)
DwrCall:Tmplt.getTmpltTree,
BaseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}// add uiProvider attribute
}),
Root: new Ext.tree.AsyncTreeNode ({id:'0'})
});
Tree.on ("check", function (node, checked) {alert (node.text+ = +checked)}); / / registered "check" event
Tree.render ();
Var tree = new Ext.tree.TreePanel ({el:'tree-ct', width:568, height:300, checkModel:,'cascade', onlyLeafCheckable: / / on the tree multiselect cascade false, / / on the tree all nodes
are optional animate: false, rootVisible: false,
autoScroll:true dwrCall:, Tmplt.getTmpltTree, baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}} / / add uiProvider attribute), root: new Ext.tree.AsyncTreeNode ({id:'0'})} ("check"); tree.on, function (node, checked) {alert (node.text+ = +checked)}); / / registered "check"); VAR (event tree.render tree = new Ext.tree.TreePanel (width:568, height:300 {el:'tree-ct', checkModel:,'cascade', onlyLeafCheckable: / / on the tree multiselect cascade false, / / of all trees nodes are optional animate: false, rootVisible: false, autoScroll:true loader:, new Ext.tree.DWRTr EeLoader (dwrCall:Tmplt.getTmpltTree baseAttrs: uiProvider:
Ext.ux.TreeCheckNodeUI {, {uiProvider},}// add attribute root: new (Ext.tree.AsyncTreeNode) {id:'0'})}); tree.on ("check", function (node, checked) {alert (node.text+ = +checked)}); / / registered "check" event (tree.render);
It should be noted that the Tree used in the example uses the extension class of Ext.tree.DWRTreeLoader to load the background tree node, which is not different from the use of other loader,
If you use other loader, add the baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}
Java code
Radio function implementation:
This.on ('checkchange', this.check, this);
GetNodes:function (treePanel) {
Var startNode = treePanel.getRootNode (); Var r = [];
Var f = function () {
R.push (this);
};
StartNode.cascade (f);
Return r;
},
Check: function (node, bool) {
If (... Bool) {
Return;
}
If (this.checkModel=='single') {
Var nodes =this.getNodes (this);
If (nodes nodes.length>0) {
For (VaR i=0, len=nodes.length; i<len; i++) { If (nodes[i].id! =node.id) {
If (nodes[i].getUI ().Checkbox) {
Nodes[i].
getui (). checkbox.checked = false;
nodes [1]. attributes.checked = false;
}
}
}
}
}
}。