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(); })
- Ext2.0含有checkbox的树状菜单
- EXT2.0 checkbox树的扩展
- ext2 'checkbox'的单击事件
- 含有CheckBox的ListView
- ChTreeView 含有Checkbox 的TreeView
- Ext2--含有树的下拉框(代码+图)
- EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
- EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
- 简单的树状菜单
- 树状菜单的运用
- Ext2.0的EditorGridPanel
- ExtJs动态生成含有checkBox的Tree
- Android自定义含有CheckBox的Adapter
- checkbox,联动菜单的效果
- EXT2.2 简单的日期选择的菜单例子
- EXT2.2 菜单中日期选择的简单例子
- struts实现树状的菜单
- 动态树状菜单的使用
- 关于java使用javacomm20-win32实践总结
- 网络通讯更自由 谈Java串行端口技术协议
- 单页界面和 AJAX 模式
- 在Java中操作串口实现短信收发
- 疯狂的程序员66
- Ext2.0含有checkbox的树状菜单
- 命名规则
- jsp与servlet面试题
- java 串口通信
- 开始学习ruby
- IT员工招聘:把好心理这道关
- Debut of Hyper-V, departure of Gates usher[引导,展示,招待员] in new era for Microsoft
- EJB 学习笔记
- 测试一下TrackBack