Ext.form.ComboBox,Extjs-树 Ext.tree.TreePanel



Ext.form.ComboBox 属性详解(见注释)及使用方法
定义一个ComboBox:

 

  1. Wayfoon.YearComb = new Ext.form.ComboBox({
  2.     id:'cbid',
  3.     name:'year',//name只是改下拉的名称
  4.     hiddenName:'hyear',//提交到后台的input的name
  5.     width : 80,
  6.     store : Wayfoon.Year,//填充数据
  7.     emptyText : '请选择',
  8.     mode : 'local',//数据模式,local代表本地数据
  9.     readOnly : true,//是否只读
  10.     value : (new Date()).YEAR,//默认值,要设置为提交给后台的值,不要设置为显示文本
  11.     triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all
  12.     allowBlank : false,//不允许为空
  13.     valueField : 'value',//值
  14.     displayField : 'text',//显示文本
  15.     editable: false,//是否允许输入
  16.     forceSelection: true,//必须选择一个选项
  17.     blankText:'请选择'//该项如果没有选择,则提示错误信息
  18. });

工具栏常用配置:


  1. 工具栏常用元素表: 
  2. Ext.Toolbar.Button              可加入工具栏的按钮组件 
  3. Ext.Toolbar.Fill                用于充满工具条的空白元素 
  4. Ext.Toolbar.Item                基类,为其子类提供工具栏基本功能 
  5. Ext.Toolbar.Separator           工具栏分割符 
  6. Ext.Toolbar.SplitButton         菜单按钮 
  7. Ext.Toolbar.TextItem            文本元素 
  8.  
  9. 工具栏常用方法表: 
  10. addButton()        Object/Array config                 添加一个或多个Ext.Toolbar.Button/SplitButton对象 
  11. addElement()       Mixed el                            添加Element元素 
  12. addField()         Ext.form.Field                      添加表单组件 
  13. addFill()                                              添加用于充满工具条的空白元素 
  14. addSeparator()                                         添加工具栏分隔符 
  15. addText()          String text                         添加字符串 
  16. add()              Mixed arg1,Mixed arg2,Mixed etc     向工具栏添加元素,支持变长参数比爱哦,可一次加入多个工具栏元素 

Extjs-树 Ext.tree.TreePanel:


<script type= "text/javascript" defer>
Ext.onReady( function(){
  1. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  2. var tree = new Ext.tree.TreePanel({
  3. region: 'center',
  4. //True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条
  5. collapsible: true,
  6. title: '标题', //标题文本
  7. width: 200,
  8. border : false, //表框
  9. autoScroll: true, //自动滚动条
  10. animate : true, //动画效果
  11. rootVisible: true, //根节点是否可见
  12. split: true,
  13. tbar:[{
  14. text: '展开',
  15. handler: function(){
  16. tree.expandAll();
  17. }
  18. }, '-',{
  19. text: '折叠',
  20. handler: function(){
  21. tree.collapseAll();
  22. tree.root.expand();
  23. }
  24. }],
  25. listeners: {
  26. click: function(node) {
  27. //得到node的text属性
  28. Ext.Msg.alert( '消息', '你点击了: "' + node.attributes.text+ "'");
  29. }
  30. }
  31. });
  32. var root = new Ext.tree.TreeNode({ text: '我是根'});
  33. var root_node1 = new Ext.tree.TreeNode({ text: '我是根的1枝'});
  34. var root_node2 = new Ext.tree.TreeNode({ text: '我是根的2枝'});
  35. //插入节点为该节点的最后一个子节点
  36. root.appendChild(root_node1);
  37. root.appendChild(root_node2);
  38. //设置根节点
  39. tree.setRootNode(root);
  40. new Ext.Viewport({
  41. items: [tree]
  42. });
  43. });
  44. </script>

2.使用TreeLoader获得后台数据

每个节点最后一级必须是叶子节点,否则会出现无限循环
TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true },
  5. { text : '01-02' , leaf : true }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true },
  11. { text : '02-02' , leaf : true }
  12. ]
  13. }]
