当前位置: 代码迷 >> Web前端 >> Ext2.0 form运用实例
  详细解决方案

Ext2.0 form运用实例

热度:581   发布时间:2012-10-12 10:17:04.0
Ext2.0 form使用实例

Ext2.0 form 不单增加了时间输入控件、隐藏输入控件,还修改了创建方法,通过 formpanel 代替了原来 form column 也根据新的布局定义更新了定义方式。总体来说,定义一个 form 更简单便捷了。本文将通过一个实例介绍一下 2.0 form 的创建以及其大部分控件的使用方法,因水平有限,错漏难免,忘大家多多谅解!

我们先来看看我们将要设计的 form 的情况:


?

?

呵呵, form 有点杂乱,不过在这个 fomr 里包含了绝大部分 Ext2.0 的控件,我将会和大家一起探讨一下这些控件的使用。

在创建一个 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>

我们来看看效果:


?

?

在没有使用 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>

?


?

?

两个子 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>

?


?

?

6 个子 div 有序的按左对齐方式排列在一起了,当一行的子 div 的宽度超过了父 div 的宽度时,子 div 自动换行到了第二行。

不知道大家是否看得明白?看不明白自己再动手改变一下子 div 的宽度和高度,看看效果。 column 的工作方式就是这样的。明白这个很重要,因为在定义 checkbox radio 的时候,如果想它们的选项在同一行,就要注意 column 的宽度,不然就无法让他们在同一行。不过现在 column 是通过百分比来定义宽度的,我们只要控制好百分比就行了。

好了,我们继续写 form ,因为要用到 column ,所以我们先在 formpanel itmes 加入一个 column 的定义:

?

????? {

layout:'column',

??????? border:false,

??????? labelSeparator:' ',

??????? items:[]

}

?

代码里定义了在这里使用的是 columnlayout layout:'column' );没有边( border:false );标题的分隔符号我们用中文冒号代替英文的冒号( labelSeparator:' ' )。 coulmnLayout 里的控件将定义在 items 里。

我们首先在 items 里加入一个常用输入控件,是用来输入姓名的:

?

{

??????????? columnWidth:.5,

??????????? layout: 'form',

??????????? border:false,

??????????? items: [{

??????????????? xtype:'textfield',

??????????????? fieldLabel: ' 姓名 ',

??????????????? name: 'name',

????????????? ?? anchor:'90%'

??????????? }]

??????? }

?

我们设置了该列的宽度占总宽度的 50% columnWidth:.5 );在布局里放了一个 formlayout 用来放置控件( layout: 'form' ); formlayout 也是没有边的( border:false )。在 formlayout 里有一个类型为 textfield' xtype:'textfield' )的输入控件。控件标题为姓名( fieldLabel: ' 姓名 ' ),输入框( input )的 name 属性设置“ name ”( name: 'name' ),输入框的长度为列宽减去标题的宽度后的 90% anchor:'90%' ),余下的 10% 的是给显示错误信息图标用的。

在加入性别的 radio 控件时就要注意了,这里需要加入两个 radio ,第一 radio 是有标题的,第二是没有的,而且两个 radio 加起来的宽度应该正好是余下的列宽( 50% ):

?

{

??????????? columnWidth:.25,

??????????? layout: 'form',

??????????? border:false,

??????????? items: [{

???????????? ???????? style:'margin-top:5px',

??????????????? xtype:'radio',

??????????????? fieldLabel: ' 性别 ',

??????????????? boxLabel:' ',

??????????????? name: 'sex',

??????????????? checked:true,

??????????????? inputValue:' ',

??????????????? anchor:'95%'

??????????? }]

??????? },{

??????????? columnWidth:.25,

??????????? layout: 'form',

??????????? labelWidth:0,

??????????? labelSeparator:'',

??????????? hideLabels:true,

??????????? border:false,

??????????? items: [{

???????????? ???????? style:'margin-top:5px',

??????????????? xtype:'radio',

??????????????? fieldLabel: '',

??????????????? boxLabel:' ',

??????????????? name: 'sex',

??????????????? inputValue:' ',

??????????????? anchor:'95%'

??????????? }]

??????? }

?

