Ext.FormPanel 4

阅读更多

第四行的两个输入框主要是测试通过 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 控件，希望大家能从中获得收益。如果有什么疑问和建议，请联系我。多谢！