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

来源：互联网发布：淘宝商品搜索排行榜编辑：程序博客网时间：2024/05/21 07:04

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>

2：程序效果

点击的每个面板都会置顶：