index.jsp
  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var tree = new Ext.tree.TreePanel({
  5. region: 'center',
  6. collapsible: true,
  7. title: 'TreeLoader获得后台数据',
  8. width: 200,
  9. border : false,
  10. autoScroll: true,
  11. animate : true,
  12. rootVisible: false,
  13. split: true,
  14. loader : new Ext.tree.TreeLoader({
  15. dataUrl : 'list.txt'
  16. }),
  17. root: new Ext.tree.AsyncTreeNode({
  18. //进入时是否展开
  19. expanded: false,
  20. text: '根节点'
  21. }),
  22. listeners: {
  23. afterrender: function(node) {
  24. tree.expandAll(); //展开树
  25. }
  26. }
  27. });
  28. new Ext.Viewport({
  29. items: [tree]
  30. });
  31. });
  32. </script>
3.读取本地JSON数据

  1. 因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,
  2. 如果退回到每个节点都使用 new来生成,又实在太麻烦,
  3. 那么能不能让TreeLoader读取本地的JavaScript中的 JSON数据,然后生成需要的树节点呢

  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var tree = new Ext.tree.TreePanel({
  5. region: 'center',
  6. //True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条
  7. collapsible: true,
  8. title: '标题', //标题文本
  9. width: 200,
  10. border : false, //表框
  11. autoScroll: true, //自动滚动条
  12. animate : true, //动画效果
  13. rootVisible: false, //根节点是否可见
  14. split: true,
  15. loader : new Ext.tree.TreeLoader(),
  16. root : new Ext.tree.AsyncTreeNode({
  17. text: '我是根',
  18. children:[{
  19. text : '01',
  20. children : [
  21. { text : '01-01' , leaf : true },
  22. { text : '01-02' , leaf : true }
  23. ]
  24. },{
  25. text : '02',
  26. children : [
  27. { text : '02-01' , leaf : true },
  28. { text : '02-02' , leaf : true }
  29. ]
  30. }]
  31. }),
  32. listeners: {
  33. afterrender: function(node) {
  34. tree.expandAll(); //展开树
  35. }
  36. }
  37. });
  38. new Ext.Viewport({
  39. items: [tree]
  40. });
  41. });
  42. </script>
4.使用JSP提供后台数据

  1. 树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,
  2. 而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,
  3. 就知道是哪个节点正在执行展开,
  4. 如果返回的子节点数据包含leaf: true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子

list.jsp

  1. <%@ page language= "java" pageEncoding= "UTF-8"%>
  2. <%
  3. request.setCharacterEncoding("UTF-8");
  4. response.setCharacterEncoding("UTF-8");
  5. //获取node参数,对应的是正在展开的节点id
  6. String node = request.getParameter("node");
  7. System.out.println("node="+node);
  8. String json =
  9. "["+
  10. "{id:1,text:'01',"+
  11. "children:["+
  12. "{id:11,text:'01-01',leaf:true},"+
  13. "{id:12,text:'01-02',leaf:true}"+
  14. "]}"+
  15. ",{id:2,text:'02',"+
  16. "children:["+
  17. "{id:21,text:'02-01',leaf:true},"+
  18. "{id:22,text:'02-02',leaf:true}"+
  19. "]}"+
  20. "]";
  21. response.getWriter().write(json);
  22. %>

index.jsp

  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var tree = new Ext.tree.TreePanel({
  5. region: 'center',
  6. collapsible: true,
  7. title: '标题',
  8. width: 200,
  9. border : false,
  10. autoScroll: true,
  11. animate : true,
  12. rootVisible: false,
  13. split: true,
  14. loader : new Ext.tree.TreeLoader({
  15. dataUrl : 'list.jsp'
  16. }),
  17. root : new Ext.tree.AsyncTreeNode({
  18. //设置id,让后台知道应该在何时返回根节点的子点数据
  19. id : '0',
  20. text : '我是根'
  21. }),
  22. listeners: {
  23. afterrender: function(node) {
  24. tree.expandAll(); //展开树
  25. }
  26. }
  27. });
  28. new Ext.Viewport({
  29. items: [tree]
  30. });
  31. });
  32. </script>
