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:程序效果
点击的每个面板都会置顶: