ExtJS 4.2 教程-08:布局系统详解
ExtJS 4.2 系列教程导航目录:
- ExtJS 4.2 教程-01:Hello ExtJS
- ExtJS 4.2 教程-02:bootstrap.js 工作方式
- ExtJS 4.2 教程-03:使用Ext.define自定义类
- ExtJS 4.2 教程-04:数据模型
- ExtJS 4.2 教程-05:客户端代理(proxy)
- ExtJS 4.2 教程-06:服务器代理(proxy)
- ExtJS 4.2 教程-07:Ext.Direct
- ExtJS 4.2 教程-08:布局系统详解
今天我们来对ExtJS 4.2 的布局(Layout)进行一次系统的学习。在ExtJS 4.2中,提供了十几种布局,我们可以在api中看到:
在这些布局中,我们常用的有Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。
Auto Layout
Auto Layout 是ExtJS 容器的默认布局,当我们定义一个panel的时候,如果没有指定panel的布局,那么它就会使用Auto Layout来组织子元素。
Auto Layout 的用法(查看在线演示):
var panel = Ext.create("Ext.panel.Panel", {title: "Auto Layout",width: 500,height: 400,items: [{ xtype: "panel", title: "第一个子Panel", width: 200, height: 100 },{ xtype: "panel", title: "第二个子Panel", width: 150, height: 100 },{ xtype: "textfield", width: 300, fieldLabel: "请输入用户名" }],renderTo: "container" });
Auto Layout 本身不包含任何特殊的布局功能,它只是提供了一种调用子元素布局系统的通道。
Anchor Layout
Anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。
Anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如:
- anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25%
- anchor:'-295 -300',表示组件相对于父容器右边距为295,相对于父容器的底部位300
- anchor:'-250 10%',混合模式,表示组件党对于如容器右边为250,高度为父容器的10%
Anchor Layout 用法(查看在线演示):
var panel = Ext.create("Ext.panel.Panel", {width: 500,height: 400,title: "Anchor布局",layout: "anchor",x: 60,y: 80,renderTo: "container",items: [{ xtype: 'panel', title: '75% Width and 25% Height', anchor: '75% 25%' },{ xtype: 'panel', title: 'Offset -300 Width & -200 Height', anchor: '-295 -300' },{ xtype: 'panel', title: 'Mixed Offset and Percent', anchor: '-250 10%' }] });
Absolute Layout
Absolute Layout 继承自 Anchor Layout,并增加了X/Y配置选项对子组件进行定位,Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用。
Absolute Layout 用法(查看在线演示):
Ext.create('Ext.form.Panel', {title: 'Absolute Layout',width: 400,height: 275,layout: 'absolute',url: 'save-form.php',defaultType: 'textfield',items: [{ x: 10, y: 10, xtype: 'label', text: 'Send To:' },{ x: 80, y: 10, name: 'to', anchor: '90%' },{ x: 10, y: 40, xtype: 'label', text: 'Subject:' },{ x: 80, y: 40, name: 'subject', anchor: '90%' },{ x: 0, y: 80, xtype: 'textareafield', name: 'msg', anchor: '100% 100%' }],renderTo: 'container' });
Column Layout
Column 布局用来创建一个多列的布局格式,列宽度可以使用像素值或百分比。
Column布局支持一个columnWidth属性,在布局过程中,使用columnWidth指定每个面板的宽度的百分比,他们的和加起来为1。
columnWidth和width可混合使用,这个时候系统将减去width占用的宽度,然后再根据百分比计算列的宽度。
另外,如果任何子面板没有指定columnWidth值,那么它将占满剩余的空间。
Column Layout 用法(查看在线演示):
// 所有列都是百分比,他们的和加起来为1 Ext.create('Ext.panel.Panel', {title: 'Column Layout',width: 350,height: 250,layout: 'column',items: [{title: 'Column 1',columnWidth: 0.25}, {title: 'Column 2',columnWidth: 0.55}, {title: 'Column 3',columnWidth: 0.20}],renderTo: "container" });// width和columnWidth混合使用 Ext.create('Ext.Panel', {title: 'Column Layout - Mixed',width: 350,height: 250,layout: 'column',items: [{title: 'Column 1',width: 120}, {title: 'Column 2',columnWidth: 0.7}, {title: 'Column 3',columnWidth: 0.3}],renderTo: "container" });
Border Layout
Border 布局将界面分为上下左右中五个区域,分别用north、south、west、east、center来表示,它的每个子项用region指定元素的位置。
虽然Border布局看上去比较麻烦,但用起来却非常简单(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {width: 500,height: 300,title: 'Border Layout',layout: 'border',items: [{title: 'South Region (可调整大小)',region: 'south', // 所在的位置xtype: 'panel',height: 100,split: true, // 允许调整大小margins: '0 5 5 5'}, {title: 'West Region (可折叠/展开)',region: 'west',xtype: 'panel',margins: '5 0 0 5',width: 200,collapsible: true, // 可折叠/展开id: 'west-region-container',layout: 'fit'}, {title: 'Center Region (必须)',region: 'center', // 必须指定中间区域xtype: 'panel',layout: 'fit',margins: '5 5 0 0'}],renderTo: "container" });
Accordion Layout
Accordion Layout 是将其子元素以手风琴的效果显示。
它的子元素必须是panel,或者panel的子类。
Accordion Layout 的使用非常普遍,我们来一个简单的示例(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {title: "Accordion Layout",width: 300,height: 300,defaults: {// 应用到所有子panelbodyStyle: 'padding:15px'},layout: {// 布局配置type: 'accordion',titleCollapse: false,animate: true,activeOnTop: true},items: [{title: 'Panel 1',html: 'Panel content!'}, {title: 'Panel 2',html: 'Panel content!'}, {title: 'Panel 3',html: 'Panel content!'}],renderTo: "container" });
Card Layout
Card 布局是一种向导试的布局方式,它在显示的时候,本身是没有上一步、下一步按钮的,但提供了上一步、下一步的操作方法,我们需要在界面中添加导航按钮来配合实际的业务需要。
示例代码如下(查看在线示例):
var navigate = function (panel, direction) {var layout = panel.getLayout();layout[direction]();Ext.getCmp('move-prev').setDisabled(!layout.getPrev());Ext.getCmp('move-next').setDisabled(!layout.getNext()); };var panel = Ext.create('Ext.panel.Panel', {title: '示例向导,x: 50,y: 50,width: 300,height: 200,layout: 'card',bodyStyle: 'padding:15px',defaults: {border: false},bbar: [{id: 'move-prev',text: '上一步',handler: function (btn) {navigate(btn.up("panel"), "prev");},disabled: true},'->',{id: 'move-next',text: '下一步',handler: function (btn) {navigate(btn.up("panel"), "next");}}],items: [{id: 'card-0',html: '<p>第一步</p>'}, {id: 'card-1',html: '<p>第二步</p>'}, {id: 'card-2',html: '<p>第三步</p>'}],renderTo: "container" });
Fit Layout
Fit Layout 是很常用的一种布局,在Fit布局中,子元素将自动填满整个父容器。
在Fit 布局下,对其子元素设置宽度是无效的。如果在Fit 布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。
Fit Layout 示例代码(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {title: 'Fit Layout',x: 30,y: 30,width: 300,height: 150,layout: 'fit',items: {title: '内部Panel',html: '内部Panel 的内容',bodyPadding: 20,border: false},renderTo: "container" });
Form Layout
Form Layout 用来组织表单字段的,Form Layout 下的表单字段会被拉伸到表单的宽度。
示例代码如下(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {width: 350,height: 240,title: "FormLayout Panel",layout: 'form',bodyPadding: 5,defaultType: 'textfield',items: [{fieldLabel: '姓名',name: 'name',allowBlank: false}, {fieldLabel: '公司',name: 'company'}, {fieldLabel: 'Email',name: 'email',vtype: 'email'}, {fieldLabel: '年龄',name: 'age',xtype: 'numberfield',minValue: 0,maxValue: 100}],renderTo: "container" });
Table Layout
Table Layout 将内容绘制在table标签中,table的列数可以指定,还可以通过设置rowSpan和colSpan来创建复杂的布局。
示例代码如下(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {title: 'Table Layout',width: 300,height: 150,layout: {type: 'table',// 列数columns: 3},defaults: {bodyStyle: 'padding:20px'},items: [{html: 'Cell A content',rowspan: 2 //占用两行}, {html: 'Cell B content',colspan: 2 //占用两列}, {html: 'Cell C content',cellCls: 'highlight'}, {html: 'Cell D content'}],renderTo: "container" });
Box Layout
Box Layout 是HBox Layout 和 VBox Layout 的父类,一般不会直接用到。
HBox Layout
HBox Layout 将子元素放在同一水平位置,通过align设置子元素的对齐方式,对齐方式有:
- top : 默认的对其方式,顶部对齐
- middle : 中间对齐
- bottom : 底部对齐
- stretch : 拉伸对齐,所有子元素根据父容器的高度拉伸
- stretchmax : 拉伸对齐,所有子元素根据子元素中最高的高度拉伸
示例代码如下(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {width: 500,height: 300,title: "HBoxLayout Panel",layout: {type: 'hbox',align: 'stretch'},items: [{xtype: 'panel',title: 'Inner Panel One',flex: 2}, {xtype: 'panel',title: 'Inner Panel Two',flex: 1}, {xtype: 'panel',title: 'Inner Panel Three',flex: 1}],renderTo: "container" });
VBox Layout
VBox Layout 以垂直的方式组织所有子元素。它的子元素可以通过align属性来设置对齐方式,vbox的对齐方式有:
- left : 左对齐,默认对其方式
- center : 中间对齐
- right : 右对齐
- stretch : 以父容器的宽度拉伸对齐
- stretchmax : 以所有子元素中的最大宽度拉伸对齐
示例代码如下(查看在线示例):
var panel = Ext.create("Ext.panel.Panel", {width: 500,height: 400,title: "VBoxLayout Panel",layout: {type: 'vbox',align: 'center'},items: [{xtype: 'panel',title: 'Inner Panel One',width: 250,flex: 2},{xtype: 'panel',title: 'Inner Panel Two',width: 250,flex: 4},{xtype: 'panel',title: 'Inner Panel Three',width: '50%',flex: 4}],renderTo: "container" });本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/extjs-course-8-Ext-Layout.html,如需转载请自行联系原作者
ExtJS 4.2 教程-08:布局系统详解相关推荐
- ExtJS 4.2心得和总结:布局系统详解(Ext.layout.container)
在ExtJS 4.2中,提供了十几种布局,我们可以在api中看到如下图: 我们可以看到很多,比如Accordion.Border.Column.Fit.Form等.下面我们来看一下具体的用法. 下面是 ...
- Redis数据库教程——系统详解学习Redis全过程
Redis数据库教程--系统详解学习Redis全过程 Redis快速入门:Key-Value存储系统简介 Key-Value存储系统: Key-Value Store是当下比较流行的话题,尤其 ...
- 32位系统是指地址_不起眼却很重要丨32位操作系统与64位操作系统详解(含查询教程)...
大家好,我是小诸葛,一个喜欢捣鼓电脑的小机灵鬼儿,如果关注电脑 手机信息,可以关注小诸葛! 小诸葛 在下载软件的时候,可能会遇到需要选择32位或64位操作系统的选项,对小白来说,32跟64是什么都不知 ...
- mac linux win三系统安装教程,macbookpro上安装三系统详解教程(macosxwindowslinuxubuntu).doc...
macbookpro上安装三系统详解教程(macosxwindowslinuxubuntu) macbook pro上安装三系统详解教程(mac os x+windows+linux ubuntu) ...
- 计算机架构64位查看,32位操作系统与64位操作系统详解(含查询教程)
小诸葛 在下载软件的时候,可能会遇到需要选择32位或64位操作系统的选项,对小白来说,32跟64是什么都不知道,于是就会瞎选一通,运气好的,电脑本身是64位操作系统的,选完下载后没问题,但如果是32位 ...
- Nmap扫描教程之基础扫描详解
Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在 ...
- 基于YOLOv5的目标检测系统详解(附MATLAB GUI版代码)
摘要:本文重点介绍了基于YOLOv5目标检测系统的MATLAB实现,用于智能检测物体种类并记录和保存结果,对各种物体检测结果可视化,提高目标识别的便捷性和准确性.本文详细阐述了目标检测系统的原理,并给 ...
- html栅格系统格式,Bootstrap的栅格系统是什么?栅格系统详解
本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...
- AndroidManifest.xml文件配置教程及相关指令详解
AndroidManifest.xml 是每个android程序中必须的文件,它位于整个项目的根目录.我们每天都在使用这个文件,往里面配置程序运行所必要的组件,权限,以及一些相关信息.但是对于这个文件 ...
最新文章
- 研究院引进:博士70万;硕士40万
- 传感器数据完善 AI 功能,激起机器人“网络效应”
- python官网下载步骤手机-手机python下载
- PAL算法原理及代码实现
- 拒绝干扰 解决Wi-Fi的最大问题《转》
- mysql查询出去年某月_Mysql 查询某年,某季度,某月,某天搜索方法总结
- ActionBarDisplayOptions展示选项的菜单
- java 泛型调用方法调用_java – 如何使用泛型调用最具体的方法?
- JDK 9、10和11中的安全性增强
- U3D性能分析 Profiling
- 京条计划,今日头条不仅是京东的又一流量入口
- 【HDU1251+POJ2001+POJ3630】单词前缀问题整理
- 计蒜客 2016计蒜之道比赛 初赛第四场 记录
- 任务 F :工时统计
- 一阶系统开环传递函数表达式_带钢纠偏液压系统模糊PID 控制与仿真
- 类文件解析及引申的一系列仇怨
- zzuli:1000从今天开始入坑C语言
- 【转】高手速成android开源项目【View篇】
- ERD Online 4.0.5 在线数据库建模、元数据管理(免费、私有部署)
- 解决dubbo问题:forbid consumer