ExtJS的使用方法汇总(5)——布局
来源:互联网 发布:linux日志收集 编辑:程序博客网 时间:2024/06/05 19:58
所谓布局,简单来说就是决定把什么东西放到什么位置上,对于管理软件来说,一般都是首部放标题,左边放菜单栏,空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。
一、传统的布局方式
我们可以用Ext.Viewport类对整个页面进行整体布局,具体使用方法如下:
效果图如图1所示:
图1 传统的布局形式
二、最常用的边框布局BorderLayout
Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分,除了中间区域以外,其他的区域又都是可以省略的,因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下:
效果图如图2所示。
图2 使用BorderLayout的布局
注意:center是绝对不能省略的,如果items中缺少了region:'center'就会报错,会造成程序中断。
2.1 设置子区域的大小
我们仅仅需要添加width和height参数,这样就可以指定每个子区域的大小了。但是,north和south两个区域只能指定高度值,宽度值由BorderLayout自动计算;east和west只能指定宽度值,高度值由BorderLayout自动计算;center区域的大小由其他4个部分决定。设置的代码如下所示:
2.2 使用split并限制它的范围
使用split后,我们可以允许用户自动拖放以改变某一个区域的大小,实现的方式只要设置split:true参数即可实现,具体代码如下。
实现效果图如图3所示。
图3 设置split:true后的效果图
2.3 子区域的展开和折叠
该功能可以让一个区域展开和折叠(相当于隐藏),实现的方式只需要配置几个参数即可,具体代码如下,主要配置参数是collapsible:true,这个参数激活了某个区域的折叠功能,而且前面的title参数也是必须设置的。实现代码和效果图如下所示。
图4 带有折叠效果的布局
三、制作伸缩菜单的布局——Accordion
Accordion是EXT中默认布局的一部分,如果想用它,直接将区域加上layout:'accordion'即可,其他部分基本无需改动。我们利用ViewPort制作出只有west和center两个区域的BorderLayout,在west部分放上Accordion,实现方式如下面代码所示。
效果图如图5所示。
图5 使用了Accordion的示例
设置了layout:'accordion'后,再使用items添加3个元素,记得每个子元素里都要加上title参数,accordion没有提供默认的标题,不设置标题是一定会出错的。与布局有关的配置项都写到layoutConfig里。
- ExtJS的使用方法汇总(5)——布局
- ExtJS的使用方法汇总(5)——布局
- ExtJS的使用方法汇总5——布局
- ExtJS的使用方法汇总(3)——树形结构
- ExtJS的使用方法汇总(6)——工具栏和菜单
- 原创 ExtJS的使用方法汇总(3)——树形结构
- ExtJS的使用方法汇总(6)——工具栏和菜单
- ExtJS的使用方法汇总3——树形结构
- ExtJS的使用方法汇总6——工具栏和菜单
- ExtJS的使用方法汇总(6)——工具栏和菜单
- ExtJS的使用方法汇总—配置和表格控件使用
- ExtJS——页面布局汇总
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- ExtJS的使用方法汇总(2)——表单与输入控件
- ExtJS的使用方法汇总(4)——拖放以及弹出窗口
- ExtJS的使用方法汇总(7)——数据存储与传输
- ExtJS的使用方法汇总(2)——表单与输入控件
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- 查看网站占用内存和cpu资源的方法
- 基于HTTP协议的开源中文分词系统:HTTPCWS 1.0.0 发布
- jsp日期选择器
- 中国移动飞信免费发短信API接口(第三方 Fetion API)
- sed学习笔记 更新中...
- ExtJS的使用方法汇总(5)——布局
- 网络的进程
- 基于RIA Flex Flash 平台开发的进销存企业信息管理系统开发经验
- 如何在Log4j中根据输出需要控制log的显示级别
- 关于:Warning: skipping non-radio button in group的处理方法整理。
- php中empty(),is_null(),isset(),bool之间的区别
- 几种算法啊~~
- Tag Cloud相关资源链接
- POJ 1182 1703 并查集的应用