序言

1、百度百科上说:ExtJs功能丰富,无人能出其右。无论是界面之美,还是功能之强,extjs都高居榜首。

2、呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局。(extjs是4.+版本)

Border布局__边界布局

这中布局是最常用的布局之一,看图

border布局:border布局也称边界布局,他将页面分隔为west,east,south,north,center这五个部分,我们需要在其items中指定使用region参数为其子元素指定具体位置。

注意:north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大,center区域就变小了。

参数 split:true 可以调整除了center四个区域的大小。

参数 collapsible:true 将激活折叠功能。

   center 区域是必须使用的,Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中,当指定布局为border时,如果没有指定center区域时,会出现报错信息。

 Ext.onReady(function () {
new Ext.Viewport({
title: "Viewport",
layout: "border",
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
{ region: "west", width:90, title: 'north', collapsible: true },
{ region: "east", width: 90, title: 'north', 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 }, ]
});
});

Accordion布局__手风琴布局

accordion布局:accordion布局也称手风琴布局,在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意:只有Ext.Panels 和所有Ext.panel.Panel 子项,才可以使用accordion布局。

 Ext.onReady(function () {
var accordion = Ext.create("Ext.panel.Panel", {
title: "west",
layout: "accordion", //设置为手风琴布局
layoutConfig: {
animate: true
},
width: 250,
minWidth: 90,
region: "west", //设置方位
split: true,
collapsible: true,
items: [
{ title: "嵌套面板一", html: "嵌套面板一", iconCls: "save" },
{ title: "嵌套面板二", html: "嵌套面板二", iconCls: "search" },
{ title: "嵌套面板三", html: "嵌套面板三", iconCls: "back" },
{ title: "嵌套面板四", html: "嵌套面板四", iconCls: "12" }
]
}); new Ext.Viewport({
title: "Viewport",
layout: "border", //这里是(border)边界布局
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
accordion, //这里是(accordion)手风琴布局
{region: "east", width: 90, title: 'north', 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 }
]
});
});

Card布局__类似向导

Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。

注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。由于只有一个面板处于显示状态,那么在初始时,我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候,我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外,如果面板中显示的是FORM布局,我们在点击下一个面板的时候,处理FORM中提交的元素,通过AJAX将表单中的内容保存到数据库中或者SESSION中。

下面的示例代码展示了一个基本的Card布局,布局中并没有包含form元素,具体情况,还要根据实际情况进行处理:

 //Card布局__类似向导
Ext.application({
name: 'HelloExt',
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,
x: 30,
y: 60,
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: '<h1>第一步</h1>'
},
{
id: 'card-1',
html: '<h1>第二步</h1>'
},
{
id: 'card-2',
html: '<h1>最后一步</h1>'
}],
renderTo: Ext.getBody()
});
}
});

fit 布局

在Fit布局中,子元素将自动填满整个父容器。

注意:在fit布局下,对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。

        //fit 布局
Ext.application({
name: 'HelloExt',
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
width: '800px', //没有做用的
items: [
{
title: 'Hello Ext',
html: 'Hello! Welcome to Ext JS.'
},
{
title: ' 妈咪妈咪哄 ',
html: '这个子控件是不会显示的,呜哈哈哈!'
}
]
});
}
});

Anchor布局

anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。

anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如

anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25%

anchor:'-295 -300',表示组件相对于父容器右边距为295,相对于父容器的底部位300

anchor:'-250 10%',混合模式,表示组件党对于如容器右边为250,高度为父容器的10%

