第四行的两个输入框主要是测试通过
vtypes
属性来验证输入框的输入的:
{
columnWidth:.5,
layout:
'form',
border:false,
items:
[{
xtype:'textfield',
fieldLabel:
'
电子邮件
',
name:
'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
},{
columnWidth:.5,
layout:
'form',
border:false,
items:
[{
xtype:'textfield',
fieldLabel:
'
个人主页
',
name:
'url',
vtype:'url',
anchor:'90%'
}]
}]
}
这里的定义和普通的文本输入框没什么区别,只是多了一个
vtypes
的属性定义。
Vtypes
里总共定义了
email
、
url
、
alpha
和
alphanum
四种类型数据格式,
email
和
url
这个不用介绍了,呵呵。
alpha
是字母和下划线的组合,
alphanum
是字母、下划线和数字的组合。
下面要加入一个
tabpanel
,加入
3
个
tab
页。
{
xtype:'tabpanel',
plain:true,
activeTab:
0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[]
}
要注意的是,这个
tabpanel
不是在上面
coulmn
的
items
里加的,因为不在
column
里。我们加在
formpanel
里。把
item
类型设置为
'tabpanel'
就行了,然后将标签页头的背景设置为透明的(
plain:true
),当前活动
的标签页是第一页(
activeTab: 0
),高度设置为
235px
(
height:235
),
tab
页的面板使用内补丁
10px
(
defaults:{bodyStyle:'padding:10px'}
)。
好了,现在在
tabpanel
的
items
加入标签页。第一页主要有两个输入控件,一个是
vtypes
类型
alphanum
的登录输入框和一个密码输入框。
{
title:'
登录信息
',
layout:'form',
defaults: {width:
230},
defaultType:
'textfield',
items:
[{
fieldLabel:
'
登录名
',
name:
'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
},{
inputType:'password',
fieldLabel: '
密码
',
name:
'password',
allowBlank:false
}]
}
在标签定义了,设置了标签标题是登录信息(
title:'
登录信息
'
),控件容器是
formlayout
(
layout:'form'
),控件的默认宽度是
230px
(
defaults: {width:
230}
),默认控件类型是
textfield
(
defaultType: 'textfield'
)。
两个控件的定义与前面的
textfield
定义没什么区别,只是密码输入框需要定义
input
控件的类型为
password
(
inputType:'password'
)。两个控件都不允许为空(
allowBlank:false
)。
第二个标签页里有
numberfield
、
timefield
和
textfield
三个控件:
{
title:'
数字时间字母
',
layout:'form',
defaults: {width:
230},
defaultType:
'textfield',
items:
[{
xtype:'numberfield',
fieldLabel:
'
数字
',
name:
'number'
},{
xtype:'timefield',
fieldLabel:
'
时间
',
name:
'time'
},{
fieldLabel:
'
纯字母
',
name:
'char',
vtype:'alpha'
}]
}
Numberfield
顾名思义就是只能输入数字的输入控件。在该例子,没做最大值、最小值任何限制,如果要设置最大值和最小值,分别设置
maxValue
和
minValue
两个属性就行了。如果要设置数字输入长度,例如身份证号码,可以设置
maxLength
和
minLength
两个属性。可以通过设置
maxText
、
minText
、
maxLengthText
和
minLengthText
设置各自的验证出错信息。可通过
allowDecimals
属性设置是否只允许输入整型值,默认值是
true
,允许输入浮点数。设置
allowNegative
设置是否只允许输入正数,默认值是
true
,允许输入正负数。通过
decimalPrecision
属性可设置小数点后的位数,默认值是
2
位。
timefield
是新增加的时间输入控件,起弥补日期输入控件不能输入时间的作用。它的定义也很简单,设置类型为
timefield
就行了。
timefield
默认时间格式是
12
小时制的,我们可通过修改
format
属性来修改其数据格式。通过设置
increment
属性可设置下拉选择值得时间区间,默认值是
15
分钟的。还可以和数字输入控件一样设置最大值和最小值。下拉的设置和
combobox
是一样的。
在目前的版本中,
timefield
类还没有汉化,所以我们要在本地文件中加入
timefield
的汉化定义:
if(Ext
.form.TimeField){
Ext.apply(Ext.form.TimeField.prototype,
{
format:'G:i:s',
minText :
"
该输入项的时间必须大于或等于:
{0}",
maxText :
"
该输入项的时间必须小于或等于:
{0}",
invalidText :
"{0}
不是有效的时间
",
});
}
在这里,我默认定义了时间格式是
24
小时制的,小时为个位数是不加前缀
0
。
最后一个加入的是测试纯字母输入的,和
email
等是一样的,我就不介绍了。
在最后一个
tab
页中加入了一个
textarea
输入
{
title:'
文本区域
',
layout:'fit',
items:
{
xtype:'textarea',
id:'area',
fieldLabel:''
}
}
最后一步就是为
form
添加按钮了,在
formpanel
的
buttons
属性中我们加入了一个保存按钮和取消按钮:
buttons:
[{
text: '
保存
',
handler:function(){
if(simpleForm.form.isValid()){
this.disabled=true;
simpleForm.form.doAction('submit',{
url:'test.asp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert('
操作
',action.result.data);
this.disabled=false;
},
failure:function(){
Ext.Msg.alert('
操作
','
保存失败!
');
this.disabled=false;
}
});
}
}
},{
text: '
取消
',
handler:function(){simpleForm.form.reset();}
}]
在
formpanel
类中,
form
属性指向的是
formpanle
里的
basicform
对象
,我们可通过
formpanle.form
来使用该
basicform
对象。在被例子,我们已经将
formpanel
对象赋值给了
simpleForm
这个变量,所以我们可以通过
simpleForm.form
访问面板里的
basicform
对象。
在
buttons
里定义的按钮默认是
Ext.Button
,所以按钮的属性定义可以查看
Ext.Button
的
API
。在这里两个按钮都没用到其它属性,只是设置了显示文本(
text
)和单击事件。
保存按钮要做的就是先做
basicform
的客户端验证(
simpleForm.form.isValid()
),验证通过了则设置该按钮状态为
disable
,防止
2
次提交。然后调用
simpleForm.form.doAction
方法
提交数据。
doAction
方法的第一个参数“
submit
”的意思是表示执行的是提交操作,提交的后台页面是
test.asp
(
url:'test.asp'
),提交方式是
post
(
method:'post'
),没有其它提交参数(
params:''
),提交成功后执行
success
定义的函数,本例只是显示一个保存成功信息。后台返回的数据格式是需要我们注意的,一定要json格式,而且必须包含“
success:true”,不然不会执行
success定义的函数。
success
定义的函数返回两个参数,第一是
form
本身,第二个是
ajax
返回的响应结果,在
action.result
这个
json
数组了保存了后台返回的数据。例如本例后台返回的
json
结构是“
{success:true,data:~~~}
”,其中
data
部分我将提交的数据将字段名和数据组合成一个字符串。在
success
函数中,我通过“
Ext.Msg.alert('
操作
',action.result.data);
”将
data
数据显示出来。我们还定义
failure
函数,就是网络通讯存在问题的时候将显示错误信息。
取消按钮就是简单的
reset
一下
form
的控件。
如果想
form
按以前的老办法提交,可以在
formpanel
的定义中加入一下设置:
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
}
第一个设置的目的是取消
formpanel
的默认提交函数。第二就是设置新的提交方式为旧方式提交。
至此,我们已经简单的学习
一次
2.0
版中的
form
控件,希望大家能从中获得收益。如果有什么疑问和建议,请联系我。多谢!
分享到:
相关推荐
.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控件将不在依赖ViewState,减少1/4左右的HTTP数据传输量。 -控件和示例的增强。 +2010-03-28 v2.2.1 +为TabStrip的GetAddTabReference函数增加重载方法,以便指定Tab的图标(feedback:mmdcup)。 ...
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
第4章 Ext Core实例—Java语言实现 85 4.1 技术选型 85 4.2 搭建开发环境 85 4.3 设计页面布局 87 4.4 网上商店首页 90 4.5 产品列表页面 98 4.6 产品详细信息页面 105 4.7 登录对话框 113 4.8 用户注册对话框 118 ...
使用 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(“操作信息”, “成功信息保存!...
Ext的formpanel table布局实例,有效解决了页面resize时列宽不跟随改变的问题,即列宽的自适应宽度
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 基本输入控
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 fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:...
//定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...
new Ext.form.FormPanel({ height : 90, width:500, labelWidth : 200, labelPad : 0, renderTo :'auto', frame : true, items : [ { xtype : 'combo', triggerAction : 'query', forceSelection : true,...
在使用ExtJs开发时会遇到这样的问题,后台传来一个java对象,里面有一个date类型的数据,现在要显示到页面上,我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法:例如:在员工查询页面上,...