Ext3 动态加载Accordion布局面板和树菜单

最新推荐文章于 2020-02-05 18:56:17 发布
最新推荐文章于 2020-02-05 18:56:17 发布
阅读量2.2k 收藏 1
点赞数 2
分类专栏： ExtJS 文章标签： ext javaweb js 菜单树 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011041491/article/details/53508226
版权

主要步骤:

第一步：

布局 
/*************主面板开始***********************/
 var mainPanel = new Ext.Panel({
  id : "mainPanel",
  layout : "border",
  items:[{
   region:"north",
   height:100,
   layout:"fit",
   frame:true,
   items:headPanel
  },{
   region:"south",
   height:30,
   layout:"fit",
   frame:true,
   items:footPanel
  },
  {
   /*frame:true,*/
   region:"west",
   width:200,
   title:"菜单",
   lines:false,
   autoScroll: true,
   layout:"fit",
//	可收缩面板
   collapsible: true,
//	可拉动边框
   split:true,
   items:menuPanel
   
  },{
   region:"center",
   layout:"fit",
   items:centerPanel
  }]
 });
 /*************主面板结束***********************/

 new Ext.Viewport({items:mainPanel,layout:'fit'});


第二部：
左边菜单面板Accordion布局，动态添加面板和面板的树 

 var menuPanel = new Ext.Panel({
  id:"menuPanel",
  layout:"accordion",//布局
  layoutConfig: {  
//            activeOnTop: true,  //设置打开的字面板置顶  
            fill: true,         //字面板充满父面板的剩余空间  
            hideCollapseTool: false,   //显示“展开收缩”按钮  
            titleCollapse: true,      //允许通过点击子面板的标题来展开或者收缩面板  
            animate: true,             //使用动画效果  
            autoWidth:true
         },
        listeners :{
          "beforerender":function(){
           Ext.Ajax.request({  
              url:"/LibrarySystem/menu/Menu_getMenus",  
//传输的json格式：[{'id':'1','iconCls':'setting','text':'系统管理','leaf':false},{'id':'3','iconCls':'team','text':'人员管理','leaf':false},{'id':'7','iconCls':'book1','text':'图书管理','leaf':false},{'id':'19','iconCls':'bookdetail1','text':'借阅管理','leaf':false},{'id':'9','iconCls':'bookp0','text':'图书借阅','leaf':false},{'id':'27','iconCls':'message0','text':'通知信息','leaf':false}]
              success:function(res){  
                 //如果服务器返回的json串是一个数组  
                 var obj = Ext.decode(res.responseText);  
                 for(var i = 0;i<obj.length;i++){
                  var treePanel = createTree(obj[i].id); //创建一棵树，并且将树的id传递给树根（根节点就是 和accordion的子面板的属性一样，此处必须用菜单的id作为节点id）
                  menuPanel.add({  //添加accordion布局的子面板，并添加其属性
                   id:"menu"+obj[i].id,//面板id，为了和树节点区分所以在前面加了一个menu
                   title:obj[i].text,//现实的菜单内容
                   iconCls:obj[i].iconCls,//自定义图标
                   items:treePanel//将树面板放到accordion子面板中
                  });
                 }
                 menuPanel.doLayout();  
              }  
           });
          },
         }
 });
----------------右侧主要显示区域 Tab面板-------------------
var centerPanel = new Ext.Panel({
  id:"centerPanel",
  layout : "fit",
  items:mainTabPanel
 });

var mainTabPanel = new Ext.TabPanel({
  /* 内容 */
  id : "mainTabPanel",
  margins:"0 10 0 0",
  /*title : "内容",*/
  xtype : "tabpanel",
  activeTab : 0,
  items : [ {
   id : "welcome",
   title : "欢迎页面",
   iconCls : 'application_homeIcon',
   layout : "fit",
   html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/welcome/welcome.html></iframe>',
  } ]
 });