//Anchor布局
Ext.application({
name: 'HelloExt',
launch: function () {
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "Anchor布局",
layout: 'anchor',
x: 60,
y: 80,
renderTo: Ext.getBody(),
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布局

Absolute布局继承Ext.layout.container.Anchor 布局方式,并增加了X/Y配置选项对子组件进行定位,Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用。

 //Absolute布局
Ext.application({
name: "HelloExt",
launch: function () {
Ext.create('Ext.form.Panel', {
title: 'Absolute布局',
width: 300,
height: 275,
x: 200,
y: 90,
layout: 'absolute',
defaultType: 'textfield',
items: [{
x: 10,
y: 10,
xtype: 'label',
text: 'Send To:'
}, {
x: 80,
y: 10,
name: 'to',
anchor: '90%' //控件从居左80px处,拉长到居左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% 80%' //控件从居左0px处拉长100%,空间从居上80px处,拉长至余下控件高度的80%处
}],
renderTo: Ext.getBody()
});
}
});

Column布局__列布局

Column布局一般被称为列布局,这种布局的目的是为了创建一个多列的格式。其中每列的宽度,可以为其指定一个百分比或者是一个固定的宽度。

Column布局没有直接的配置选项(继承的除外),但Column布局支持一个columnWidth属性,在布局过程中,使用columnWidth指定每个面板的宽度。

注意:使用Column布局布局时,其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。

另外,如果任何子面板没有指定columnWidth值,那么它将占满剩余的空间。

  Ext.application({
name: "HelloExt",
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - 按比例',
width: 350,
height: 250,
x: 20,
y: 100,
layout: 'column',
items: [{
title: 'Column 1',
columnWidth: .25
}, {
title: 'Column 2',
columnWidth: .55
}, {
title: 'Column 3',
columnWidth: .20
}],
renderTo: Ext.getBody()
});
}
});

    

ExtJs布局详解的更多相关文章

  1. Android开发重点难点1:RelativeLayout(相对布局)详解

    前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...

  2. 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)

    [翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .

  3. Android布局详解之一:FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  4. Android 布局详解

    Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...

  5. DevExpress控件GridControl中的布局详解 【转】

    DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28|  分类: devexpress |  标签:devexpress  |举报|字号 订阅   ...

  6. Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  7. 【转载】图说C++对象模型:对象内存布局详解

    原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在 ...

  8. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  9. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

随机推荐

  1. 修改radio与check样式

    一般的radio与check的样式很难看,这个时候就需要我们自己修改其样式 逻辑思维: 1.用label包裹input标签以及样式标签,然后将radio定位到界面以外,设置样式标签的样式 2.使用伪类 ...

  2. Linux内核笔记——内存管理之slab分配器

    内核版本:linux-2.6.11 内存区和内存对象 伙伴系统是linux用于满足对不同大小块内存分配和释放请求的解决方案,它为slab分配器提供页框分配请求的实现. 如果我们需要请求具有连续物理地址 ...

  3. javaWeb高级编程(1)

    十月 24, 2016 10:41:43 上午 org.apache.catalina.core.StandardContext setPath警告: A context path must eith ...

  4. 线程和线程池的理解与java简单例子

    1.线程 (1)理解,线程是系统分配处理器时间资源的基本单元也是系统调用的基本单位,简单理解就是一个或多个线程组成了一个进程,进程就像爸爸,线程就像儿子,有时候爸爸一个人干不了活就生了几个儿子干活,会 ...

  5. 2_MVC+EF+Autofac(dbfirst)轻型项目框架_用户权限验证

    前言 接上面两篇 0_MVC+EF+Autofac(dbfirst)轻型项目框架_基本框架 与 1_MVC+EF+Autofac(dbfirst)轻型项目框架_core层(以登陆为例) .在第一篇中介 ...

  6. linux shell basic command

    Learning basic Linux commands Command Description $ ls This command is used to check the contents of ...

  7. EF DbContext 并发执行时可能出现的问题

    现在许多Web项目都使用了IOC的DI注入组件.其中对象的生命周期管理是非常重要的. 有时我们为了提高请求的响应,经常在请求线程中执行多个子线程,然而忽略了EF的DbContext的生命周期管理. D ...

  8. libCURL开源库在VS2010环境下编译安装,配置详解

    libCURL开源库在VS2010环境下编译安装,配置详解 转自:http://my.oschina.net/u/1420791/blog/198247 http://blog.csdn.net/su ...

  9. 让div垂直居中的5种方法

    方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...

  10. Linux 下安装中文 ctex 指南

    大家在用 $\LaTeX$ 进行中文排版时相信会遇到不少问题,而$\textbf{ctex}$套装的出现则有效的解决了这一问题,只要安装了$\textbf{ctex}$那么在文中不用进行引用设置就可以 ...