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

最新推荐文章于 2021-06-03 15:51:55 发布
最新推荐文章于 2021-06-03 15:51:55 发布
阅读量469 收藏 2
点赞数 1


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);
  5. },
  6. dblclick: function(node){
  7. alert( '你双击了'+node);
  8. },
  9. expandnode: function(node){
  10. alert(node+ '展开了'+node.attributes.text);
  11. },
  12. collapsenode: function(node){
  13. alert(node+ '折叠了'+node.attributes.text);
  14. }
  15. }

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. });
  29. //为树节点提供即时的编辑功能
  30. var treeEditor = new Ext.tree.TreeEditor(tree, new Ext.form.TextField({
  31. allowBlank : false
  32. }));
  33. /*
  34. 编辑器开始初始化,但在修改值之前触发,
  35. 若事件句柄返回false则取消整个编辑事件
  36. editor : treeEditor本身
  37. value : 正被设置的值
  38. */
  39. treeEditor.on( 'beforestartedit', function(editor,element,value){
  40. var treeNode = editor.editNode;
  41. var boolean = treeNode.isLeaf();
  42. return boolean;
  43. });
  44. /*
  45. 完成修改后,按下Enter就会触发这个事件,我们可以监听函数得到修改后的数据
  46. editor : treeEditor本身
  47. value : 修改后的值
  48. startValue : 改变后的值
  49. */
  50. treeEditor.on( 'complete', function(editor,value,startValue){
  51. alert( '将要设置的值: '+editor.editNode.text+ ' 原来的值: '+startValue+ " 改变后的值: "+value)
  52. });
  54. new Ext.Viewport({
  55. items: [tree]
  56. });
  57. });
  58. </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. });
  74. new Ext.Viewport({
  75. items: [tree]
  76. });
  77. });
  78. </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 .uiProvider和 this .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>

zyp_java
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
extjs tree下拉列表_Ext中comboBox跟TreePanel实现下拉树
weixin_42179184的博客
03-06 188
Ext中comboBox跟TreePanel实现下拉树，关键点就是：下拉之前要先清空树的div ，然后在render上去，如：el = el.parent().dom.innerHTML="";//start 扩展combobox+treepanel组合var el = Ext.get("tree");if(el){el = el.parent().dom.innerHTML=""; //清空之前...
extjs tree下拉列表_Ext TreeCombo 树形 下拉框
weixin_42505477的博客
12-23 400
参考:http://www.extjs.com/forum/showthread.php?38654-Tree-in-a-Combo./page4在别人基础上稍作修改1.添加hiddenName，使传值时跟Ext.form.ComboBox类似;2.设值时展开整棵树(在TreeCombo外实现)，使弹出下拉框时默认选中节点;代码如下:/*** @version Base on Ext3.0* @c...
ext2.2打造Ext.form.ComboBox系列--树形结构
dcke31608的博客
01-21 229
本篇介绍了将数据动态绑定到Ext.form.ComboBox,以树状结构的形式显示.采取后台读数据库的方式.提供显示提示消息的效果和改变ComboBox的宽度和高度.不支持手写和联想功能. 效果图如下: 前台代码如下: 代码 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default....
Ext.tree.Panel实现单选，多选
weixin_30512785的博客
01-11 467
Extjs 1 var productCategoryTreeLookUpFn = function(callback) { 2 var productCategoryLookUpWindow; 3 var productCategoryTreeStore; 4 var productCategoryTreeMenu; 5 ...
EXTJS学习系列提高篇:第二十九篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--树形结构...
weixin_33971130的博客
11-01 78
本篇介绍了将数据动态绑定到Ext.form.ComboBox,以树状结构的形式显示.采取后台读数据库的方式.提供显示提示消息的效果和改变ComboBox的宽度和高度.不支持手写和联想功能. 效果图如下: 前台代码如下: <form id="form1" runat="server"> <br /> <di...
Ext.form.ComboBoxTree 下拉树 下拉多选树
热门推荐
hahadekuai的专栏
07-20 1万+
源代码:  2012年7月27日更新 修复了选择后通过getValue无法获取值的bug. /** * @author 哈哈的快 QQ:20151481 * @link http://blog.csdn.net/hahadekuai/article/details/7769093 * @version 1.4 * @date 2012-7-27 9:10  */ if ('fun
Ext.Panle Ext.TabPanel Ext.Viewport
weixin_41233524的博客
05-15 354
面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。 ...
ext组件转换成html,Ext.js的组件体系
weixin_35515918的博客
06-03 342
一 . Ext的组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：xtype Classbox Ext.BoxComponent 具有边框属性的组件Button Ext.Button 按钮colorpalette Ext.ColorPalette 调色板component Ext.Component 组件container E...
extjs tree下拉列表_Extjs中ComboBoxTree实现的下拉框树效果(自写)_extjs
weixin_29214559的博客
12-23 293
最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧…… 在Extjs中是没有这种效果的，所以得自己写，在网络上看了看别人的资料，自己再总结了一下，修改了一下，代码如下：Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {constructor: function (cfg) {cfg = cfg || {};Ext.ux...
Extjs中ComboBoxTree实现的下拉框树效果(自写)
12-04
在案例中，`Ext.ux.TreeCombo` 是基于 `Ext.form.ComboBox` 进行扩展的，目的是实现一个包含树形结构的下拉框。 2. **Ext.ux.TreeCombo**： 这是一个自定义组件，它结合了ComboBox和TreePanel的特性。它继承了...
extjs4 下拉菜单树 combobox+tree 支持单选多选
06-20
在EXTJS4中，下拉菜单树（ComboBox+Tree）是一种高级UI组件，它结合了ComboBox的下拉选择框和TreePanel的树形结构，提供了一种用户友好的交互方式，用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...
Ext组件描述，各个组件含义
06-23
**2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**：Tree Panel 是一个树形结构的组件，可以用来展示层次结构的数据。 - **主要用途**：适用于展示目录结构或组织架构图。 **...
学习ExtJS Panel常用方法
10-29
- `treepanel`: `Ext.tree.TreePanel` - `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - **Toolbar components**： - `paging`: `Ext.PagingToolbar` - `toolbar`: `Ext.Toolbar` - `tbbutton`: `...
Extjs自定义组件-下拉树
07-19
- 继承`Ext.form.ComboBox`，创建自定义类`ComboboxTree`。 - 初始化`AsyncTreeNode`作为树的根节点。 - 实例化`TreeLoader`，用于异步加载树节点数据。 - 创建`TreePanel`实例，配置其属性，包括宽度、高度、...
基于Python flask 的豆瓣电影top250数据评分可视化
08-03
基于Python flask 的豆瓣电影top250数据评分可视化
基于stm32的汇川伺服电机机械臂控制程序，C语言程序，串口通信
08-03
基于stm32的汇川伺服电机机械臂控制程序，C语言程序，串口通信
MQTTX-Setup-1.9.9-x64.exe
08-03
主要是MQTT的软件安装包
MES产品化-中央空调场内物流培训.pptx
最新发布
08-03
MES产品化-中央空调场内物流培训.pptx
Ext.form.ComboBox设置z-index
12-15
根据提供的引用内容，没有找到关于Ext.form.ComboBox设置z-index的信息。但是，可以通过以下步骤设置z-index： 1.在CSS文件中为ComboBox添加样式，例如： ```css .x-combo-list { z-index: 9999; } ``` 2.在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值