Extjs tree 点击选中的节点 改变背景



這裏說的選中是指鼠標點擊一個節點後，節點那一行出現淺藍色背景的選中，而非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()返回的是單個節點對象。

转载自：http://rritw.com/a/bianchengyuyan/JS/2012/0819/207486.html

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()，則只顯示根節點。