Ext JS4学习教程+笔记（五）Form Panel的使用

Ext JS4中Form Panel的显示和提交，

示例代码如下：

function formTest(){

     Ext.create('Ext.form.Panel',{
          title:'form测试',
          bodyPadding:10,
          renderTo:Ext.getBody(),
          width:300,
          height:200,
           url: 'formdata.txt',
          defaultType: 'textfield',
          items:[
               {
                    name:'name',
                    fieldLabel:'姓名',
                    allowBlank: false,
                    msgTarget:'under',
                    blankText:'姓名必须输入'
               },
               {
                    xtype:'numberfield',
                    name:'year',
                    fieldLabel:'年龄',
                    maxValue:500,
                    minValue:1
               }
          ],
          buttons:[
               {
                    text:'重置',
                    handler:function(){
                         this.up('form').getForm().reset();                   
                    }
               },
               {
                    text:'提交',
                    handler:function(){
                       var formPanel = this.up('form');

            var form = this.up('form').getForm();

            if ( form.isValid() ) {

                form.submit({

                    success: function(form, action) {

                       Ext.Msg.alert('Success', action.result.msg);

                       formPanel.close();

                    },

                    failure: function(form, action) {

                        Ext.Msg.alert('Failed', action.result.msg);

                    }

                });

            }

                    }
               }
          ]
     });
    
}

说明：

1，Form Panel的类是 Ext.form.Panel，每个类创建时自动创建对应的 Ext.form.Basic类（用getForm()获得），管理其表单子元素，这个类提供了提交 submit(), 重置 reset()，验证 isValid()等表单方法。

2,Ext.form.Panel的url属性设上后，调用默认使用Ajax提交，请求表单内容就是每个表单元素的name:value对，响应内容应该为：

{
     success:true,
     msg:'成功的提交'
}

这样在submit的回调函数success或failure中就跟据上面返回的内容判断是否成功，action.result里面可以得到响应的值，例如上例中的action.result.msg。

3，每个表单的元素，可以用Form Panel的 defaultType: 'textfield'指定其默认类型，用items属性写其表单元素数组，默认使用'anchor'布局。

4，需要验证的字段，提交前可调用 isValid()判断一下，每个验证字段的控件，如textfield，都有很多验证的属性可以设置，如

                    allowBlank: false,
                    msgTarget:'under',
                    blankText:'姓名必须输入'

就表示不允许为空，错误提示显示的位置，及其中文提示验证信息内容，查询Ext JS4每个控件的文档即可。