5.树的事件

  1. listeners: {
  2. click: function(node) {
  3. Ext.Msg.alert( '消息', '你点击了: "' + node.attributes.text);
  4. },
  5. dblclick: function(node){
  6. alert( '你双击了'+node);
  7. },
  8. expandnode: function(node){
  9. alert(node+ '展开了'+node.attributes.text);
  10. },
  11. collapsenode: function(node){
  12. alert(node+ '折叠了'+node.attributes.text);
  13. }
  14. }

6.右边菜单

效果图

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true },
  5. { text : '01-02' , leaf : true }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true },
  11. { text : '02-02' , leaf : true }
  12. ]
  13. }]
index.jsp
  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var node_id;
  5. var tree = new Ext.tree.TreePanel({
  6. region: 'center',
  7. collapsible: true,
  8. title: '右键菜单',
  9. width: 200,
  10. border : false,
  11. animate : true,
  12. rootVisible: false,
  13. autoScroll: true,
  14. split: true,
  15. loader : new Ext.tree.TreeLoader({
  16. dataUrl : 'list.txt'
  17. }),
  18. root: new Ext.tree.AsyncTreeNode({
  19. //设置id,让后台知道应该在何时返回根节点的子点数据
  20. id : '0',
  21. text : '我是根'
  22. }),
  23. listeners: {
  24. afterrender: function(node) {
  25. //展开树
  26. tree.expandAll();
  27. }
  28. }
  29. });
  30. var cc = new Ext.menu.Menu({
  31. items :[{
  32. text: '增加',
  33. handler : function(){
  34. alert(node_id.attributes.text);
  35. cc.hide(); //隐藏
  36. }
  37. },{
  38. text: '删除',
  39. handler : function(){
  40. alert( '删除');
  41. }
  42. },{
  43. text: '修改',
  44. handler : function(){
  45. alert( '修改');
  46. }
  47. }]
  48. });
  49. tree.on( 'contextmenu', function(node,e){
  50. e.preventDefault(); //阻止浏览器默认弹出功能菜单
  51. node.select(); //选中当前节点
  52. //var array = new Array(500,500);//可以自定义坐标
  53. var array = e.getXY(); //获取事件的页面坐标
  54. cc.showAt(array); //在指定的位置显示该菜单
  55. node_id = node;
  56. });
  57. new Ext.Viewport({
  58. items: [tree]
  59. });
  60. });
  61. </script>
7.给树节点设置图片和超链接

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true , icon : 'image/qq.jpg' },
  5. { text : '01-02' , leaf : true , href : 'http://www.baidu.com' }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true },
  11. { text : '02-02' , leaf : true }
  12. ]
  13. }]
8.修改树节点的标题

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true },
  5. { text : '01-02' , leaf : true }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true },
  11. { text : '02-02' , leaf : true }
  12. ]
  13. }]