-------------------创建根节点----------------------------------
 function createRoot(id){
  return new Ext.tree.AsyncTreeNode({
   text : "菜单根节点",
   id : id,
   leaf : false
  });
---------------------创建子节点-----------------------------------------
 function createTree(id){
  return new Ext.tree.TreePanel({
   root : createRoot(id),
   loader : mainLoader, //自动请求服务器，返回子节点
//子节点返回数据格式：[{'id':'4','iconCls':'role','text':'人员角色管理','leaf':true},{'id':'5','iconCls':'userIcon','text':'人员账号管理','leaf':true},{'id':'6','iconCls':'position','text':'人员信息管理','leaf':true},{'id':'10','iconCls':'username','text':'个人信息管理','leaf':true},{'id':'11','iconCls':'password','text':'修改密码','leaf':true},{'id':'25','iconCls':'log','text':'人员管理日志','leaf':true}]
   border:false,
   lines:false,
   rootVisible : false,
   enableTabScroll:true,
   listeners : {
    click : function(node, event) {
     event.stopEvent();// 阻止默认的事件
     if (node.isLeaf()) {
      // 叶子节点事件处理
      var tab = Ext.getCmp("mainTabPanel");
      // 此处可以进行ajax请求，获取autoLoad的路径
      //ajax请求url路径
      Ext.Ajax.request({
          url : "/LibrarySystem/menu/Menu_getMenusById",
          params: { id:node.id},
          success: function(response){
           var resultObject =  Ext.decode(response.responseText);
           var resultStateEnd = resultObject.url.split(".")[1];
           if(resultStateEnd=="jsp" || resultStateEnd=="html"){
            tab.add({
           id : node.id + "Tab",
           title : node.text,
           iconCls:resultObject.iconCls,
           html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src='+resultObject.url+'></iframe>',
           closable : true
          });
//	显示当前打开的面板
            tab.setActiveTab(node.id + "Tab");
           }else{
            tab.add({
           id : node.id + "Tab",
           title : node.text,
           html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/error/error.html></iframe>',
           closable : true
          });
//	显示当前打开的面板
            tab.setActiveTab(node.id + "Tab");
           }
          },
          failure: function(){
           Ext.Msg.show({
            title:"警告",
            msg:"请求数据失败",
            buttons:Ext.Msg.OK,
            icon: Ext.MessageBox.WARNING
           });
           tab.add({
          id : node.id + "Tab",
          title : node.text,
          html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/error/error.html></iframe>',
          closable : true
         });
//	显示当前打开的面板
           tab.setActiveTab(node.id + "Tab");
          }
       });
     } else {
      // 单击菜单显示或者隐藏
      node.toggle();
     }
    }
   }
  });
 }




Ext.onReady(function(){
 
 
 /** **************树根开始****************************** */
 function createRoot(id){
  return new Ext.tree.AsyncTreeNode({
   text : "菜单根节点",
   id : id,
   leaf : false
  });
 }
 
 var mainLoader = new Ext.tree.TreeLoader({
  url : "/LibrarySystem/menu/Menu_getMenus",
  baseParams : {
   id:""
  }

 });
 mainLoader.on("beforeload", function(loader, node) {
  loader.baseParams.id = (node.id == "root" ? "":node.id );
 });

 /****************树根结束****************************** */
 
 /*************头部面板开始***********************/
 var headPanel = new Ext.Panel({
  id:"headPanel",
  autoLoad:"/LibrarySystem/app/foot/head.html"
 });
 /*************头部面板开始***********************/
 
 /*************尾部面板开始***********************/
 var footPanel = new Ext.Panel({
  id:"footPanel",
  autoLoad:"/LibrarySystem/app/foot/foot.html"
 });
 /*************尾部面板结束***********************/
 
 
 /*************主要内容面板开始***********************/
 
 var mainTabPanel = new Ext.TabPanel({
  /* 内容 */
  id : "mainTabPanel",
  margins:"0 10 0 0",
  /*title : "内容",*/
  xtype : "tabpanel",
  activeTab : 0,
  items : [ {
   id : "welcome",
   title : "欢迎页面",
   iconCls : 'application_homeIcon',
   layout : "fit",
   html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/welcome/welcome.html></iframe>',
  } ]
 });
 
 var centerPanel = new Ext.Panel({
  id:"centerPanel",
  layout : "fit",
  items:mainTabPanel
 });
 
 var menuPanel = new Ext.Panel({
  id:"menuPanel",
  layout:"accordion",
  layoutConfig: {  
//            activeOnTop: true,  //设置打开的字面板置顶  
            fill: true,         //字面板充满父面板的剩余空间  
            hideCollapseTool: false,   //显示“展开收缩”按钮  
            titleCollapse: true,      //允许通过点击子面板的标题来展开或者收缩面板  
            animate: true,             //使用动画效果  
            autoWidth:true
         },
         listeners :{
          "beforerender":function(){
           Ext.Ajax.request({  
              url:"/LibrarySystem/menu/Menu_getMenus",  
              success:function(res){  
                 //如果服务器返回的json串是一个数组  
                 var obj = Ext.decode(res.responseText);  
                 for(var i = 0;i<obj.length;i++){
                  var treePanel = createTree(obj[i].id);
                  menuPanel.add({  
                   id:"menu"+obj[i].id,
                   title:obj[i].text,
                   iconCls:obj[i].iconCls,
                   items:treePanel
                  });
                 }
                 menuPanel.doLayout();  
              }  
           });
          },
         }
 });
 /*************主要内容面板结束***********************/
 
 function createTree(id){
  return new Ext.tree.TreePanel({
   root : createRoot(id),
   loader : mainLoader,
   border:false,
   lines:false,
   rootVisible : false,
   enableTabScroll:true,
   listeners : {
    click : function(node, event) {
     event.stopEvent();// 阻止默认的事件
     if (node.isLeaf()) {
      // 叶子节点事件处理
      var tab = Ext.getCmp("mainTabPanel");
      // 此处可以进行ajax请求，获取autoLoad的路径
      //ajax请求url路径
      Ext.Ajax.request({
          url : "/LibrarySystem/menu/Menu_getMenusById",
          params: { id:node.id},
          success: function(response){
           var resultObject =  Ext.decode(response.responseText);
           var resultStateEnd = resultObject.url.split(".")[1];
           if(resultStateEnd=="jsp" || resultStateEnd=="html"){
            tab.add({
           id : node.id + "Tab",
           title : node.text,
           iconCls:resultObject.iconCls,
           html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src='+resultObject.url+'></iframe>',
           closable : true
          });
//	显示当前打开的面板
            tab.setActiveTab(node.id + "Tab");
           }else{
            tab.add({
           id : node.id + "Tab",
           title : node.text,
           html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/error/error.html></iframe>',
           closable : true
          });
//	显示当前打开的面板
            tab.setActiveTab(node.id + "Tab");
           }
          },
          failure: function(){
           Ext.Msg.show({
            title:"警告",
            msg:"请求数据失败",
            buttons:Ext.Msg.OK,
            icon: Ext.MessageBox.WARNING
           });
           tab.add({
          id : node.id + "Tab",
          title : node.text,
          html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/error/error.html></iframe>',
          closable : true
         });
//	显示当前打开的面板
           tab.setActiveTab(node.id + "Tab");
          }
       });
     } else {
      // 单击菜单显示或者隐藏
      node.toggle();
     }
    }
   }
  });
 }
 
 /*************主面板开始***********************/
 var mainPanel = new Ext.Panel({
  id : "mainPanel",
  layout : "border",
  items:[{
   region:"north",
   height:100,
   layout:"fit",
   frame:true,
   items:headPanel
  },{
   region:"south",
   height:30,
   layout:"fit",
   frame:true,
   items:footPanel
  },
  {
   /*frame:true,*/
   region:"west",
   width:200,
   title:"菜单",
   lines:false,
   autoScroll: true,
   layout:"fit",
//	可收缩面板
   collapsible: true,
//	可拉动边框
   split:true,
   items:menuPanel
   
  },{
   region:"center",
   layout:"fit",
   items:centerPanel
  }]
 });
 /*************主面板结束***********************/
 new Ext.Viewport({items:mainPanel,layout:'fit'});
});


爱搞笑，爱生活
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Extjs折叠布局中添加树
05-25
整个程序的入口点是`Ext.onReady`函数，这里创建了三个主要的面板：顶部的`topPanel`，左侧的`leftPanel`（包含折叠布局和树），以及右侧的`rightPanel`（使用了标签页布局Tab Panel）。各个面板通过`region`属性...
sencha touch accordion(折叠) 布局
05-21
创建一个简单的`Accordion`布局，你需要创建一个`Ext.container.Container`，并将其`layout`属性设置为`'accordion'`，然后添加多个面板作为子项。例如： ```javascript Ext.create('Ext.container.Viewport', {...
如何动态加载accordion布局的panel呢？
pxsnow的博客
12-30 208
这种效果是可以实现的,只需要监听一个事件,然后通过AJAX取得JSON格式的菜单项目信息,然后动态的对这个TreePanel添加就行了,我试了效果已出来,代码如下: ...... this.accPanel = new Ext.Panel({ region:'west', baseCls:'x-panel', ...
extjs一次性加载（AccordinTreePanel ）
iteye_4177的博客
04-03 231
//加载树 MainTreePanel = Ext.extend(QM.ui.AccordinTreePanel,{    constructor : function() { MainTreePanel.superclass.constructor.call(this, { region:'center',                 ...
Ext JS4序列教程之二 ：异步加载accordion和Tree菜单
死牛崇拜的专栏
12-06 5844
1、序言 EXT JS4序列教程主要讲解WEB开发中一些常用的组件，例如Tree,Grid,Combobox,form等，EXT JS4的出现为广大程序员带来了福音，我们可以用较少的代码，实现很炫丽的效果，我在很多项目的架构中都使用EXT JS作为核心的WEB框架，配合jQuery框架，大家很容易实现一个用户体验很不错的软件系统（我们称之为高大上，哈哈哈）。EXT JS自推出以来，其性能就饱
extjs4 Accordion布局
weixin_34250709的博客
04-02 75
2019独角兽企业重金招聘Python工程师标准>>> ...
Ext AccordionLayout 布局
正走向大牛的菜鸟
07-10 191
Accordion布局类似于QQ中的伸缩菜单，通过点击可以折叠展开并伴有动画效果，使用该布局只需加上layout:'accordion'即可，如下代码：   new Ext.Panel({renderTo:"hello",title:"容器组件",width:500,height:200,layout:"accordion",layoutConfig: {   titleCollapse:...
Ext Js权威指南(.zip.001
09-26
第9章　容器、面板、布局和视图 / 430 9.1　容器与布局的关系 / 430 9.2　容器 / 431 9.2.1　容器的创建过程：ext.container.abstractcontainer与ext.container.container / 431 9.2.2　ext.container.abstract...
ext UI效果模板
09-14
4. 导航和布局：如选项卡面板、 accordion布局、浮动窗口、弹出对话框等，帮助构建层次分明的页面结构。 5. 图标和图像：EXT内置了丰富的图标库，可以轻松美化界面。 6. 树形视图：用于展现层级关系的数据，支持展开...
ext的课件，ppt版,适合有面向对象基础人士
08-12
1. Accordion布局：这种布局允许子组件折叠和展开，每个子组件占据一行。它由`Ext.layout.Accordion`定义，适合展示分段内容，如FAQ或层级菜单。 2. Border布局：基于`Ext.layout.BorderLayout`，它将容器划分为五...
extjs菜鸟做的动态accordion加动态tree
08-27
使用struts2+spring2+hibernate+extjs2制作的动态accordion加动态树
ExtJs布局Ext.layout.AccordionLayout布局
shenzhen_zsw的专栏
12-04 4115
   Accordion布局：又可称作为折叠布局。Ext.layout.AccordionLayou扩展子Ext.layout.FitLayout好像与QQ类表一样。   如图所示：相关的JS文件如下：Ext.onReady(function() { var accordionLayout = new Ext.Panel({  title:"Ext.layout.Accordi
Ext.Net中，第二种：AccordionLayout布局方式。
weixin_30924239的博客
05-10 97
（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！） 在Ext.Net中一共有14种布局方式，下面我会一一介绍。 第二种：AccordionLayout布局方式。 AccordionLayout布局方式也称为：手风琴布局方式。 这种布局方式比较简单！ 下面我们看一下代码： 页面源码： <ext:...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航
weixin_34217773的博客
07-04 411
系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看，但是基于原有树形无限级别的设计，没有办法只能已树形展示 先来看原来的效果 改变后的效果，当然我已经做好了，最后只放出代码供大家参考，其实网上也有这方面的资料，但是不是很好用，我还是自己写了 手风琴一直都是比较漂亮和受欢迎的，但是基于树多级别来说，做起来就比较麻烦，所以我这里也用了手风琴加树...
extjs4-----panel的accordion布局以及treePanel导航
scqdscy1994的博客
11-30 1817
如何创建一个accordion布局的panel？ 官方例子 Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', width: 300, height: 300, defaults: { // applied to each contained panel bodyS
Ext：Ext.menu.Menu动态加载菜单
mehua413的专栏
10-14 2905
<br />var createMenu = new Ext.menu.Menu({<br />    id : 'mainMenu',<br />    items : [],<br />    listeners : {<br />     click : function(menu, item, e) {<br />      var record = groupLevelStore.getAt(item.getId());<br />      addGroup(record);<br />    
Extjs动态树形菜单
看山 看水 看世界
08-09 2631
Extjs动态树形菜单树形菜单在各种管理系统使用非常广泛，同时市面上也有很多框架提供了动态树形菜单的生成，正好最近有项目用到Extjs所以下面介绍基于Extjs的动态树形菜单。 程序环境：extjs 4.2+spring-boot 后续版本的应该差距不大 模块设计菜单分为三级菜单 secondleve(1)->(n)thirdlevel(1)->(n)fourthlevel彼此分别是一对多的关
ExtJS中accordion布局与树面板结合成手风琴状面板以及动态修改panel
MrtangLCX的博客
02-05 404
Ext.onReady(function () { //首先定义一个空的panel,然后还需要treestroe加载树 var roleMenuStore = Ext.create('Ext.data.TreeStore', { storeId: 'roleMenuStore', autoLoad: false, loadin...
Ext4 accordion布局详解：面板动态展开与折叠
Ext4的Accordion布局是一种常见的窗口管理方式，它在用户界面设计中扮演着关键角色，特别适用于那些需要展示多组可切换内容区域的应用场景。Accordion布局的核心特点就是其单选模式，即在一个时间内，只能有一个面板...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值