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

转载 2012年03月30日 00:10:06

这里说的选中是指鼠标点击一个节点后,节点那一行出现浅蓝色背景的选中,而非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. }  


 

相关文章推荐

浅蓝色政府网站制作资源免费

  • 2013年11月16日 10:59
  • 11.77MB
  • 下载

解决iOS8以上系统下app底部UITabBarItem上自定义的背景色和图片,在首次启动或push之后再pop回去会变成系统默认颜色-蓝色问题

场景:         在ios8以下系统下正常显示,在ios8以上系统底部UITabBarItem会变成默认蓝色,遮挡图片上的字, 首先,在ios8以下没问题是因为在iOS8以下没问题是以下方水...

绘制一个普通的蓝色背景的窗口,中间有一个红色的方块

Windows32Application的GDI程序:命名为Rectangle。 1、创建一个Win32Application的空工程 2、添加一个C++文件 3、向其中添加如下代码:   #incl...

浅蓝色学校网站建设资源免费

  • 2013年11月08日 10:34
  • 6.94MB
  • 下载

Opencvchina网站:把证件照蓝色背景转为白色

这是在Opencvchina网站上每周一练题目,第十五期要求把蓝色背景转为白色背景,原图下所示: 代码如下所示: // 证件照背景变色.cpp : 定义控制台应用程序的入口点。 // /*=====...

浅蓝色政府建站源码

  • 2013年04月15日 09:39
  • 6.94MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:节点那一行出现浅蓝色背景的选中
举报原因:
原因补充:

(最多只允许输入30个字)