Ext2.0含有checkbox的树状菜单

来源:互联网 发布:窥一叶而知秋 编辑:程序博客网 时间:2024/05/17 08:49
在网上看到有很多人都重新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();     })