index.jsp
  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var tree = new Ext.tree.TreePanel({
  5. region: 'center',
  6. collapsible: true,
  7. title: '修改节点标题',
  8. width: 200,
  9. border : false,
  10. animate : true,
  11. rootVisible: false,
  12. autoScroll: true,
  13. split: true,
  14. loader : new Ext.tree.TreeLoader({
  15. dataUrl : 'list.txt'
  16. }),
  17. root: new Ext.tree.AsyncTreeNode({
  18. id : '0',
  19. text : '我是根'
  20. }),
  21. listeners: {
  22. afterrender: function(node) {
  23. //展开树
  24. tree.expandAll();
  25. }
  26. }
  27. });
  28. //为树节点提供即时的编辑功能
  29. var treeEditor = new Ext.tree.TreeEditor(tree, new Ext.form.TextField({
  30. allowBlank : false
  31. }));
  32. /*
  33. 编辑器开始初始化,但在修改值之前触发,
  34. 若事件句柄返回false则取消整个编辑事件
  35. editor : treeEditor本身
  36. value : 正被设置的值
  37. */
  38. treeEditor.on( 'beforestartedit', function(editor,element,value){
  39. var treeNode = editor.editNode;
  40. var boolean = treeNode.isLeaf();
  41. return boolean;
  42. });
  43. /*
  44. 完成修改后,按下Enter就会触发这个事件,我们可以监听函数得到修改后的数据
  45. editor : treeEditor本身
  46. value : 修改后的值
  47. startValue : 改变后的值
  48. */
  49. treeEditor.on( 'complete', function(editor,value,startValue){
  50. alert( '将要设置的值: '+editor.editNode.text+ ' 原来的值: '+startValue+ " 改变后的值: "+value)
  51. });
  52. new Ext.Viewport({
  53. items: [tree]
  54. });
  55. });
  56. </script>
9.树的拖放

  1. 如果让树节点可以自由拖放,创建TreePanel时设置enableDD: true即可
  2. 不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true },
  5. { text : '01-02' , leaf : true }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true },
  11. { text : '02-02' , leaf : true }
  12. ]
  13. }]
inde.jsp
  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var tree = new Ext.tree.TreePanel({
  5. region: 'center',
  6. collapsible: true,
  7. title: '树的拖动',
  8. width: 200,
  9. border : false,
  10. animate : true,
  11. rootVisible: false,
  12. autoScroll: true,
  13. split: true,
  14. enableDD : true, //支持拖放
  15. loader : new Ext.tree.TreeLoader({
  16. dataUrl : 'list.txt'
  17. }),
  18. root: new Ext.tree.AsyncTreeNode({
  19. id : '0',
  20. text : '我是根'
  21. }),
  22. listeners: {
  23. afterrender: function(node) {
  24. //展开树
  25. tree.expandAll();
  26. }
  27. }
  28. });
  29. new Ext.Viewport({
  30. items: [tree]
  31. });
  32. });
  33. </script>
9.1 节点拖放的三种形式

  1. append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志
  2. above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线
  3. below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头

9.2叶子不能append

  1. tree.on( 'nodedragover', function(e){
  2. //获取事件的对象
  3. var node = e.target; //当鼠标指针经过的节点
  4. if(node.leaf){
  5. n.leaf = false;
  6. }
  7. return true;
  8. });

9.3 判断拖放的目标

  1. tree.on( 'nodedrop', function(e){
  2. Ext.Msg.alert( '消息', '我们的节点 '+e.dropNode+ ' 掉到了 '+e.target+ ' 上,掉落方式是 '+ e.point);
  3. });

10.树的过滤器Ext.tree.TreeFilter

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true },
  5. { text : '01-02' , leaf : true }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true },
  11. { text : '02-02' , leaf : true }
  12. ]
  13. }]
