learning ext js 中文版 之 Ext的form功能是无穷的

Ext的form功能是无穷的。按键监听，校验，错误提示和值约束只需要做下简单配置就可以了。根据需要扩展form选项也是很容易的。你要先熟悉一些主要的form控件。

1.       Ext.form.FormPanel：多个的field可以放在一个panel里，就像html里需要一个form标签一样。

2.       Ext.form.Field：form里的主要用作创建和交互的控件，就像是html里的input标签。

 

我们先来建一个有多种输入类型的form ，还包括了日期选择控件，校验，错误提示，而且是ajax异步提交的。

这个例子，我们的输入框是用配置的，而不是实例化后的控件。这样编写简单而且运行速度也快。一个标准的页面，ext的包也都要导进来，我们的方法也要写在onReady函数里。

<script>

Ext.onReady(function(){//copyright guoyiqi

var movie_form = new Ext.FormPanel({

url: 'movie_forms_ubmit.jsp',

renderTo: document.body,

frame: true,

title: '电影信息',

width: 280,

items: [{

xtype: 'textfield',

fieldLabel: '电影名',

name: 'title'

},{

xtype: 'textfield',

fieldLabel: '导演',

name: 'director'

},{

xtype: 'datefield',

fieldLabel: '上映日期',

name: 'released',

width:120

}]

});

});

</script>

在浏览器预览，可以看到以下界面

FormPanel跟html的form非常像，都是用来包含表单项的。在FormPanel里有个url的配置属性，当表单提交时，它就知道要把数据发送到哪里了。同时它也有个renderTo的配置属性，这样就能把表单显示到页面的相应位置。Items的配置属性非常重要，它包含了所有的表单项。Items配置的是个数组类型的表单项，每个表单项用一个xtype属性来定义该表单项的类型：文本，日期或数字。甚至可以是表格或其他的Ext控件。

表单项的类型有以下一些：

Textfield

Timefield

Numberfield

Datefield

Combo

Textarea

先来看例子中的第一个表单项

{

xtype: 'textfield',//配置表单项类型

fieldLabel: '电影名',//显示在左边的文本标签，当然也可以设置成在右边或上边

name: 'title'//和html一样，发送到服务器端的变量名

}

Ext中的表单项和html中的表单项基本上是一致的，因为Ext 是用于Web的。

 

校验

当用户操作不当时，我们应该要给出错误提示。让我们在上面的例子里加入校验吧。最常见的校验是检查用户是否输入了值。我们就用在电影名这个表单项上吧。把它设成必填项。

{

xtype: 'textfield',

fieldLabel: '电影名',

name: 'title',

allowBlank: false

}

加上个allowBlank: false，这是很容易的。默认情况下为true.

有些表单项的校验可能会很特殊，如日期，下面的代码限制了只能填入星期六和星期日。

{

xtype: 'datefield',

fieldLabel: '上映日期',

name: 'released',

width:120,

disabledDays: [1,2,3,4,5]

}

要记得星期是从0开始代表星期日，6结束代表星期六。

当然我们还可以设置数字校验，小数位数等，相关配置可以查看API.

更复杂的校验是vtype。它可以校验限制用户的输入，并且提示错误信息。你可以用它来校验你能想到的任何场景，因为它是用正则表达式来设置的。

已经有一些内置的vtypes可以用了：

Email

url

alpha

alphanum

 

这些内置的vtypes简单易用，并可以用它们来创建自己的vtype。

我们在导演这个表单项加入vtype限制，只能输入字母。

{

xtype: 'textfield',

fieldLabel: '导演',

name: 'director',

vtype: 'alpha'

}

这个例子我们可以看到内建的vtype很基础，表单项的导演就只能输入字母，输入中文就用红色波浪形给出提示了。

 

错误信息提示

默认情况下，表单项验证不通过时是以红色波浪形给出提示，和微软的word对语法的错误校验提示一样。我们还可以在ext 中设置其它的错误提示方式。

一种比较好的方式是除了给出红色波浪形，当鼠标移到表单项上时，弹出提示框信息。我们只需要在表单创建之前加入一条语句就 可以了。

Ext.onReady(function(){

Ext.QuickTips.init();

// our form here

});

                                                                                                     

创建自己的vtype

如果你也像我一样看到正则表达式就头大，我总是先找一些类似的然后做些修改，而不是从头写起。http://guoyiqi.iteye.com

要创建我们自己的vtype,就要在vtype的定义中添加。每个定义包括值，掩码，错误信息和测试用的函数。

我们对导演名进行校验，只能包含字符和空格，第一个字母大写。

<script>

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/;//校验的值

Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/;//限制输入

Ext.form.VTypes['nameText'] = '名字格式有误';//错误信息

Ext.form.VTypes['name'] = function(v){//测试函数

return Ext.form.VTypes['nameVal'].test(v);

}

var movie_form = new Ext.FormPanel({

url: 'movie_forms_ubmit.jsp',

renderTo: document.body,

frame: true,

title: '电影信息',

width: 280,

items: [{

xtype: 'textfield',

fieldLabel: '电影名',

name: 'title',

allowBlank: false

},{

xtype: 'textfield',

fieldLabel: '导演',

name: 'director',

vtype: 'name'

},{

xtype: 'datefield',

fieldLabel: '上映日期',

name: 'released',

width:120,

disabledDays: [1,2,3,4,5]

}]

});

});

</script>

 

掩码可以限制输入，如只允许数字或是字母。因为用正则表达式做设置，所以可以过滤掉任何按键。举个例子copy right guoyiqi 2009

maskRe: /[A-Z]/

可以输入任意长度字母串。

也可以用vtype来做限制。如果格式变来变去，就应该做成容易修改的代码。如果你的boss过来跟你说，上次我们的数字保留的是10位，现在我们可不可以改成8位。这时我们只需要改下vtype 就可以了。

http://guoyiqi.iteye.com

Radio buttons and check boxes

单选和多选框

单选框和多选框真是很难用的恶魔。我只在毫无选择的情况下才会使用它们。

我们现在表单里加入单选框。

{

xtype: 'radio',

fieldLabel: 'Filmed In',

name: 'filmed_in',

boxLabel: 'Color'

},{

xtype: 'radio',

hideLabel: false,

labelSeparator: '',

name: 'filmed_in',

boxLabel: 'Black & White'

}

他们和html的单选框很像，给了相同的名字就可以设成一组。我们设置第一个radio的标签，其余的没有设置。

默认情况下标签以：隔开，如图

如果隐藏了标签，

 

都影响了视觉效果，所以设置了hideLabel: false,

labelSeparator: '',将：替换成空。

有时我们要用到多选框来设置布尔类型-开或关的两个状态值。

{

xtype: 'checkbox',

fieldLabel: '是否好电影',

name: 'good_movie'

}

 

在firefox浏览器的效果出不来，如图http://guoyiqi.iteye.com

 

 

 

在html的表单中，组合框或叫选择框或叫下拉框是很常用的。Ext的组合框是很实用的。

我们先来试一下组合框的数据取自本地。我们需要建一个data store。Data store有很多种类，这里用一个简单的。font-size:

分享到：

learning ext js 电子书 | learning ext js 中文版 之 根据用户操作 ...

• 2009-02-04 08:21
• 浏览 1925
• 评论(0)
• 查看更多