ext 树 树选择模式.docVIP

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