节点那一行出现浅蓝色背景的选中

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

方法

 

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

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

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

 

首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象，构造函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode，在该节点中指定该节点的 laoder为前面定义的loader。执行这段程序，在点击“根节点”时，会从服务器端指定root节点的子节点信息。
 
 　　TreeLoader严格来说是针对树的节点来定义的，可以给树中的每一个节点定义不同的TreeLoader，默认情况下，如果一个 AsyncTreeNode节点在准备加载子节点的时候，如果该节点上没有定义loader，则会使用TreePanel中定义的loader作为加载器。因此，我们可以直接在TreePanel上面指定loader属性，这样就不需要给每一个节点指定具体的TreeLoader了。

Ext.onReady(function(){

var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"
});
var c1=new Ext.tree.TreeNode({
text:"子节点1"
})
var c2=new Ext.tree.AsyncTreeNode({
text:"子节点2"
});
root.appendChild(c1);
root.appendChild(c2);
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:300,
loader:new Ext.tree.TreeLoader({
applyLoader:false,
url:"treedata.js"
})
});

});

1. Ext.onReady(function(){   
2.   Ext.BLANK_IMAGE_URL = '../js/extjs/3.2.0/resources/images/default/s.gif';   
3.   Ext.chart.Chart.CHART_URL = '../js/extjs/3.2.0/resources/charts.swf';   
4.   Ext.QuickTips.init();   
5.   testTreeGrid();   
6. });   
7.   
8. function testTreeGrid(){   
9.   var tree = new Ext.ux.tree.TreeGrid({   
10.     title: '地市',   
11.     width: 550,   
12.     height: 300,   
13.     dataUrl: 'treegrid-data.json',   
14.     renderTo: Ext.getBody(),   
15.     enableDD: true,   
16.     columns:[{   
17.       header: 'ID',   
18.       dataIndex: 'id',   
19.       width: 200   
20.     },{   
21.       header: '名称',   
22.       dataIndex: 'fdcName',   
23.       width: 180   
24.     },{   
25.       header: '描述',   
26.       dataIndex: 'fdcDesp',   
27.       width: 100,   
28.       align: 'center',   
29.       sortType: 'string',   
30.       tpl: new Ext.XTemplate('{fdcDesp:this.formatDesp}', {   
31.         formatDesp: function(v) {   
32.           return v||'-'  
33.         }   
34.       })   
35.     }],   
36.     tbar:[{   
37.       text:'当前路径',   
38.       tooltip:'保存当前选择节点的路径',   
39.       scope:this,   
40.       handler:function(b,e){   
41.         //获取当前选择节点的路径   
42.         var node = tree.getSelectionModel().getSelectedNode();   
43.         var path = node.getPath('id');   
44.         Ext.getCmp('tf').setValue(path);   
45.       }   
46.     },{   
47.       xtype:'textfield',   
48.       id:'tf',   
49.       width:300,   
50.       value:''  
51.     },{   
52.       text:'选择路径',   
53.       scope:this,   
54.       handler:function(b,e){   
55.         var path = Ext.getCmp('tf').getValue();   
56.         //展开路径,并在回调函数里面选择该节点   
57.         tree.expandPath(path,'id',function(bSucess,oLastNode){   
58.           tree.getSelectionModel().select(oLastNode);   
59.         });   
60.       }   
61.     },{   
62.       text:'选择江门',   
63.       scope:this,   
64.       handler:function(b,e){   
65.         var path = '/xnode-11/cn86/gd020/gd020areas/jm0750';   
66.         //展开路径,并在回调函数里面选择该节点   
67.         tree.expandPath(path,'id',function(bSucess,oLastNode){   
68.           tree.getSelectionModel().select(oLastNode);   
69.         });   
70.       }   
71.     },{   
72.       text:'重载',   
73.       tooltip:'重载数据并选择上一次的节点',   
74.       scope:this,   
75.       handler:function(b,e){   
76.         var path = tree.getSelectionModel().getSelectedNode().getPath('id');   
77.         //重载数据,并在回调函数里面选择上一次的节点   
78.         tree.getLoader().load(tree.getRootNode(),function(treeNode){   
79.           //展开路径,并在回调函数里面选择该节点   
80.           tree.expandPath(path,'id',function(bSucess,oLastNode){   
81.             tree.getSelectionModel().select(oLastNode);   
82.           });   
83.         },this);   
84.       }   
85.     }]   
86.   });   
87. }