在网上看到有很多人都重新Ext2.0里的TreeCheckNodeUI,重做一个widget,其实在Ext.tree.TreePanel本来就有帮我们想到了checkbox树状菜单的问题,也给我们留了一些借口,事件,下面是我在Ext.tree.TreePanel上扩展的代码
/** * @class Ext.tree.CheckboxTree * 含有checkbox的树状菜单 * @param {Object} config中的参数 * el 必输入 * dataUrl 必输入 * rootText 必输入 * rootId 默认值为0 */ Ext.tree.CheckboxTree=function(config){ var myTreeLoader=new Ext.tree.TreeLoader({ dataUrl:config.dataUrl }); myTreeLoader.on("beforeload", function(treeLoader, node) { treeLoader.baseParams.check = node.attributes.checked; }, this); Ext.tree.CheckboxTree.superclass.constructor.call(this,{ animate:true, enableDD:true, autoScroll:true, useArrows:true, containerScroll:true, dropConfig: {appendOnly:true}, el:config.el, root:new Ext.tree.AsyncTreeNode({ text:config.rootText, draggable:false, checked:true, id:'0'||config.rootId }), loader:myTreeLoader }); new Ext.tree.TreeSorter(this,{folderSort:true}); this.on({ 'checkchange':function(node,checked){ var parentNode=node.parentNode; if(checked){ /** * 节点为真时,此节点的子节点,判断此节点的父节点时,判断父节点的子节点是否全部为 * 真,如果全部为真,则此父节点为真,如果不为真则不变 全部为真 */ var childNodes=node.childNodes; for(var i=0;i<childNodes.length;i++){ var childNode=childNodes[i]; if(!childNode.attributes.checked){ childNode.ui.toggleCheck(); } } /** * 此如果此节点又父节点,则判断此父节点的子节点是否全为真 如果全为真则此父节点也为真 */ if(parentNode&&!parentNode.attributes.checked){ var nodes=parentNode.childNodes for(var i=0;i<nodes.length;i++){ /** * 当一个父节点的子节点中的一个节点为false是,此复节点应为false */ if(!nodes[i].attributes.checked){ /** * 如果此父节点为真时,改变父节点的状态 */ if(parentNode.attributes.checked){ parentNode.attributes.checked=false; parentNode.ui.toggleCheck(); } return ; } } parentNode.attributes.checked=true; parentNode.ui.toggleCheck(); } }else{ /** * 如果为false时, */ if(parentNode&&parentNode.attributes.checked){ parentNode.attributes.checked=false; parentNode.ui.toggleCheck(); } } } }); } Ext.extend(Ext.tree.CheckboxTree, Ext.tree.TreePanel,{ /** * 展开根节点 * @return 返回根节点 */ expandRoot:function(){ this.root.expand(); return this.root;} }); 下面是代码的调用
Ext.onReady(function(){ var tree2=new Ext.tree.CheckboxTree({ el:'tree2', dataUrl:'../hf/treeMenu.do?action=checkboxMenu', rootText:'asdf' }); tree2.render(); tree2.expandRoot(); })