ext 树节点操作

http://blog.sina.com.cn/s/blog_656a17cc0101f6w7.html

tree ：树    node：节点

1、全部展开 tree.expandAll();
2、全部收缩 tree.collapseAll();
3、得到父节点 node.parentNode
4、判断是否有父节点 node.parentNode==null
5、判断是否有子节点 node.hasChildNodes()
6、获取下一级所有子节点 node.eachChild(function(child) { })
7、获取选择的节点 tree.getSelectionModel().getSelectedNode()
8、设置选中节点  node.select()
9、上移节点 node.selectPrevious();
10、下移节点 node.selectNext();
11、获取节点ID  node.id
12、获取节点值  node.text
13、获取节点提示  node.attributes.qtip

带选择框
14、获取选中的的节点
var check= tree.getChecked();
Ext.each(check ,function(node){})

15、获取是否选择  node.getUI().checkbox.checked;
16、设置节点选择   node.ui.toggleCheck(true);  //显示选中    node.attributes.checked = true; //赋值

 

17、设置一个新的节点 
var newNode=new Ext.tree.TreeNode({id:'id',text:'text',iconCls:'icon-group',qtip:'tip'});     iconCls 导入的是CSS设置的背景图片(节点图标)
css写法： .x-tree-node-leaf .icon-group{  background-image:url(group.png);} 前.x-tree-node-leaf必写

18、插入新的节点  node.appendChild(newNode);
19、删除节点 node.remove();  

20

这里说的选中是指鼠标点击一个节点后，节点那一行出现浅蓝色背景的选中，而非checkbox的勾选

方法

 

Ext.tree.TreePanel.getSelectionModel().getSelectedNode();

Ext.tree.TreePanel.getSelectionModel()获得的是一个TreeSelectionModel对象，

这个TreeSelectionModel目前在Ext中有两个Ext.tree.DefaultSelectionModel和Ext.tree.MultiSelectionModel

 

Ext.tree.MultiSelectionModel的获取选中节点的方法是getSelectedNodes ()，这个返回的是节点数组，Ext.tree.DefaultSelectionModel.getSelectedNode()返回的是单个节点对象

21 选中节点和父节点

1）、父节点选择

function parentclick(node)
    {
        var parent=node.parentNode;   //获取父节点
        var flag=node.getUI().checkbox.checked;   //判断是否选中
        if(parent!=null )  //父节点不为空
        {
            parent.ui.toggleCheck(flag);  //选中
            parent.attributes.checked = flag;   //给值
            parentclick(parent);  //递归调用选中父节点
        }
    }

2）、选择子节点

function treeclick(node)
    {  
        var flag=node.getUI().checkbox.checked;  //获取选中状态
        if (node.hasChildNodes()) {                 //是否有子节点
           node.eachChild(function(child) {         //循环下一级的所有子节点
               child.ui.toggleCheck(flag);          //选中
               child.attributes.checked = flag;     //赋值
                treeclick(child);                   //递归选中子节点
            });
         }
    }

 

3）、2个函数合并执行

function check(node)
{
    tree.suspendEvents(); //暂停所有监听事件的执行
      treeclick(node);
     parentclick(node);
     tree.resumeEvents();  //重新开始所有监听事件的执行   
}

 

注：

选中事件发生在子节点,但要通过toggleCheck()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态，就会激发树中的事件，每次激发，传入的节点值node一直在改变，陷入一个死循环。因此要加入suspendEvents()停止监听事件，执行完后再恢复监听

22  如果使用Ext.QuickTips.init()替换tree.expandAll()，则只显示根节点。

Ext TreePanel实现单选等功能

 

在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:568,     
4.     height:300,     
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.   
18.    var tree = new Ext.tree.TreePanel({   
19.        el:'tree-ct',   
20.        width:568,   
21.        height:300,   
22.        checkModel: 'cascade',   //对树的级联多选   
23.        onlyLeafCheckable: false,//对树所有结点都可选   
24.        animate: false,   
25.        rootVisible: false,   
26.        autoScroll:true,   
27.        loader: new Ext.tree.DWRTreeLoader({   
28.            dwrCall:Tmplt.getTmpltTree,   
29.            baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性   
30.        }),   
31.        root: new Ext.tree.AsyncTreeNode({ id:'0' })   
32.    });   
33.    tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件  
34.    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.   
10.         startNode.cascade(f);   
11.         return r;   
12. },   
13. check : function(node,bool) {   
14.         if(!bool){   
15.             return;   
16.         }   
17.         if(this.checkModel=='single'){   
18.             var nodes =this.getNodes(this);   
19.             if(nodes && nodes.length>0){   
20.                 for(var i=0,len=nodes.length;i
21.                     if(nodes[i].id!=node.id){   
22.                         if(nodes[i].getUI().checkbox){   
23.                             nodes[i].getUI().checkbox.checked = false;   
24.                                 nodes[i].attributes.checked=false;   
25.                         }   
26.                     }   
27.                 }   
28.             }   
29.         }   
30.     }