index.jsp
  1. <script type= "text/javascript" defer>
  2. Ext.onReady( function(){
  3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  4. var tree = new Ext.tree.TreePanel({
  5. region: 'center',
  6. collapsible: true,
  7. title: 'tree过滤器',
  8. width: 400,
  9. border : false,
  10. animate : true,
  11. rootVisible: false,
  12. autoScroll: true,
  13. split: true,
  14. loader : new Ext.tree.TreeLoader({
  15. dataUrl : 'list.txt'
  16. }),
  17. root : new Ext.tree.AsyncTreeNode({
  18. //设置id,让后台知道应该在何时返回根节点的子点数据
  19. id : '0',
  20. text : '我是根'
  21. }),
  22. listeners: {
  23. afterrender: function(node) {
  24. //展开树
  25. tree.expandAll();
  26. }
  27. },
  28. tbar:[{
  29. text: '显示02',
  30. handler: function(){
  31. treeFiler.filter( '02'); //通过指定的属性过滤数据
  32. }
  33. }, '-',{
  34. text: '显示全部',
  35. handler: function(){
  36. treeFiler.clear(); //清理现在的过滤
  37. }
  38. }, '-',{
  39. xtype : 'textfield',
  40. //为HTML的input输入字段激活键盘事件的代理
  41. enableKeyEvents : true,
  42. listeners : {
  43. //这个事件只能在enableKeyEvents = true可用
  44. keyup : function(e){
  45. var t = this.getValue()
  46. /****************过滤时应该避开叶子节点**********************/
  47. //传递的字符串参数被正则表达式读取
  48. var es = Ext.escapeRe(t);
  49. var re = new RegExp(es, 'i');
  50. //通过一个函数过滤,函数返回true,那么该节点将保留
  51. treeFiler.filterBy( function(n){
  52. return !n.isLeaf() || re.test(n.text);
  53. });
  54. /**********不匹配的叶子节点的父节点也隐藏**************/
  55. hiddenPkgs =[];
  56. //从该节点开始逐层下报(Bubbles up)节点,上报过程中对每个节点执行指定的函数
  57. tree.root.cascade( function(n){
  58. //当节点有子节点的时候n.ui.ctNode.offsetHeight大于3
  59. if(!n.isLeaf()&&n.ui.ctNode.offsetHeight< 3){
  60. n.ui.hide();
  61. hiddenPkgs.push(n);
  62. }
  63. });
  64. }
  65. }
  66. }]
  67. });
  68. var treeFiler = new Ext.tree.TreeFilter(tree,{
  69. clearBlank : true, //如果查询的字符串为空字符串,就执行clear()
  70. //每次过滤之前先执行clear()负责会在上次过滤结果的基础上进行查询
  71. autoClear : true
  72. });
  73. new Ext.Viewport({
  74. items: [tree]
  75. });
  76. });
  77. </script>
11.利用TreeSorter对树进行排序

  1. TreeSorter是一个专门用来对树节点进行排序的工具
  2. caseSensitive 区分大小写,默认为 false不区分大小写
  3. dir 排列方式
  4. folderSort 将叶子节点排列到非叶子节点后面 默认为 false
  5. leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf: true参数,就认为是叶子节点
  6. property 根据节点属性排序,默认为 text

代码

  1. new Ext.tree.TreeSorter(tree,{
  2. folderSort : true
  3. });

12.树形节点视图 Ext.tree.TreeNodeUI

  1. Ext .treeTreeNodeUI是生成 Ext .tree .TreeNode实例时默认使用的视图组件.
  2. 在生成每一个 Ext .tree .TreeNode实例时,它会先查找 this .attributes .uiProviderthis .defaultUI.
  3. 如果有任何一个属性存在,它就会使用这个属性创建自己的视图.
  4. 如果这两个属性都不存在就会适应 Ext .tree .TreeNodeUI创建视图.
  5. 因此,在属性结构中通常都使用 Ext .tree .TreeNodeUI作为树形节点的视图.
  6. 可以通过 node .ui的方式获得某个 Ext .tree .TreeNode实例对应的 Ext .tree .TreeNodeUI

效果图

list.txt

  1. [{
  2. text : '01',
  3. children : [
  4. { text : '01-01' , leaf : true , checked : false },
  5. { text : '01-02' , leaf : true , checked : false }
  6. ]
  7. },{
  8. text : '02',
  9. children : [
  10. { text : '02-01' , leaf : true , checked : false },
  11. { text : '02-02' , leaf : true , checked : false }
  12. ]
  13. }]
