ExtJS的使用方法汇总(2)——表单与输入控件
2010-09-15 12:32
591 查看
上篇文章《ExtJS的使用方法汇总(1)——配置和表格控件使用》
地址为:http://blog.csdn.net/rocket5725/archive/2009/09/09/4535323.aspx
写了ExtJS的配置以及表格控件的使用方法,相信大家在学习的过程中已经基本知道了如果搭建ExtJS开发环境以及使用ExtJS的基本功能。
表单在EXT中非常受欢迎,初看这些输入控件,好像只是修改了CSS样式而已,但是如果用Firebug查看一下DOM,似乎确实只有CSS发生了
变化,隐藏在漂亮界面下的依然是原来的input控件,如果你想使用EXT提供的一些绚丽的功能,建议尝试EXT的表单(Form)和对应的输入控件。本
文就是简单介绍表单与输入控件的使用方法。
2、创建简单表单的实现代码如下所示:
view plain
copy to clipboard
print
?
<mce:script type=
"text/javascript"
><!--
Ext.onReady(function(){
var form=new
Ext.form.FormPanel({
defaultType:'textfield'
,
labelAlign:'right'
,
title:'form'
,
labelWidth:50,
frame:true
,
width:220,
items:[{
fieldLabel:'文本框'
}],
buttons:[{
text:'按钮'
}]
});
form.render("div1"
);
});
// --></mce:script>
3、注意HTML中无需定义太多东西,只需要定义个div id='div1'就可以实现,初始配置显然变得更紧凑,利用items和buttons指定包含的控件和按钮。具体实现效果如图1所示。
图1 简单的表单
的最大好处就是利于布局,Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把
Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分,同时也可以利用items指定
Ext.form.FormPanel内部的子组件。如其他的Panel一样,我们可以通过xtype来指定每个子组件的类型,而不必手工创建它们。
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
fieldLabel:'输入'
,
allowBlank:false
,
emptyText:'请输入…'
,
maxLenght:50,
minLength:10
});
form.render("div1"
);
});
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TextArea({
width:200,
grow:true
,
preventScrollbars:true
,
fieldLabel:'empty'
,
allowBank:false
,
emptyText:'空'
,
maxLength:50,
minLength:10
});
form.render("div1"
);
});
及Ext.form.TextField中定义的功能,如下面代码所示,format表示如何保存显示选中的日期,我们可以采用任意的模式显示选中的日
期,disableDays的参数值是一个数组,内部可以包括0至7的整数,它可以禁止用户选择一周内的指定日期。效果图如图2所示。
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.DateField({
fieldLabel:'日期'
,
emptyText:'请选择'
,
format:'Y-m-d'
,
disabledDays:[0,6]
});
form.render("div1"
);
});
图2 日期输入控件(禁止选择每周的周六和周日)
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TimeField({
fieldLabel:'时间'
,
emptyText:'请选择'
,
minValue:'10:00 AM'
,
maxValue:'14:00 PM'
,
increment:30
});
form.render("div1"
);
});
图3 使用在线编辑器编辑文本样式
Ext.form.HtmlEditor的使用方法如下面的代码所示:
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.HtmlEditor({
fieldLabel:'在线编辑器'
,
enableAlignments:true
,
enableColors:true
,
enableFont:true
,
enableFontSize:true
,
enableFormat:true
,
enableLinks:true
,
enableLists:true
,
enableSourceEdit:true
});
form.render("div1"
);
});
view plain
copy to clipboard
print
?
var field=
new
Ext.form.Hidden({
name:'hiddenId'
});
field.setValue('some thing'
);
var value=filed.getValue();
过选择录入数据,为了显示下拉选择的功能,我们需要覆写它的onTriggerClick()函数以实现弹出窗口,如下面的代码所示:
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TriggerField({
fieldLabel:'选择'
,
name:'name'
,
onSelect:function(record){
},
onTriggerClick:function(){
if
(
this
.menu==
null
){
this
.menu=selectMenu;
}
this
.menu.show(
this
.el,
'tl-bl?'
);
}
});
form.render("div1"
);
});
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
allowBlank:false
});
form.render("div1"
);
});
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
maxLength:10,
minLenght:5
});
form.render("div1"
);
});
图4 最大长度校验
可,然后配置在空间中即可,如下面代码所示,这里我们给vtype设置的是E-mail,限制text只能使用邮箱地址的格式,非常简单。
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
vtype:'email'
});
form.render("div1"
);
});
默认情况下,vtype一共有4种验证信息:alpha:只能输入英文字母;alphanum:只能输入字母和数字;email:电子邮箱;url:网址
view plain
copy to clipboard
print
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
regex: /^[/u4E00-/u9FA5]+$/,
regexText:'只能输入汉字'
});
form.render("div1"
);
});
地址为:http://blog.csdn.net/rocket5725/archive/2009/09/09/4535323.aspx
写了ExtJS的配置以及表格控件的使用方法,相信大家在学习的过程中已经基本知道了如果搭建ExtJS开发环境以及使用ExtJS的基本功能。
表单在EXT中非常受欢迎,初看这些输入控件,好像只是修改了CSS样式而已,但是如果用Firebug查看一下DOM,似乎确实只有CSS发生了
变化,隐藏在漂亮界面下的依然是原来的input控件,如果你想使用EXT提供的一些绚丽的功能,建议尝试EXT的表单(Form)和对应的输入控件。本
文就是简单介绍表单与输入控件的使用方法。
一、创建一个简单的表单
1、具体配置信息参考上篇文章2、创建简单表单的实现代码如下所示:
view plain
copy to clipboard
?
<mce:script type=
"text/javascript"
><!--
Ext.onReady(function(){
var form=new
Ext.form.FormPanel({
defaultType:'textfield'
,
labelAlign:'right'
,
title:'form'
,
labelWidth:50,
frame:true
,
width:220,
items:[{
fieldLabel:'文本框'
}],
buttons:[{
text:'按钮'
}]
});
form.render("div1"
);
});
// --></mce:script>
<mce:script type="text/javascript"><!-- Ext.onReady(function(){ var form=new Ext.form.FormPanel({ defaultType:'textfield', labelAlign:'right', title:'form', labelWidth:50, frame:true, width:220, items:[{ fieldLabel:'文本框' }], buttons:[{ text:'按钮' }] }); form.render("div1"); }); // --></mce:script>
3、注意HTML中无需定义太多东西,只需要定义个div id='div1'就可以实现,初始配置显然变得更紧凑,利用items和buttons指定包含的控件和按钮。具体实现效果如图1所示。
图1 简单的表单
二、FormPanel和BasicForm详解
如上面的实例所示,我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.FormPanel的最大好处就是利于布局,Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把
Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分,同时也可以利用items指定
Ext.form.FormPanel内部的子组件。如其他的Panel一样,我们可以通过xtype来指定每个子组件的类型,而不必手工创建它们。
三、EXT支持的控件
EXT提供了TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor这些通用控件,以及Ext 2.0新增的Hidden和TimeField.3.1 文本输入控件Ext.form.TextField
直接继承Ext.form.Field,这是一个专门用来输入文本数据的输入控件,最常用的功能就是可以检测内部输入的数据是否为空,还可以控制输入数据的内容以及最大最小长度,如下面的代码所示:view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
fieldLabel:'输入'
,
allowBlank:false
,
emptyText:'请输入…'
,
maxLenght:50,
minLength:10
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TextField({ fieldLabel:'输入', allowBlank:false, emptyText:'请输入…', maxLenght:50, minLength:10 }); form.render("div1"); });
3.2 多行文本输入控件Ext.form.TextArea
Ext.form.TextArea也是用来输入文本的输入控件,与Ext.form.TextField不同之处在于它可以输入多行文本,除此以外,两者的用法都是相同的。如下面代码所示,preventScrollbars是用于防止出现滚动条的。view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TextArea({
width:200,
grow:true
,
preventScrollbars:true
,
fieldLabel:'empty'
,
allowBank:false
,
emptyText:'空'
,
maxLength:50,
minLength:10
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TextArea({ width:200, grow:true, preventScrollbars:true, fieldLabel:'empty', allowBank:false, emptyText:'空', maxLength:50, minLength:10 }); form.render("div1"); });
3.3 日期输入控件Ext.form.DateField
Ext.form.DateField是平时经常用到的日期选择控件,除了弹出日历选择日期的功能之外,还支持所有Ext.form.Field以及Ext.form.TextField中定义的功能,如下面代码所示,format表示如何保存显示选中的日期,我们可以采用任意的模式显示选中的日
期,disableDays的参数值是一个数组,内部可以包括0至7的整数,它可以禁止用户选择一周内的指定日期。效果图如图2所示。
view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.DateField({
fieldLabel:'日期'
,
emptyText:'请选择'
,
format:'Y-m-d'
,
disabledDays:[0,6]
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.DateField({ fieldLabel:'日期', emptyText:'请选择', format:'Y-m-d', disabledDays:[0,6] }); form.render("div1"); });
图2 日期输入控件(禁止选择每周的周六和周日)
3.4 时间输入控件Ext.form.TimeField
Ext.form.TimeField是用来选择时间的输入控件,它可以通过制定一天中的起始时间、结束时间以及时间间隔的方式来为用户提供可供选择的时间,如下面的代码所示,我们将起始时间设置为上午10点,结束时间设置为下午14点,时间间隔为30分钟。view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TimeField({
fieldLabel:'时间'
,
emptyText:'请选择'
,
minValue:'10:00 AM'
,
maxValue:'14:00 PM'
,
increment:30
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TimeField({ fieldLabel:'时间', emptyText:'请选择', minValue:'10:00 AM', maxValue:'14:00 PM', increment:30 }); form.render("div1"); });
3.5 在线编辑器Ext.form.HtmlEditor
Ext.form.HtmlEditor是一个简易的在线编辑器,能对文本进行各项设置。Ext.form.HtmlEditor的页面显示样式如图3所示。图3 使用在线编辑器编辑文本样式
Ext.form.HtmlEditor的使用方法如下面的代码所示:
view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.HtmlEditor({
fieldLabel:'在线编辑器'
,
enableAlignments:true
,
enableColors:true
,
enableFont:true
,
enableFontSize:true
,
enableFormat:true
,
enableLinks:true
,
enableLists:true
,
enableSourceEdit:true
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.HtmlEditor({ fieldLabel:'在线编辑器', enableAlignments:true, enableColors:true, enableFont:true, enableFontSize:true, enableFormat:true, enableLinks:true, enableLists:true, enableSourceEdit:true }); form.render("div1"); });
3.6 隐藏域Ext.form.Hidden
Ext.form.Hidden直接继承自Ext.form.Field,我们可以通过它的setValue()和getValue()函数对它执行赋值和取值操作,但它不会显示在页面上。具体代码如下:view plain
copy to clipboard
?
var field=
new
Ext.form.Hidden({
name:'hiddenId'
});
field.setValue('some thing'
);
var value=filed.getValue();
var field=new Ext.form.Hidden({ name:'hiddenId' }); field.setValue('some thing'); var value=filed.getValue();
3.7 下拉输入框Ext.form.TriggerField
Ext.form.TriggerField是ComboBox、DateField和TimeField的父类,它既可以手工录入数据,也可以通过选择录入数据,为了显示下拉选择的功能,我们需要覆写它的onTriggerClick()函数以实现弹出窗口,如下面的代码所示:
view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TriggerField({
fieldLabel:'选择'
,
name:'name'
,
onSelect:function(record){
},
onTriggerClick:function(){
if
(
this
.menu==
null
){
this
.menu=selectMenu;
}
this
.menu.show(
this
.el,
'tl-bl?'
);
}
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TriggerField({ fieldLabel:'选择', name:'name', onSelect:function(record){ }, onTriggerClick:function(){ if(this.menu==null){ this.menu=selectMenu; } this.menu.show(this.el,'tl-bl?'); } }); form.render("div1"); });
四、数据校验
数据校验非常有必要,因为用户输入的数据有时候是不可靠的,EXT把验证封装到了表单的控件中,下面详细介绍如何使用它们。4.1 输入不能为空
最基本的验证就是文本框或者其他控件中必须输入值,如下面的代码,allowBlank默认值为true,也就是说可以不输入数据,将它改成false,文本框如果没有输入值就会出现红线。view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
allowBlank:false
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TextField({ name:'text', fieldLabel:'文本框', allowBlank:false }); form.render("div1"); });
4.2 最大长度和最小长度
限制输入的最大长度和最小长度是一种常见的校验方式,数据库只容许输入255个字符,当用户输入的数据超出最大长度时就会引起错误。如下面代码所示,我们设置最大长度不能超过10个字符,最小长度不能小于5个字符。效果图如图4所示。view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
maxLength:10,
minLenght:5
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TextField({ name:'text', fieldLabel:'文本框', maxLength:10, minLenght:5 }); form.render("div1"); });
图4 最大长度校验
4.3 借助vtype
EXT提供了一套默认的校验方案,其实就是一系列输入规则和错误提示。如果使用它们,就不需要再去背那一长串正则表达式,只要记住vtype的值即可,然后配置在空间中即可,如下面代码所示,这里我们给vtype设置的是E-mail,限制text只能使用邮箱地址的格式,非常简单。
view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
vtype:'email'
});
form.render("div1"
);
});
Ext.onReady(function(){ var form=new Ext.form.TextField({ name:'text', fieldLabel:'文本框', vtype:'email' }); form.render("div1"); });
默认情况下,vtype一共有4种验证信息:alpha:只能输入英文字母;alphanum:只能输入字母和数字;email:电子邮箱;url:网址
4.4 自定义校验规则
其实自定义校验规则就是允许自定义正则表达式,可以编写一个regex对输入数据进行校验,这样一来,无论是何种形式的数据,都能对其进行判断,如下面代码所示,我们使用regex验证只能输入汉字的情况。view plain
copy to clipboard
?
Ext.onReady(function(){
var form=new
Ext.form.TextField({
name:'text'
,
fieldLabel:'文本框'
,
regex: /^[/u4E00-/u9FA5]+$/,
regexText:'只能输入汉字'
});
form.render("div1"
);
});
相关文章推荐
- ExtJS的使用方法汇总(2)——表单与输入控件
- ExtJS的使用方法汇总(2)——表单与输入控件
- ExtJS的使用方法汇总2——表单与输入控件
- ExtJS的使用方法汇总2——表单与输入控件
- ExtJS的使用方法汇总(2)——表单与输入控件
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- ExtJS的使用方法汇总1——配置和表格控件使用
- ExtJS的使用方法汇总1——配置和表格控件使用
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- ExtJS的使用方法汇总—配置和表格控件使用
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- ExtJS的使用方法汇总(1)——配置和表格控件使用
- ExtJS的使用方法汇总3——树形结构
- extjs 中的日期输入控件不显示数据的解决方法(datefield)
- 全面解析Bootstrap表单使用方法(表单控件状态)
- struts2使用validate方法来实现对表单输入数据的校验操作
- 深入浅出ExtJS 第四章 表单与输入控件
- 原创 ExtJS的使用方法汇总(3)——树形结构
- ExtJS的使用方法汇总3——树形结构