对于一个容器组件,比如Ext
.FormPanel,其内部空间无非是按照横向或纵向划分;如果需要更复杂的布局方式,就对第一次划分得到的子区域进行再划分。
form的含义是把容器按照横向划分,划分得到的行数与容器内的子元素(直接子元素,而不包含子元素内部的元素)个数相同,每个元素占一行;
column的含义是把容器按照纵向划分,划分得到的列数同上。
下面看看如何使用form和column
比如让我们实现一个登录的界面:
var
login
=
new
Ext
.
FormPanel
({
labelAlign
:
'
top
'
,
frame
:
true
,
title
:
'
Login
'
,
id
:
'
login
'
,
bodyStyle
:
'
padding:5px 5px
0
'
,
width
:
400
,
items
:
[{
layout
:
'
column
'
,
//把整个空间划分成两列
items
:
[{
html
:
'
<img
src="loginLogo.png" />
'
//左边列放一个logo
}
,
{
columnWidth
:
.5
,
layout
:
'
form
'
,
//右边列再分成上下两行
items
:
[{
xtype
:
'
textfield
'
,
fieldLabel
:
'
Username
'
,
//第一行是用户名输入框
name
:
'
name
'
,
id
:
'
name
'
,
anchor
:
'
100%
'
}
,
{
xtype
:
'
textfield
'
,
fieldLabel
:
'
Password
'
,
//第二行是密码输入框
name
:
'
pass
'
,
id
:
'
pass
'
,
anchor
:
'
100%
'
,
inputType
:
'
password
'
}]
}]
}]
,
buttons
:
[{
text
:
'
OK
'
,
//用户名密码确认按钮
handler
:
function
(){
var
name
=
Ext
.
get
(
'
name
'
)
.
dom
.
value
;
var
pass
=
Ext
.
get
(
'
pass
'
)
.
dom
.
value
;
if
(
name
==
'
good
'
&&
pass
==
'
good
'
){
//login correct, do something
}
else
{
Ext
.
MessageBox
.
alert
(
'
Warning!
'
,
'
Incorrect
Login
'
)
;
}
}
,
{
text
:
'
Reset
'
,
//用户名密码重置按钮
handler
:
function
(){
Ext
.
get
(
'
name
'
)
.
dom
.
value
=
''
;
Ext
.
get
(
'
pass
'
)
.
dom
.
value
=
''
;
}
}
]
}
);
login
.
render
(
document
.
body
)
;
login
.
getEl
()
.
center
()
;
这段代码
中,第8行至第30行与本文的主题“布局”相关。这几行代码把一个FormPanel分成两列,左边放一个图片logo;右列再被细分为上下两行,上面一行为用户名输入框,下面一行为密码输入框。这样一个简单的例子已经展示了布局的嵌套,以此递归地嵌套下去,就可以创建出非常复杂的布局方式。但是切记,网页是越简单越好。
从第31行开始,是为了这段login代码的完整性,加入了用于事件响应的按钮(buttons)。
最后两行代码的含义是把该登录界面显示出来,并居中。
分享到:
相关推荐
ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...
layout:”column” Panel进行列布局。 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度,在实际应用中可以...
9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图...
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块,演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法,以及border、column、form、fit、accordion、hbox等常用布局方式;...
一个完整的extjs窗体应用,包含form布局,column布局,很实用!
5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 ...
以下是自己扩展的FieldSet: 代码如下: ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { layout: ‘column’, fieldSetItems: [], autoScroll:false, defaults: { layout: ‘form’, labelAlign: ‘right’, ...
4、通过实现角色管理、用户管理两个基础的功能模块,演示了Viewport、Container、Panel、TreePanel、Grid、Window、Form等常用组件的用法,以及border、column、form、fit、hbox等常用布局方式; 5、通过自定义一个...
ExtJS2.0一共包含十种布局,常用的布局有border 、 column 、 fit 、 form 、 card 、 tabel等布局
…………………………………………………………………………………………….27 5.3 Column列布局……….……………………………………………………………………………………….……..28 5.4 Fit布局………....
9.4.12 列布局:ext.layout.container.column / 455 9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout....
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...