extjs4 tree操作

Extjs tree 如何获得选中的节点

  (2011-04-27 17:35:51)

转载▼

标签：  it

分类： extjs

这里说的选中是指鼠标点击一个节点后，节点那一行出现浅蓝色背景的选中，而非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()返回的是单个节点对象。

extJS 树节点操作

博客分类： 
• extjs

extjs 

ext 树节点操作 
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()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态，就会激发树中的<CheckChange Handler="check(node)" />事件，每次激发，传入的节点值node一直在改变，陷入一个死循环。因此要加入suspendEvents()停止监听事件，执行完后再恢复监听 
22  如果使用Ext.QuickTips.init()替换tree.expandAll()，则只显示根节点。