转自：https://blog.csdn.net/iteye_7988/article/details/81886654

在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代码  
  1. var tree = new Ext.tree.TreePanel({
  2. el:'tree-ct',
  3. width:,
  4. height:,
  5. checkModel: 'cascade',   // 对树的级联多选
  6. onlyLeafCheckable: false,//对树所有结点都可选
  7. animate: false,
  8. rootVisible: false,
  9. autoScroll:true,
  10. dwrCall:Tmplt.getTmpltTree,
  11. baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性
  12. }),
  13. root: new Ext.tree.AsyncTreeNode({ id:'0' })
  14. });
  15. tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
  16. tree.render();
  17. var tree = new Ext.tree.TreePanel({
  18. el:'tree-ct',
  19. width:,
  20. height:,
  21. checkModel: 'cascade',   //对树的级联多选
  22. onlyLeafCheckable: false,//对树所有结点都可选
  23. animate: false,
  24. rootVisible: false,
  25. autoScroll:true,
  26. loader: new Ext.tree.DWRTreeLoader({
  27. dwrCall:Tmplt.getTmpltTree,
  28. baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性
  29. }),
  30. root: new Ext.tree.AsyncTreeNode({ id:'0' })
  31. });
  32. tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
  33. tree.render();

需要注意的是, 使用例子里的Tree
使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,

如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider:
Ext.ux.TreeCheckNodeUI } 就行了

Java代码  
  1. 实现单选功能：
  2. this.on('checkchange',this.check,this);
  3. getNodes:function(treePanel){
  4. var startNode = treePanel.getRootNode();
  5. var r = [];
  6. var f = function(){
  7. r.push(this);
  8. };
  9. startNode.cascade(f);
  10. return r;
  11. },
  12. check : function(node,bool) {
  13. if(!bool){
  14. return;
  15. }
  16. if(this.checkModel=='single'){
  17. var nodes =this.getNodes(this);
  18. ){
  19. ,len=nodes.length;i
  20. if(nodes[i].id!=node.id){
  21. if(nodes[i].getUI().checkbox){
  22. nodes[i].getUI().checkbox.checked = false;
  23. nodes[i].attributes.checked=false;
  24. }
  25. }
  26. }
  27. }
  28. }
  29. }

最新文章

  1. lua 面向对象编程类机制实现
  2. MySQL 数据库常用命令
  3. yourphp的eq作用
  4. 如何修改windows远程端口
  5. Qt Style Sheet实践（一）：按钮及关联菜单
  6. 微信电脑版也能用公众号自定义菜单 微信1.2 for Windows发布
  7. typedef 优于 #define
  8. 【SQLServer】将Job运行结果发送电子邮件通知用户
  9. SSH应该使用密钥还是密码？
  10. 模拟DLL加载
  11. 在ubuntu下关闭笔记本触摸板
  12. Cocos2d-X学习——Android移植，使用第三方库.so被删掉问题
  13. javascript sort排序
  14. 推荐一款MongoDB的客户端管理工具--nosqlbooster
  15. JavaSE_坚持读源码_ArrayList对象_Java1.7
  16. Morley's Theorem
  17. MongoDB、MySQL
  18. ReportViewer的使用总结
  19. Spring Security（三）
  20. 02：BeautifulSoup

热门文章

  1. CSS——层叠性
  2. 如何设置“用eclipse开发时自动在顶端产生import”？
  3. Linux Shell 小知识
  4. ubuntuKylin17.04重装KDE
  5. tailf
  6. 字符串str
  7. linux最常用的快捷键
  8. 数据库操作（二）SOQL
  9. CAD处理键盘按钮被释放（com接口VB语言）
  10. 微智魔盒APP开发程序解析