Extjs--12种布局方式
按照Extjs的4.1的文档来看，extjs的布局方式大致有12种，下面一一介绍，有些代码就是文档中的。
1.Border 边界布局
border布局，最多可以将页面分割为“东南西北中”五部分，是最常用的一种布局方式。我们可以根据项目的实际需求保留其中的部分区域，而将其他部分隐藏掉。
1.1效果图预览
1.2 代码demo
Ext.onReady(function () {
//border布局 最多可将页面划分为5个区域
//使用Viewport容器 可自适应页面窗口大小
//一个页面只可有一个viewport
new Ext.Viewport({
title: "border layout",
layout: "border",
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
//collapsible:是否可折叠
{ region: "west", width:90, title: 'west', collapsible: true },
{ region: "east", width: 90, title: 'east', collapsible: true },
{ region: "north", height: 100, title:'north' , collapsible:true },
{ region: "center", split: true, border: true, collapsible: true,title:'center' },
{ region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 },
]
});
});1.3 关注点
a.north和south区域需要指定高度height,west和east区域需要指定宽度width。
b.尽管当不包含center组件时，页面并不会由于语法错误而无法显示，但页面中会有一部分区域空出来。所以在使用border布局时，必须要定义其center区域。
c.center域不必赋予其宽度和高度，即使你定义了其宽高也不会有任何效果；当其他区域未定义比如south，center域会自动填充空出来的部分，如下图：
2.accordion 手风琴布局【可折叠布局】
可折叠的accordion通常被用来作为导航栏或一级菜单来使用，手风琴的每个title定义为一级菜单，在其面板上定义菜单树，就是一个完整的导航了。
2.1 预览
2.2代码demo
Ext.onReady(function () {
//定义手风琴布局
var accordion = Ext.create("Ext.panel.Panel", {
title: "west",
layout: "accordion", //设置为手风琴布局
layoutConfig: {
animate: true
},
width: 250,
minWidth: 90,
region: "west", //设置方位 位于border布局的west
split: true,
collapsible: true,
items: [
{ title: "面板一", html: "面板一", iconCls: "save" },
{ title: "面板二", html: "面板二", iconCls: "search" },
{ title: "面板三", html: "面板三", iconCls: "back" },
{ title: "面板四", html: "面板四", iconCls: "12" }
]
});
//整体布局采用border
new Ext.Viewport({
title: "Viewport",
layout: "border", //这里是（border）边界布局
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
accordion, //这里是（accordion）手风琴布局
{region: "east", width: 90, title: 'east', collapsible: true },
{ region: "north", height: 100, title: 'north', collapsible: true },
{ region: "center", split: true, border: true, collapsible: true, title: 'center' },
{ region: "south", title: "south", split: true, border: true, collapsible: true, height: 100 }
]
});
});2.3 关注点
a.只有 Ext的各种Panel和Ext.panel.Panel的子类可以用于这种布局的容器中.
3.Anchor 锚点布局
锚点布局将子元素与父容器绑定到了一块，当父容器大小发生改变时，所有固定的子项将按各自的anchor 规则自动被重新渲染固定.
3.1 预览图
3.2 代码demo
Ext.onReady(function(){
//锚点布局
//容器内子项通过比例布局
//若容器大小改变 子元素等比缩放
Ext.application({
name: 'anchor',
launch: function () {
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
x:100,
y:100,
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
title: '75% Width and 20% Height',
anchor: '75% 20%'
},
{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},
{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 20%'
}
]
});
}});
});3.3 关注点
a.上述代码中anchor属性有三种写法
一、anchor: ‘75% 20%’ 子元素宽度为容器的75%,高度为20%
二、 anchor: ‘-300 -200’ 子元素距离容器右边距300，底部200
三、anchor: ‘-250 20%’ 混合模式 子元素距离右边250，高度为20%
b.xtype用来定义子元素的类型
4.Absolute 绝对布局
Absolute布局继承自anchor,但是absolute是使用标准的x,y来定义子元素的坐标，所以当父容器大小改变时，子元素不会随之变化。
4.1 预览图
4.2代码demo
Ext.onReady(function(){
//绝对布局
//通过指定坐标来布局
//由于指定了坐标 无法自适应
Ext.application({
name: 'absolute',
launch: function () {
Ext.create('Ext.form.Panel', {
title: 'Absolute Layout',
width: 300,
height: 275,
x:400,
y:100,
layout: {
type: '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%' // anchor width by percentage
},{
x: 10,
y: 40,
xtype:'label',
text: 'Subject:'
},{
x: 80,
y: 40,
name: 'subject',
// anchor: '90%' // anchor width by percentage
},{
x:0,
y: 80,
xtype: 'textareafield',
name: 'msg',
// anchor: '100% 100%' // anchor width and height
}],
renderTo: Ext.getBody()
});
}});
});4.3 关注点
a.上面代码的预览中，如果改变父容器的大小，子元素不会随着变化，但有时我们既想使用坐标来定位，又希望子元素随容器变化，这时可以使用anchor属性，你可以去掉代码中的相关注释试试看。由于absolute是继承自anchor的，所有可以使用该属性。
5.Card 卡片布局
card管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等
5.1 效果图预览
5.2 代码demo
Ext.onReady(function(){
//卡片布局 可以定义多个卡片 但每次只显示一个
//可以通过setActiveItem指定
//常用来做向导、分步提交
Ext.application({
name: 'card',
launch: function () {
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());
};
Ext.create('Ext.panel.Panel', {
title: 'Card布局示例',
width: 300,
height: 202,
layout: 'card',
activeItem: 0, //默认显示的card 从0号开始
x: 30,
y: 60,
bodyStyle: 'padding:15px',
defaults: { border: false },
//bbar 底部工具栏 tbar顶部工具栏
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: '<h1>第一步</h1>'
},
{
id: 'card-1',
html: '<h1>第二步</h1>'
},
{
id: 'card-2',
html: '<h1>最后一步</h1>'
}],
renderTo: Ext.getBody()
});
}
});
});6.Fit
能使当容器只包含一个子元素时, 子元素自动填满容器
6.1 预览
6.2 代码demo
Ext.onReady(function(){
Ext.application({
name:"fit",
launch:function(){
//当设置为fit的面板有唯一的子组件时会自动填充满
Ext.create('Ext.panel.Panel', {
title: 'Fit Layout',
width: 300,
height: 150,
layout:'fit',
items: [{
title: 'Inner Panel',
html: 'This is the inner panel content',
bodyPadding: 20,
border: false
}],
renderTo: Ext.getBody()
});
}
});
});6.3关注点
a.如果你想要使用fit实现布局，就应该只给其一个子元素
7.form 表单布局
这个布局会将表单中所有的输入框纵向的依次的排列, 且宽度与容器宽度相等.
7.1预览
7.2 代码demo
Ext.onReady(function(){
Ext.application({
name:"form",
launch:function(){
//表单布局 所有输入框(表单项)纵向依次排列
//表单项宽度与容器宽度一致
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
});
}
});
});
7.3关注点
a.表单项的宽度与容器一致，所以在Form布局下各子控件的padding属性配置将被忽略
8.column 列布局
这个布局用于在一个多列格式中创建结构化布局的布局样式, 每列可以用百分比或固定的宽度值来定义,
8.1预览
8.2代码demo
Ext.onReady(function(){
Ext.application({
name:"column",
launch:function(){
//列布局 创建一个多列的布局
//每列的宽度可以通过百分比定义 所有的和为1
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - Percentage Only',
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: Ext.getBody()
});
}
});
});8.3 注意
a.每列的宽度可以通过百分比定义 所有的和为1
9.table表格布局
通过指定rowspan和colspan来实现复杂布局
9.1预览图
9.2代码demo
Ext.onReady(function(){
Ext.application({
name:"column",
launch:function(){
//通过指定rowspan和colspan来实现复杂布局
//指定每部分占据几行几列 会自动按顺序分配
Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 500,
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: Ext.getBody()
});
}
});
});9.3 关注点
a.我们指定每部分占据几行几列，该布局会自动按顺序分配
10.Hbox
水平box，所有组件水平依次排列
10.1预览
10.2 代码demo
Ext.onReady(function(){
Ext.application({
name:"hbox",
launch:function(){
//所有组件水平依次排列
//根据flax的数值按比例分配
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'hbox',
align: 'stretch'
},
renderTo: document.body,
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
}]
});
}
});
});
11.Vbox
垂直box,所有组件垂直依次排列
11.1预览
11.2代码demo
Ext.onReady(function(){
Ext.application({
name:"hbox",
launch:function(){
//所有组件垂直依次排列
//根据flax的数值按比例分配
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo: document.body,
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
}]
});
}
});
});
12 auto 默认布局
默认的布局方式，不指定layout时的布局方式
12.1预览
12.2 代码demo
Ext.onReady(function(){
//默认的布局方式
//此时写不写layout:'auto' 没区别
Ext.application({
name: 'auto',
launch: function () {
Ext.create('Ext.Panel', {
width: '100%',
height: '100%',
title: "AutoLayout Panel",
layout: 'auto',
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'Top Inner Panel',
width: '75%',
height: 90
},
{
xtype: 'panel',
title: 'Bottom Inner Panel',
width: '75%',
height: 90
}]
});
}});
});版权声明：本文为博主原创文章，未经博主允许不得转载。
Extjs--12种布局方式的更多相关文章
- Android-基本控件和详解四种布局方式
转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- Android 常用UI控件之TabHost(1)TabHost的两种布局方式
TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...
- 【Android UI】Android开发之View的几种布局方式及实践
引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...
- Android 开发之旅：view的几种布局方式及实践
本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...
- Android 开发：view的几种布局方式及实践
View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...
- 【Android学习】四种布局方式
一.LinearLayout 线性布局,即一行展开或者一列展开,也可以嵌套,需要注意的属性如下: android:orentation //对齐方式 二.FrameLayout 帧布局,即一层层叠起 ...
- kivy八种布局方式学习
kivy八种布局:FloatLayout.BoxLayout.AnchorLayout.GridLayout.PageLayout.RelativeLayout.ScatterLayout.Stack ...
- ExtJS中layout的12种布局风格
总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...
随机推荐
- Android Studio Gradle 多渠道自动打包，动态修改HostUrl，签名apk，混淆配置详解
文/ skay csdn博客:http://blog.csdn.net/sk719887916/article/details/40541163 最近遇到项目从Eclispe迁移到Android st ...
- 开发composer包，打通github和packagist，并自动更新
1. 首先需要本地安装好composer,并配置好环境变量,在命令行输入composer,显示以下信息就表示正常安装 2. 在github对应项目的根目录下进行初始化composer 初始化完成后,就 ...
- Spring Boot 多模块与 Maven 私有仓库
前言 系统复杂了,抽离单一职责的模块几乎是必须的:若需维护多个项目,抽离公用包上传私有仓库管理也几乎是必须的.其优点无需赘述,以下将记录操作过程. 1. 多模块拆分 在.NET 中由于其统一性,实现上 ...
- Map 遍历分析
1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entrySet,认为其比keySet的效率高很多.理由是:entrySet方法一次拿到所有key和value的集合:而keySet拿到的 ...
- volatile的适用场景
volatile保证线程间的数据是可见的(共享的),但不保证数据同步 volatile相当于synchronized的弱实现,也就是说volatile实现了类似synchronized的语义,却又没有 ...
- JAVA代码设置selector不同状态下的背景颜色
代码实现Shape 代码实现Selector StateListDrawable与GradientDrawable 的运用 在Android开发中,我们时常会用到自定义drawable样式,在draw ...
- Zabbix如何设置脚本告警
设置告警脚本的路径 # vim /etc/zabbix/zabbix_server.confAlertScriptsPath=/usr/lib/zabbix/alertscripts 创建脚本 在这里 ...
- 关于JQuery Class选择器的一点
当某个元素的Class为为两个字符串的时候,那用class选择器的时候就必须把两个字符串都写上否则无效 <div class="cla clb">11111<di ...
- 苹果公司揭秘首批列入 Swift 源代码兼容性开源项目清单
源代码兼容性是 Swift 未来的目标.为了实现这一目标,(苹果公司的 swift 编译器团队)建立了一个源兼容性测试套件,用于根据 Swift 源代码(逐渐增加)语料库对编译器进行回归测试更改. 添 ...
- python3.6 安装win32api时候找不到regitry的问题
首先下载 https://sourceforge.net/projects/pywin32/files/pywin32/ 找到对应的即可 我需要的是这个 打开之后会提示3.6未注册 在任意位置新建一个 ...