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:程序效果
点击的每个面板都会置顶:
相关推荐
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2217105
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219592
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
NULL 博文链接:https://lixue150.iteye.com/blog/1133035
extjs-theme-bootstrap-master.zip
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 ...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2218833
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...
ext-2.3.0及教程,可以根据教程对Extjs有个了解
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
第四讲:extjs4.0的数据代理-Proxy 第五讲:extjs4.0的读写器reader,writer 第六讲:extjs4.0的数据集store 第七讲:extjs4.0的事件机制Event 第八讲:extjs4.0的Ajax 第九讲:extjs4.0的core包和Ext类 第十讲:...
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 ...
这是一个Ext框架,我对此框架很感兴趣。。。特别想了解一下。。。
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
第十四讲: EXTJS4.0的高级组件Grid补充01选择模式Selection和表格特性Feature 第十五讲: EXTJS4.0的高级组件Grid补充02插件和其他相关知识 第十六讲: EXTJS4.0的高级组件Tree上 第十七讲: EXTJS4.0的高级组件Tree下 ...
Extjs4学习指南21集无代码 extjs网上商城项目 ExtJs视频教程 google调试extjs视频 从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs,永久有效,所有视频解压密码相同,在文档中有写,如有问题请及时...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219726
Alien::Web::ExtJS::V3 - ExtJS 3.x 源的 Perl 发行版 版本 ExtJS v3.4.11 (GPL) 概要 use Alien::Web::ExtJS::V3 '3.4.11'; my $dir = Alien::Web::ExtJS::V3->dir; print "ExtJS sources are installed in: $dir\...