index.jsp
  1. <style type= "text/css">
  2. .big {
  3. font-weight: bold;
  4. }
  5. < /style>
  6. <script type="text/javascript " defer>
  7. Ext.onReady(function(){
  8. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  9. var tree = new Ext.tree.TreePanel({
  10. region: 'center',
  11. collapsible: true,
  12. title: '树形节点视图',
  13. width: 200,
  14. border : false,
  15. autoScroll: true,
  16. animate : true,
  17. rootVisible: false,
  18. split: true,
  19. loader : new Ext.tree.TreeLoader({
  20. dataUrl : 'list.txt'
  21. }),
  22. root : new Ext.tree.AsyncTreeNode({
  23. //设置id,让后台知道应该在何时返回根节点的子点数据
  24. id : '0',
  25. text : '我是根'
  26. }),
  27. listeners: {
  28. afterrender: function(node) {
  29. //展开树
  30. tree.expandAll();
  31. }
  32. }
  33. });
  34. new Ext.Viewport({
  35. items: [tree]
  36. });
  37. tree.on('click',function(node){
  38. //当用户点击一个节点,会获得节点对应的Ext.tree.TreeNodeUI实例
  39. var treeNodeUI = node.ui;
  40. //最后调用addClass()方法把文字转化为粗体
  41. treeNodeUI.addClass('big');
  42. (
  43. function(){
  44. treeNodeUI.removeClass('big');
  45. }
  46. ).defer(1000);
  47. });
  48. });
  49. </script>

  1. treeNodeUI的方法
  2. getAnchor(),getIconEl(),getTextEl()这 3个函数可以分别获取页面上与树形对应的
  3. & lt;a& gt;标签,包含图标的& lt;img& gt;标签,包含文字的& lt;span& gt;标签部分
  4. hide()和show()函数可以控制树形节点是否隐藏
  5. isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false
13.表格与树的结合 Ext.ux.tree.ColumnTree()

  1. Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree,
  2. 我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件
  3. 需要注意的是:我们要给每一个节点设置uiProvider: 'col',这样在生成树时TreeLoader会预先定义的uiProviders参数中取得 'col'对应的Ext.ux.tree.ColumnNodeUI,用它来作为显示树形节点的视图
效果图

list.jsp
  1. <%@ page language= "java" pageEncoding= "UTF-8"%>
  2. <%
  3. request.setCharacterEncoding("UTF-8");
  4. response.setCharacterEncoding("UTF-8");
  5. //获取node参数,对应的是正在展开的节点id
  6. String node = request.getParameter("node");
  7. System.out.println("node="+node);
  8. String json =
  9. "["+
  10. "{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+
  11. "children:["+
  12. "{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+
  13. "{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+
  14. "]}"+
  15. ",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+
  16. "children:["+
  17. "{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+
  18. "{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+
  19. "]}"+
  20. "]";
  21. response.getWriter().write(json);
  22. %>

index.jsp

  1. <!-- 使用ColumnTree需要带入这两个文件 -->
  2. <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>
  3. <script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>
  4. <script type="text/javascript" defer>
  5. Ext.onReady( function(){
  6. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
  7. var tree = new Ext.tree.ColumnTree({
  8. //columnTree的宽度要等于columns列总和的宽度,否则会出现错行
  9. width: 451,
  10. height: 200,
  11. rootVisible: false,
  12. autoScroll: false,
  13. title: '示例',
  14. columns:[{
  15. header: '科目',
  16. width: 230,
  17. dataIndex: 'km'
  18. },{
  19. header: '课时',
  20. width: 100,
  21. dataIndex: 'ks'
  22. },{
  23. header: '讲师',
  24. width: 100,
  25. dataIndex: 'js'
  26. }],
  27. loader: new Ext.tree.TreeLoader({
  28. dataUrl: 'list.jsp',
  29. uiProviders:{
  30. 'col': Ext.tree.ColumnNodeUI
  31. }
  32. }),
  33. root: new Ext.tree.AsyncTreeNode({
  34. //设置id,让后台知道应该在何时返回根节点的子点数据
  35. id : '0',
  36. text: '我是根'
  37. }),
  38. listeners: {
  39. afterrender: function(node) {
  40. //展开树
  41. tree.expandAll();
  42. }
  43. }
  44. });
  45. new Ext.Viewport({
  46. items : [tree]
  47. });
  48. });
  49. </script>

  • 1
    点赞
  • 1
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值