从代码中可以看到,除了列宽设置为 25% 外,其它的列设置和第一控件是一样。 Formlayout 里加入了一个类型为 radio 的控件。控件的标题是性别,控件的选择显示文本是男( boxLabel:' 男), input name 属性值是 sex name: 'sex' ),该控件默认是已选的( checked:true ),控件的值( value )是男( inputValue:' ' ), input 的宽度是 95% 。在这里我还设置一个 css 属性,顶部的外补丁为 5px style:'margin-top:5px' ),原因是为了选择按钮和标题对齐,大家可以将该属性去掉然后看看效果。

第二个 raido 控件的列设置就有所不同,因为它不需要标题,所以要设置隐藏标题( hideLabels:true ),标题的宽度设置为 0 labelWidth:0 , 还要设置其标题分隔符号为空( labelSeparator:'' )。其余的设置和第一个 radio 的设置没有不同,只是 input 的值不同了。

我们已经设置了 3 列, 3 列的列宽分别为 50% 25% 25% ,根据 float 的原则,下一列将从第二行开始。

在第二行第一列我们要增加的是一个日期选择控件:

?

????? {

??????????? columnWidth:.5,

??????????? layout: 'form',

??????????? border:false,

??????????? items: [{

?? ????????????? xtype:'datefield',

??????????????? fieldLabel: ' 出生日期 ',

??????????????? name: 'birthday',

??????????????? anchor:'90%'

??????????? }]

????? }

?

日期控件的列宽也是 50% ,列的其它设置没有变化。控件的类型为 datefield ,标题是出生日期, input name 属性是 birthday intput 宽度也是设置了 90% ,出来留出空位给错误信息外,还可以让控件与上一行的姓名的宽度相同,整列看起来比较整齐。

日期控件的设置和普通文本输入的设置一样简单,这里就不多说了。不过要说到的是汉化的问题。在 2.0 版自带的本地化文件 ext-lang-zh.js 中存在一些小 bug ,我们需要自己修改一下。

首先要修改的是周的显示,原来的定义是:

?

Date.dayNames = [

?? " 周日 ",

?? " 周一 ",

?? " 周二 ",

?? " 周三 ",

?? " 周四 ",

?? " 周五 ",

?? " 周六 "

];

?

因为在日期选择中显示的区域不够宽,只能显示一个汉字,所以需要将上面定义的把“周”去掉,修改为:

?

Date.dayNames = [

?? " ",

?? " ",

?? " ",

?? " ",

?? " ",

?? " ",

?? " "

];

?

在年份和月份选择中的按钮文字还是英文“ ok ”和“ cancel ”的,这里我们也需要修改一下:

?

if(Ext.DatePicker){

?? Ext.apply(Ext.DatePicker.prototype, {

????? todayText???????? : " 今天 ",

????? minText??? ??????? : " 日期在最小日期之前 ",

????? maxText?????????? : " 日期在最大日期之后 ",

????? disabledDaysText? : "",

????? disabledDatesText : "",

????? monthNames????? : Date.monthNames,

????? dayNames????????? : Date.dayNames,?????

????? nextText????????? : ' 下月 (Control+Right)',

????? prevText????????? : ' 上月 (Control+Left)',

????? monthYearText???? : ' 选择一个月 (Control+Up/Down 来改变年 )',

????? todayTip????????? : "{0} (Spacebar)",

????? okText??????????? : " 确定 ",

????? cancelText??????? : " 取消 ",

????? format??????????? : "y m d "

?? });

}

?

上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式是“ y m d 日”,需要修改:

?

if(Ext.form.DateField){

?? Ext.apply(Ext.form.DateField.prototype, {

????? disabledDaysText? : " 禁用 ",

????? disabledDatesText : " 禁用 ",

????? minText?????????? : " 该输入项的日期必须在 {0} 之后 ",

????? maxText?????????? : " 该输入项的日期必须在 {0} 之前 ",

????? invalidText?????? : "{0} 是无效的日期 - 必须符合格式: {1}",

????? format??????????? : "Y-m-d"

?? });

}

?

修改 DatePicker 不会改变 DateField 的格式的,这个自己根据情况决定,呵呵。

我们继续,现在需要加入一个学历的下拉选择控件。下来选择控件最重要的一个定义就是数据的定义的,数据定义错误,可能得不到我们需要的效果,也是很多朋友感觉最麻烦的地方。

?

{

??????????? columnWidth:.5,

??????????? layout: 'form',

??????????? border:false,

??????????? items: [{

??????????????? xtype:'combo',

??????????????????????????????????????????????????????? store: new Ext.data.SimpleStore(

?????????????????????????????????? ????? {

?????????????????????????????????? ??????? fields: ["retrunValue", "displayText"],

?????????????????????????????????? ??????? data: [[1,' 小学 '],[2,' 初中 '],[3,' 高中 '],[4,' 中专 '],[5,' 大专 '],[6,' 大学 ']]

?????????????????????????????????? ????? }),

?????????????????????????????????? ????? valueField :"retrunValue",

?????????????????????????????????? ????? displayField: "displayText",

?????????????????????????????????? ????? mode: 'local',

?????????????????????????????????? ????? forceSelection: true,

?????????????????????????????????? ????? blankText:' 请选择学历 ',

?????????????????????????????????? ????? emptyText:' 选择学历 ',

???????????????????? ????????????? ????? hiddenName:'education',

?????????????????????????????????? ????? editable: false,

??????????????????????????????????????????????????????? triggerAction: 'all',

??????????????????????????????????????????????????????? allowBlank:false,

??????????????? fieldLabel: ' 学历 ',

??????????????? name: 'education',

??????????????? anchor:'90%'

??????????? }]

????? }

?

列的定义就不说了,没变化。在 items 里,类型设置成 combo 了,在这里定义了一个 sotre 属性,就是选择值存储的地方,因为是在客户端的数据,所以使用了一个简单存储( SimpleStore )。在存储里,我们通过一个数组定义了 retrunValue displayText 两个字段。 retrunValue 字段指定是提交给后台的值, displayText 字段指定是在下拉中显示的选择值。然后我们在 data 里定义了几组数据( data: [[1,' 小学 '],[2,' 初中 '],[3,' 高中 '],[4,' 中专 '],[5,' 大专 '],[3,' 大学 ']] ),我们可以看到,每组数据都是根据 fiedls 的定义来组成的,数组里第一个值就是 retrunValue 的值,第二个值就是 displayText 的值,例如 [1,' 小学 '] ,就表示 retrunValue 1 displayText 是小学。

下面就是很重要的一步了,设置下拉选择框的值和显示文本。本例中设置了下拉选择框的提交值对象的是存储中的 retrunValue 字段( valueField :"retrunValue" ),显示文本是存储中的 displayText 字段( displayField: "displayText" ),通过这两个设置就可将存储中的数据和下拉框对应起来。

因为数据是在本地,所以设置了模式为 local mode: 'local' )。该下拉列表只允许选择,不允许输入( editable: false ),而且是必须选择一个选项( forceSelection: true )。在没有选择值时显示为选择学历( emptyText:' 选择学历 ' )。提交 form 时,该项如果没有选择,则提示错误信息“请选择学历”( blankText:' 请选择学历 ' )。该选项值不允许为空( allowBlank:false )。大家要注意的是 hiddenName name 属性, name 只是改下拉的名称,作用是可通过,而 hiddenName 才是提交到后台的 input name 。如果没有设置 hiddenName ,在后台是接收不到结构的,这个大家一定要注意。

