ext 树 树选择模式
Ext树节点单选(转载自iteye)(2011-04-27 09:38:37)转载标签： 杂谈 分类： 随心网络
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
扩展的功能点有：
一、支持只对树的叶子进行选择
只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
二、支持对树的单选
只允许选择一个结点
使用时，只需在声明树时，加上属性 checkModel: "single" 既可
三、支持对树的级联多选
当选择结点时，自动选择该结点下的所有子结点，或该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
使用时，只需在声明树时，加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可
cascade ：级联选中所有父结点和子结点
parentCascade ：级联选中所有父结点
childCascade ：级联选中所有子结点
四、添加"check"事件
该事件会在树结点的checkbox发生改变时触发
使用时，只需给树注册事件,如：
tree.on("check",function(node,checked){...});
默认情况下，checkModel为 'multiple'，也就是多选；onlyLeafCheckable为false，所有结点都可选
使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.
例如：
Js代码
Java代码
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade', // 对树的级联多选
onlyLeafCheckable: false,//对树所有结点都可选
animate: false,
rootVisible: false,
autoScroll:true,
dwrCall:Tmplt.getTmpltTree,
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
tree.render();
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade', //对树的级联多选
onlyLeafCheckable: false,//对树所有结点都可选
animate: false,
rootVisible: false,
autoScroll:true,
loader: new Ext.tree.DWRTreeLoader({
dwrCall:Tmplt.getTmpltTree,
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
tree.render();
var tree = new Ext.tree.TreePanel({ el:'tree-ct', width:568, height:300, checkModel: 'cascade', // 对树的级联多选 onlyLeafCheckable: false,//对树所有结点都可选 animate: false, rootVisible: false, autoScroll:true, dwrCall:Tmplt.getTmpltTree, baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性 }), root: new Ext.tree.AsyncTreeNode({ id:'0' }) }); tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件 tree.render(); var tree = new Ext.tree.TreePanel({ el:'tree-ct', width:568, height:300, checkModel: 'cascade', //对树的级联多选 onlyLeafCheckable: false,//对树所有结点都可选 animate: false, rootVisible: false, autoScroll:true, loader: new Ext.tree.DWRTreeLoader({ dwrCall:Tmplt.getTmpltTree, baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性 }), root: new Ext.tree.AsyncTreeNode({ id:'0' }) }); tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件 tree.render();
需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,
如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } 就行了
Java代码
实现单选功能：
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
if(nodes[i].getUI().checkbox){
nodes[i].getUI().checkbox.checked = false;
nodes[i].attributes.checked=false;
}
}
}
}
}
}