`

Ext中TreePanel控件和TabPanel控件搭配测试(完全拷贝)

 
阅读更多

 

在实际的项目中，左边树形菜单，提供各种功能点击，右边一个面板，随着左边节点的选择表现不同的功能内容，这是一个相当经典的布局，在Ext框 架中，有两个控件TreePanel和TabPanel刚好完成这些功能，本文就这两个控件的搭配使用和点击左边树节点引起右边内容变化的方法作一个简单 的介绍。首先看下面的具体的代码。

 

Js代码  收藏代码
  1. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4. <meta http-equiv="Content-Type"  content= "text/html; charset=utf-8"  />  
  5. <title>TabPanel和Tree控件搭配测试</title>  
  6. <link rel="stylesheet"  type= "text/css"  media= "all"  href= "../ext/resources/css/ext-all.css"  />  
  7. <script type="text/javascript"  src= "../ext/adapter/ext/ext-base.js" ></script>  
  8. <script type="text/javascript"  src= "../ext/ext-all.js" ></script>  
  9. <script type="text/javascript"  src= "../ext/build/locale/ext-lang-zh_CN.js" ></script>  
  10. <script type="text/javascript" >Ext.BLANK_IMAGE_URL =  '../ext/resources/images/default/s.gif' ;</script>  
  11. <script type="text/javascript" >  
  12. //左边功能树   
  13. var  menuTree =  new  Ext.tree.TreePanel({  
  14.     region:'west' ,  
  15.     title:'功能菜单' ,  
  16.     width:180,  
  17.     minSize:150,  
  18.     maxSize:200,  
  19.     split:true ,  
  20.     autoScroll:true ,  
  21.     autoHeight:false ,  
  22.     collapsible:true ,  
  23.     rootVisable:false ,  //不显示根节点   
  24.     root:new  Ext.tree.TreeNode({  
  25.         id:'root' ,  
  26.         text:'功能菜单' ,  
  27.         draggable:false ,  
  28.         expanded:true   
  29.     })  
  30. });  
  31.   
  32. //添加第一个节点(html)   
  33. menuTree.root.appendChild(new  Ext.tree.TreeNode({  
  34.     id:'htmlPanel' ,  
  35.     text:'通过html打开' ,  
  36.     listeners:{  
  37.         'click' : function (node, event) {  
  38.             event.stopEvent();  
  39.             var  n = contentPanel.getComponent(node.id);  
  40.             if  (!n) {  //判断是否已经打开该面板   
  41.                 n = contentPanel.add({  
  42.                     'id' :node.id,  
  43.                     'title' :node.text,  
  44.                     closable:true ,   //通过html载入目标页   
  45.                     html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'   
  46.                 });  
  47.             }  
  48.             contentPanel.setActiveTab(n);  
  49.         }  
  50.     }  
  51. }));  
  52.   
  53. //添加第二个节点(autoLoad)   
  54. menuTree.root.appendChild(new  Ext.tree.TreeNode({  
  55.     id:'autoLoadPanel' ,  
  56.     text:'通过autoLoad打开' ,  
  57.     listeners:{  
  58.         'click' : function (node, event) {  
  59.             event.stopEvent();  
  60.             var  n = contentPanel.getComponent(node.id);  
  61.             if  (!n) {  ////判断是否已经打开该面板   
  62.                 n = contentPanel.add({  
  63.                     'id' :node.id,  
  64.                     'title' :node.text,  
  65.                     closable:true ,  
  66.                     autoLoad:{url:'auto.php' , scripts: true }  //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性   
  67.                 });  
  68.             }  
  69.             contentPanel.setActiveTab(n);  
  70.         }  
  71.     }  
  72. }));  
  73.   
  74. //添加第三个节点(function)   
  75. menuTree.root.appendChild(new  Ext.tree.TreeNode({  
  76.     id:'functionPanel' ,  
  77.     text:'通过函数打开' ,  
  78.     listeners:{  
  79.         'click' : function (node, event) {  
  80.             event.stopEvent();  
  81.             var  n = contentPanel.getComponent(node.id);  
  82.             if  (!n) {  
  83.                 var  p =  new  fnPanel();  
  84.                 p.id = node.id;  
  85.                 p.title = node.text;  
  86.                 n = contentPanel.add(p);  
  87.             }  
  88.             contentPanel.setActiveTab(n);  
  89.         }  
  90.     }  
  91. }));  
  92.   
  93. //通过扩展来构建要创建的面板   
  94. fnPanel = Ext.extend(Ext.Panel, {  
  95.     closable:true ,  
  96.     autoScroll:true ,  
  97.     layout:'fit' ,  //如果用函数来创建该面板的话,布局必须设置为fit,否则不会显示该面板中的内容   
  98.   
  99.     //创建面板内容   
  100.     createFormPanel:function () {  
  101.         return   new  Ext.form.FormPanel({  
  102.             buttonAlign:'center' ,  
  103.             labelAlign:'right' ,  
  104.             frame:false ,  
  105.             bodyBorder:false ,  
  106.             bodyStyle:'padding:25px' ,  
  107.             items:[{  
  108.                 xtype:'textfield' ,  
  109.                 fieldLabel:'用户名' ,  
  110.                 width:350,  
  111.                 name:'username'   
  112.             },{  
  113.                 xtype:'textfield' ,  
  114.                 fieldLabel:'密　码' ,  
  115.                 width:350,  
  116.                 name:'password'   
  117.             }],  
  118.             buttons:[{text:'登陆' }, {text: '取消' }]  
  119.         });  
  120.     },  
  121.   
  122.     //重装控件初始化函数,在该函数中完成面板中内容的初始化   
  123.     initComponent:function () {  
  124.         fnPanel.superclass.initComponent.call(this );  
  125.         this .fp =  this .createFormPanel();  
  126.         this .add( this .fp);  
  127.     }  
  128. });  
  129.   
  130. //右边具体功能面板区   
  131. var  contentPanel =  new  Ext.TabPanel({  
  132.     region:'center' ,  
  133.     enableTabScroll:true ,  
  134.     activeTab:0,  
  135.     items:[{  
  136.         id:'homePage' ,  
  137.         title:'首页' ,  
  138.         autoScroll:true ,  
  139.         html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'   
  140.     }]  
  141. });  
  142.   
  143. Ext.onReady(function (){  
  144.     new  Ext.Viewport({  
  145.         layout:'border' ,  //使用border布局   
  146.         defaults:{activeItem:0},  
  147.         items:[menuTree, contentPanel]  
  148.     });  
  149. });  
  150. </script>  
  151. </head>  
  152. <body>  
  153. </body>  
  154. </html> 
上面代码中，构建了两个控件menuTree和contentPanel，menuTree用来显示具体功能菜单，contentPanel用 来展示具体功能内容，menutTree中的节点是通过appendChild()方法手动加上去的，而且为了介绍方便，每个节点都添加了一个处理点击事 件的函数，在具体应用中，还可以使用AsyncTreeNode()和TreeLoader()动态载入节点，下面着重介绍点击树节点引起功能区变化的方 法，上面代码中用到了三种方法。

 

　　（1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用html属性中包含<iframe>的语法来调用另一个页面，具体见代码。该 方法实现比较简单，只要重新编辑一个html文件即可以了，而且如果要在新生成的页面中再使用Ext的控件也比较简单，也比较好控制，只要像一个页面情况 下使用就可以了，因为他本身就是一个完整的html文件。而该方法的缺点就是资源占用厉害，是三种方法中占有最厉害的，而且还有Ext的重复加载的问题 （不知道Ext库中考虑这种情况了没有），另外就是新的页面载入速度也是最慢的。

 

　　（2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，其中有两个比较重要，url表 示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，如果在新的页面中要创建Ext控件，必须指定该参数。该方 法实现较前一个复杂，因为引入的文件不是一个完整的html文件，有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示），但 缺点就是如果是载入的是一个单纯html文件(*.html)，在字符编码上处理很麻烦，经常出现乱码，我提供的源码中是一个PHP文件，用PHP文件也 只是一个作用，改变输出的字符编码，用html能够实现同样的功能，但会是乱码，我不知道怎样解决这个问题。

 

　　（3）通过自己构建新的面板来实现。该方法是通过继承Panel面板，然后在该面板中加入要显示的内容，再重载initComponet()方法，最后把该面板添加到TabPanel中，该 方法中一个要注意的地方，新生成的页面布局一定要用fit，否则该面板中的内容不能显示出来。该方法是所有方法中最复杂的，而且由于采用了fit布局，新 生成的页面中的元素不好控制，我例子中的表单就生成的比较乱。但载入速度是最快的，可能是少了载入指示吧，资源占用跟第二种方法差不多。

分享到：
| 往json数组里动态新增一个元素
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    在本文中，我们将深入探讨ExtJS库中的两个关键组件：TreePanel和TabPanel，并结合实际测试情况来理解它们如何协同工作。ExtJS是一款强大的JavaScript框架，用于构建富客户端应用程序，而TreePanel和TabPanel是其核心...

    treepanel 和 tabpanel 完整

    在本文中，我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件，并讨论如何将它们结合在一起，以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据，而`TabPanel`则提供了多标签页的功能，两者...

    Ext TreePanel Checked Ext复选框树

    在IT领域，特别是前端开发中，`Ext JS`是一个广泛使用的JavaScript库，它提供了一整套组件和工具，用于构建富交互式的Web应用程序。`TreePanel`是`Ext JS`中的一个关键组件，用于展示层次结构的数据，就像操作系统中...

    用coolite布局，数据库绑定Treepanel,用Tabpanel显示

    在本文中，我们将深入探讨如何使用Coolite布局技术，结合数据库数据绑定到TreePanel，并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架，它提供了丰富的组件和灵活的布局方式，使得创建复杂的Web应用...

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET框架中，TreePanel是一个非常重要的组件，它用于展示层次结构的数据，通常用于构建树形目录或层级关系的界面。在这个特定的场景中，我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...

    Ext TreePanel

    【Ext TreePanel】是Ext JS库中的一个组件，主要用于展示层次结构...总之，Ext TreePanel和EditorGridPanel是Ext JS中处理树形数据和可编辑表格的强大工具，它们提供了丰富的功能和定制选项，满足各种复杂的应用场景。

    ext 树控件+数据库

    在IT领域，EXT是一个流行的JavaScript库，用于构建富客户端应用程序，尤其在Web应用开发中广泛应用。...通过这种方式，你可以构建一个动态、交互性强的EXT树控件，有效地展示和操作数据库中的层次结构数据。

    ext.net Menu + TreePanel

    它是一个强大的工具集，提供了多种组件，包括Menu（菜单）和TreePanel（树形面板），这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色，它为用户提供了一种易于操作的下拉菜单...

    Ext表格控件和树控件

    ### Ext表格控件和树...通过以上内容，我们可以看到 `GridPanel`、`EditorGridPanel` 和 `TreePanel` 在 Ext JS 中的应用非常广泛，它们提供了强大的数据展示和编辑能力，同时也为开发者提供了高度的灵活性和定制性。

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...

    Ext3.2的TreePanel和GridPanel的分页与Hibernate的分页功能的影射

    目的：Ext框架的开发中，最常用的有GridPanel控件，以及TreePanel控件。在使用表格的分页功能时，我们把该控件的start与limits参数与Hibernate的分页功能影射，从页实现了动态的分页效果；而TreePanel的更新也是一个...

    Ext.net TreePanel的Checkbox操作及父子节点联动（修正）

    在EXT.NET框架中，TreePanel是一个非常重要的组件，它用于展示层次结构的数据，例如文件系统、组织结构等。本文将详细讲解如何实现TreePanel中的Checkbox操作以及父子节点间的联动效果，特别是针对之前存在的Bug进行...

    Ext用户扩展控件-------支持树上多个节点和叶子的拖动

    "Ext用户扩展控件-------支持树上多个节点和叶子的拖动"是EXT JS中的一个高级特性，它增强了EXT JS的树形控件（TreePanel），允许用户通过拖放操作在树结构中移动多个节点和叶子。这一功能对于数据组织和展示特别...

    在VS下利用Ext4.2的TreePanel的简单demo

    在Ext4.2中，TreePanel提供了丰富的配置选项和事件处理，可以定制各种复杂的树形界面。 要构建这个简单的demo，我们需要以下几个步骤： 1. **设置环境**：确保已安装了Visual Studio和ExtJS库。在VS项目中引入...

    一个Coolite TreePanel TabPanel的网站后台框架示例

    一个Coolite TreePanel TabPanel的网站后台框架示例 Coolite 是一个用C#封装了ExtJS的Ajax控件,后台效果的用户体验还是很不错的! 项部是一个图片,左边一棵树形,树形可以从后台配置,点击叶子结点时从Tabs页内依次打开...

    Extjs做的treepanel+tab切换页

    这个设计允许用户通过点击TreePanel中的节点，动态地在TabPanel中加载新的内容。 1. **ExtJS TreePanel**：TreePanel 是ExtJS中用来展示层级数据的组件，类似于HTML中的树状结构。在这个例子中，它被用来显示具有...

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    在EXTJS开发中，TreePanel是用于展示层级结构数据的组件，它经常被用来构建文件系统或者组织结构等。在处理TreePanel时，我们可能会遇到一个常见问题：当尝试使用MultiSelectionModel（多选模型）重置选中的节点时，...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

Magicbox
Global site tag (gtag.js) - Google Analytics