- 浏览: 66975 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
游其是你:
谢谢博主,这种确实很好,但是如果是ajax提交数据似乎不能保存 ...
hibernate Session 管理 -
finally_m:
谢谢提醒!
(十一)可编辑表格EditorGridPanel -
setfsun2009:
不知楼主注意没,在火狐下的日期控件有问题!
(十一)可编辑表格EditorGridPanel -
finally_m:
谢谢大家的支持!
FCKEditor在线编辑器 -
finally_m:
本示例只是从数据库读取目录树,动态更新节点时还需要完善,实现方 ...
基于数据库动态生成目录树示例
布局Layout
(1) 布局概述
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext 的所有容器组件都支持布局操作,每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列、组合及渲染方式等。
ExtJS 的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS 的容器组件包含一个layout 及layoutConfig 配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig 配置,有的则不需要layoutConfig 配置。看代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
width:400,
height:200,
layout:"column",
items:[
{columnWidth:.5,title:"面板1"},
{columnWidth:.5,title:"面板2"}
]
});
});
上面的代码我们创建了一个面板Panel,Panle 是一个容器组件,我们使用layout 指定该面板使用Column 布局。该面板的子元素是两个面板,这两个面板都包含了一个与列布局相关的配置参数属性columnWidth,他们的值都是0.5,也就是每一个面板占一半的宽度。
Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的时候,不能给这些容器组件再指定另外的布局。
ExtJS2.0 一共包含十种布局,常用的布局有border、column、fit、form、card、tabel等布局,下面我们分别对这几种布局作简单的介绍。
(2) Border区域布局
Border 布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。看下面的代码:
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左边面板"},
{region:"east",
width:100,
title:"右边面板"}
]
});
});
(3) Column列布局
Column 列布局由Ext.layout.ColumnLayout 类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度,而width 则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}]
});
});
<div id="mydiv"></div>
上面的代码在容器组件中放入了四个元素,在容器组件中形成4 列,列的宽度分别为100,200,100 及剩余宽度
也可使用columnWidth 来定义子元素所占的列宽度,看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",columnWidth:.2},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.2}]
});
});
注意columnWidth 的总和应该为1。
在实际应用中还可以混合使用,看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[
{title:"列1",width:200},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.4}
]
});
});
(4) Fit布局
Fit布局由类Ext.layout.FitLayout定义,名称为fit,用于嵌套布局时使之自适应容器大小,通常用于菜单,表单等的嵌套布局。 Fit布局顾名思义,Fit即“自适应”的意思,通常使用在我们进行嵌套布局的时候使用,例如:窗体里嵌套表单面板等,使用该布局的一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
看使用Fit 布局后的代码
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"}]
});
});
<div id="mydiv"></div>
上面的代码指定父容器使用Fit 布局,因此子将自动填满整个父容器。
如果容器组件中有多个子元素,则只会显示一个元素。
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}]
});
});
<div id="mydiv"></div>
如果不使用布局Fit。
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}]
});
});
<div id="mydiv"></div>
(5) Form布局
Form 布局由类Ext.layout.FormLayout 定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
});
});
上面的代码创建了一个面板,面板使用Form 布局,面板中包含三个子元素,这些子元素都是文本框字段,在父容器中还通过hideLabels、labelAlign 等配置属性来定义了是否隐藏标签、标签对齐方式等。
可以在容器组件中把hideLabels 设置为true,这样将不会显示容器中字段的标签了。
在实际应用中,Ext.form.FormPanel 这个类默认布局使用的是Form 布局,而且FormPanel还会创建与<form> 标签相关的组件,因此一般情况下我们直接使用FormPanel 即可。
Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo:"mydiv",
title:"容器组件",
width:300,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
});
});
程序结果与前面使用Ext.Panel 并指定form 布局的一样。
(6) Accordion布局
Accordion 布局由类Ext.layout.Accordion 定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[
{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
});
});
上面的代码定义了一个容器组件,指定使用Accordion 布局,该容器组件中包含三个子元素,在layoutConfig 中指定布局配置参数animate 为true,表示在执行展开折叠时是否应用动画效果。
(7) Table布局及其它布局
Table 布局由类Ext.layout.TableLayout 定义,名称为table,该布局负责把容器中的子元素按照类似普通html 标签。
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"mydiv",
title:"容器组件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[
{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
]
});
});
上面的代码创建了一个父容器组件,指定使用Table 布局,layoutConfig 使用columns指定父容器分成3 列,子元素中使用rowspan 或colspan 来指定子元素所横跨的单元格数。
除了前面介绍的几种布局以外, Ext2.0 中还包含其它的Ext.layout.AbsoluteLayout、Ext.layout.AnchorLayout 等布局类,这些布局主要作为其它布局的基类使用,一般情况下我们不会在应用中直接使用。另外,我们也可以继承10 种布局类的一种,来实现自定义的布局。
发表评论
-
(十五) 完整的CRUD示列
2009-11-30 13:50 812见示例代码! -
(十四)树型控件
2009-11-30 13:42 1741树型控件(1) TreePanel在应用程序中,我们经常会涉及 ... -
(十三) FormPanel组件
2009-11-30 13:39 1063FormPanel组件在web页面中,表单可谓是最常用的控件之 ... -
(十二) 表格分页及与服务器交互
2009-11-30 13:37 980(3) 表格分页 一次性将成千上万条数据显示在Grid里,然后 ... -
(十一)可编辑表格EditorGridPanel
2009-11-30 13:35 1685(2) 可编辑表格EditorGridPanel可编辑表格是指 ... -
(十) 基本表格GridPanel
2009-11-30 13:34 1228(1) 基本表格GridPanelExtJS 中的表格功能非常 ... -
(八)窗口及对话框
2009-11-30 13:28 941(1)窗口基本应用ExtJS 中 ... -
(七) 使用面板
2009-11-30 13:25 978(1) Panel面板Panel 是ExtJS 控件的基础,很 ... -
(六) 事件处理
2009-11-30 13:23 878ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来 ... -
(五) 组件的配置属性
2009-11-30 13:21 1012在ExtJS中,除了一些特殊的组件或类以外,所有的组件在初始化 ... -
(四) 组件的使用
2009-11-30 12:55 759组件可以直接通过new 关 ... -
(三) ExtJS组件
2009-11-30 12:41 803组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件 ... -
(二) ExtJS 入门
2009-11-30 12:38 862ExtJS之Hello World 把解压后的Ext文 ... -
(一) ExtJS 简介
2009-11-30 12:34 859简介 ExtJS 是一个很不错的Ajax 框架,用于在客户端 ... -
AJAX技术之DWR框架入门
2009-04-06 22:47 858(1) 简介 官方:http:/ ... -
AJAX入门
2009-04-06 22:22 1265简介 Ajax(Asynchronous JavaScrip ...
相关推荐
EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
layoutit 可视化布局 bootStrap3在线编辑器源码 离线中文版
本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...
android app 界面开发,几种基本的java layout布局,基本例子供参考
几种常见的布局layout的demo 好用便宜拿去 不谢,几种常见的布局layout的demo 好用便宜拿去 不谢
有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用。 pages文件下组件的layout属性值为layout文件...
UI Layout是一种基于jQuery的布局框架,其核心是一个大小自适应的中心面板,面板的上下左右四个方向可以放置可折叠、可缩放的面板,感兴趣的朋友可以下载。
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
EMC设计,布局layout,走线
假使我们遇到这么一种情况,我们需要开发一个app,这个app的基本所有的Activity都使用到了相同的布局,我们该如何设计?我们是给这些个Activity布局文件都统一加上一样的布局代码,但是维护起来很麻烦,修改不方便,...
android的layout布局种类
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
jquery.layout 布局插件精简版,对依赖ui.core和拖拽进行精简
介绍Android五中布局的一个示例代码.
线性布局LinearLayout 框架布局FrameLayOut RelativeLayout相对布局 绝对布局AbsoluteLayout TableLayout表格布局
智能家居系统 布局Layout.doc 学习资料 复习资料 教学资源
本例中,使用了水平,垂直,表格布局
Activity layout布局Activity layout布局Activity layout布局
android提供的五种布局有时候不能满足实际项目的需要,所以需要自定义布局。这是一个自定义Layout布局