因为这个下拉是只能选择的,所以一定要设置属性 triggerAction all ,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。

如果要为控件设置默认值,就设置属性 value value 的值要设置为提交给后台的值,不要设置为显示文本。例如本例要设置大学为默认值得,则设置 value 的值为 6

现在到第三行了,我们要创建一个 checkbox 选项输入:

?

{

??????????? columnWidth:.35,

??????????? layout: 'form',

??????????? border:false,

??????????? items: [{

??????????????? xtype:'checkbox',

??????????????? fieldLabel: ' 权限组 ',

??????????????? boxLabel:' 系统管理员 ',

??????????????? name: 'popedom',

??????????????? inputValue:'1',

??????????????? anchor:'95%'

??????????? }]

????? },{

??????????? columnWidth:.2,

??????????? layout: 'form',

??????????? labelWidth:0,

??????????? labelSeparator:'',

??????? ???? hideLabels:true,

??????????? border:false,

??????????? items: [{

??????????????? xtype:'checkbox',

??????????????? fieldLabel: '',

??????????????? boxLabel:' 管理员 ',

??????????????? name: 'pepedom',

??????????????? inputValue:'2',

??????????????? anchor:'95%'

??????????? }]

??????? },{

??????????? columnWidth:.2,

??????????? layout: 'form',

??????????? labelWidth:0,

??????????? labelSeparator:'',

??????????? hideLabels:true,

??????????? border:false,

??????????? items: [{

??????????????? xtype:'checkbox',

??????????????? fieldLabel: '',

??????????????? boxLabel:' 普通用户 ',

??????????????? name: 'pepedom',

??????????????? inputValue:'3',

??????????????? anchor:'95%'

??????????? }]

??????? },{

??????????? columnWidth:.25,

??????????? layout: 'form',

??????????? labelWidth:0,

??????????? labelSeparator:'',

??????????? hideLabels:true,

??????????? border:false,

??????????? items: [{

??????????????? xtype:'checkbox',

??????????????? fieldLabel: '',

??????????????? boxLabel:' 访客 ',

??????????????? name: 'pepedom',

???? ??????????? inputValue:'4',

??????????????? anchor:'95%'

??????????? }]

??????? }

?

checkbox 的设置和 radio 的设置大同小异,大家注意列宽的定义就行。

第四行的两个输入框主要是测试通过 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: [{

E

  相关解决方案