Ext Js 3.2 折叠布局-AccordionLayout的应用

原创

ccna_zhang 2022-09-05 16:56:30 博主文章分类：Ext Js ©著作权

文章标签 ext stylesheet html layout string 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者ccna_zhang的原创作品，请联系作者获取转载授权，否则将追究法律责任

1：折叠布局---AccordionLayout的简单介绍

Ext.layout.AccordionLayout对应面板布局layout配置项的名称为accordion，该面板继承自Ext.layout.FitLayout布局，该布局会包含多个字面板，

任何时候都只有一个字面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持，最终效果可以像手风琴那样拉来拉去，就是类似QQ

面板的功能。

代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>formPanel</title>
    
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  
  <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
  <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext3.2/ext-all.js"></script>
  <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
  
  <script type="text/javascript">
      Ext.onReady(function() {
      var win2 = new Ext.Window({
          title: 'AccordionLayout',
          height: 300,
          width: 200,
          plain: true,
          layout: 'accordion',
          layoutConfig: {
             activeOnTop: true,  //设置打开的字面板置顶
             fill: true,         //字面板充满父面板的剩余空间
             hideCollapseTool: false,   //显示“展开收缩”按钮
             titleCollapse: true,      //允许通过点击子面板的标题来展开或者收缩面板
             animate: true             //使用动画效果
          },
          items: [ 
            new Ext.Panel({
              title: 'panel1',
              id: 'panel1',
              html: '第一个面板',
              frame: true
            }),
             new Ext.Panel({
              title: 'panel2',
              id: 'panel2',
              html: '第二个面板',
              frame: true
            }),
             new Ext.Panel({
              title: 'panel3',
              id: 'panel3',
              html: '第三个面板',
              frame: true
            })
            ]
        });
              win2.show();
    });
  </script>
  </head>
  <body>
    <div id="form1"> </div>
  </body>
</html>