Ext2.0
的
form
不单增加了时间输入控件、隐藏输入控件,还修改了创建方法
,通过
formpanel
代替了原来
form
,
column
也根据新的布局定义更新了定义方式。总体来说,定义一个
form
更简单便捷了。本文将通过一个实例介绍一下
2.0
的
form
的创建以及其大部分控件的使用方法,因水平有限,错漏难免,忘大家多多谅解!
在创建一个
form
之前,我们先增加以下语句:
Ext
.QuickTips.init();
Ext.form.Field.prototype.msgTarget =
'side';
第一句的目的是为需要的元件提供提示信息功能,
form
的主要提示信息就是客户端验证的错误信息了。
第二句的目的就是设置控件的错误信息显示位置,主要可选的位置有:
位置值
|
描述
|
qtip
|
当鼠标移动到控件上面时显示提示
|
title
|
在浏览器的标题显示,但是测试结果是和
qtip
一样的
|
under
|
在控件的底下显示错误提示
|
side
|
在控件右边显示一个错误图标,鼠标指向图标时显示错误提示
|
[element id]
|
错误提示显示在指定
id
的
HTML
元件中
|
这个大家可以根据各人喜好设置,我习惯使用“
side
”,这里有一点要注意的,就是注意控制控件的宽度,以防不够宽度显示错误图标,这个下面会说到。
好了,现在创建我们的
form
,
2.0
的方法就是直接创建一个
formpanel
:
var simpleForm = new
Ext.FormPanel({
labelAlign:
'left',
title: '
表单例子
',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items:
[],
buttons:
[]
});
simpleForm.render(document.body);
在
formpanle
里,我们定义了
form
控件的标题是在左边的(
labelAlign: 'left'
);
form
的标题栏显示标题“表单的例子”;
它的按钮位置是在右对齐的(
buttonAlign:'right'
);
边的类型设置了内补丁
5px
(
bodyStyle:'padding:5px'
);
总宽度是
600px
;设置了面板的边角是圆弧过度的(
frame:true
),
我设置这个属性主要目的不是因为边角,而是因为背景,如果不设置这个,背景颜色将为白色,设置了这个将会加入海蓝色的背景图,好看点;
还设置了
form
控件的标题宽度是
80px
(
labelWidth:80
)。还有一些其它的设置选项,我这里就不多说,大家可以参看
2.0
的
API
。
items
数组的设置是我们的重点了,
form
上的所有控件都是在这里设置的。
从
form
的结构图中看到,
form
整体上是分了两列的(实际上不是的,呵呵)。因为要分列,所以要使用
columnLayout
类。在使用
columnLayout
类之前,我们需要了解一下
CSS
中
float
属性的作用,改属性主要作用是设置对象
是否及如何浮动,属性值为
none
、
left
和
right
三个。
column
设置是
left
,意思就是对象浮在左边的。那这个有什么作用呢?其实这个和我们在
word
中输入文字,默认文字是左对齐的,当一行文字的宽度超过页面的宽度时将自动换行是一样的。
我们通过一个例子来说明一下。
首先我们定义一个
div
,背景色是黑色,宽度和高度都是
200
:
<div
style='background:black;width:200px;height:200px;'>
</div>
然后在里面加入
2
个
div
,每个宽度和高度都是
200
,背景色一个是红色,一个是绿色:
<div
style='background:black;width:200px;height:200px;'>
<div
style='background:red;width:50px;height:50px;'></div>
<div
style='background:green;width:50px;height:50px;'></div>
</div>
我们来看看效果:
<!--[if !vml]-->
<!--[endif]-->
在没有使用
float
之前,两个子
div
是分别各占一行的。好,现在我们在两个子
div
中加入“
float:left
”在看看效果:
<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
</div>
<!--[if !vml]-->
<!--[endif]-->
两个子
div
出现在同一行了。我们复制一下两个子
div
,粘贴两次,然后看看效果:
<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
</div>
|
<!--[if !vml]-->
<!--[endif]-->
6
个子
div
有序的按左对齐方式排列在一起了,当一行的子
div
的宽度超过了父
div
的宽度时,子
div
自动换行到了第二行。
不知道大家是否看得明白?看不明白自己再动手改变一下子
div
的宽度和高度,看看效果。
column
的工作
方式就是这样的
|
|
|
分享到:
相关推荐
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
(1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....
Ext的FormPanel组件说明formPanel的详细使用说明
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:...
var tab2 = new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 1000, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form'...
//定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: ... 具体定义如下: 代码如下: var fp = Ext.create(‘Ext.FormPanel’, { frame: true, fieldDefaults: {
第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 1.1.5 事件处理 9 1.1.6 尺寸大小 13 ...
使用 Ext.form.FormPanel 来处理数据时候,某些字段是需要只读的。当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框。所以我们必须使用 Ext.form....
a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, params: a.params, waitMsg: “正在提交数据…”, success: function(c, d) { Ext.ux.Toast.msg(“操作信息”, “成功信息保存!...
Js代码 代码如下:var xjjlEditForm = new Ext.FormPanel({…….省略form中的定义内容……..});然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window): Js代码 代码如下://–编辑按钮调用的...
userForm = new Ext.FormPanel({ id:'conditionForm', labelWidth:'80', labelAlign:'right', border:false, bodyBorder:false, frame:true, items:[ layout:'column', items:[ { columnWidth:'.8', ...
FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 ...4.2 FormPanel和BasicForm详解 77 4.3 EXT支持的控件 77 4.3.1 控件继承图 77 4.3.2 表单控件 78 4.3.3 基本输入控
new Ext.form.FormPanel({ height : 90, width:500, labelWidth : 200, labelPad : 0, renderTo :'auto', frame : true, items : [ { xtype : 'combo', triggerAction : 'query', forceSelection : true,...