ExtJs中的表单提交和页面弹出表单

1.表单提交

代码：

  form.jsp页面：

<form id="panel22"action="getTest.jsp" method="post"></form>

  form.js：

  //创建表单面板
   var MyformPanel=Ext.create('Ext.form.Panel', {
                frame: true,
                title: 'FormFields Validation',
                width: 340,
                bodyPadding: 5,
                renderTo:"panel22",    //渲染到页面的form中去
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 90,
                    anchor: '100%',
                    //错误提示显示在下方，还可以配置为side、title、none
                    msgTarget: 'under'
                },
                items:[{
                    xtype:'fieldset',
                  title:'用户信息',   //外框的title
                  collapsible:true,
                  autoHeight:true,
                  autoWidth:true,
                  defaults:{width:150,allowBlank:false,xtype:'textfield'},//提取共同属性
                items: [{
                    xtype: 'textfield',
                    name: 'textfield1',
                    fieldLabel: '必须输入',
                    //不允许为空验证
                    allowBlank: false //1
                }, {
                    xtype: 'textfield',
                    name: 'textfield2',
                    fieldLabel: '最多两个字符',
                    //输入的字符长度验证（至少输入2个字符）
                    minLength: 2 //2
                }, {
                    xtype: 'textfield',
                    name: 'textfield3',
                    fieldLabel: '最长5个字符',
                    //输入的字符长度验证（最多输入2个字符）
                    maxLength: 5 //3
                }, {
                    xtype: 'textfield',
                    name: 'textfield7',
                    fieldLabel: '正则表达式验证电话号码',
                    //通过正则表达式验证
                    regex: /^\d{3}-\d{3}-\d{4}$/, //4
                    regexText: 'Must be in the format xxx-xxx-xxxx'
                }, {
                    xtype: 'textfield',
                    name: 'textfield4',
                    fieldLabel: '验证用户输入的是否为email',
                    //已经定义好的验证，请通过文档查看vtype
                    vtype: 'email' //5
                }, {
                    xtype: 'textfield',
                    name: 'textfield6',
                    fieldLabel: '验证用户输入的是否是URL',
                    vtype: 'url' //8
                }]             
               }],
               buttons:[{text:"确定",handler:function(){
               //获取按钮的父表单
                 var form=this.up("form").getForm();
                 //alert(form);
                 if(form.isValid())  //判断是否通过验证
                 {
                    //获取页面的表单转化为dom对象后提交
                    Ext.get("panel22").dom.submit(); 
//获取页面的表单元素后提交
                 };
                 }
               },{text:"取消",handler:reset}],
               buttonAlign:'center'
            });
//            function logins(){
//              alert("aaaaa");
//         MyformPanel.form.submit();//提交
//              //alert("sdha");
//         }
           function reset(){
            MyformPanel.form.reset();//取消
           //alert("取消");
           }
});

效果图：

2.页面弹出表单提交数据

 showform.js文件：

 Ext.onReady(function(){
    //所有的操作定义在函数showform中
    var showform=function(){
    var add_winForm =  Ext.create('Ext.form.Panel', {
                frame: true,   //frame属性
                //title: 'Form Fields',
                width: 340,
                bodyPadding:5,
                //renderTo:"panel21",
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 90,
                    anchor: '100%'
                },
                items: [{
                    //隐藏的文本框
                    xtype: 'hiddenfield', //1
                    name: 'hiddenfield1',
                    value: '隐藏的文本框'
                }, {
                    //显示文本框，相当于label
                    xtype: 'displayfield', //2
                    name: 'displayfield1',
                    fieldLabel: 'Display field',
                    value: '显示文本框'
                   
                }, {
                    //输入文本框
                    xtype: 'textfield', //3
                    name: 'textfield1',
                    fieldLabel: 'Text field',
                    //value: '输入文本框',
                    allowBlank: false,
                    emptyText:'陈建强',
                    blankText:"提示"
                }, {
                    //输入密码的文本框，输入的字符都会展现为.
                    xtype: 'textfield', //4
                    name: 'password1',
                    inputType: 'password',
                    fieldLabel: 'Password field'
                }, {
                    //多行文本输入框
                    xtype: 'textareafield', //5
                    name: 'textarea1',
                    fieldLabel: 'TextArea',
                    id:"areaid",
                    value: '啦啦啦，我是卖报的小行家'
                }, {
                    //上传文件文本框
                    xtype: 'filefield', //6
                    name: 'file1',
                    fieldLabel: 'File upload'
                }, {
                    //时间文本框
                    xtype: 'timefield', //7
                    name: 'time1',
                    fieldLabel: 'Time Field',
                    minValue: '8:00 AM',
                    maxValue: '5:00 PM',
                    increment: 30
                }, {
                    //日期文本框
                    xtype: 'datefield', //8
                    name: 'date1',
                    fieldLabel: 'Date Field',
                    value: new Date()
                }, {
                    //下拉列表框
                    xtype: 'combobox', //9
                    fieldLabel: 'Combobox',
                    displayField: 'name',
                    store: Ext.create('Ext.data.Store', {
                        fields: [
                          { type: 'string', name: 'name' }
                          ],
                                          data: [
                          { "name": "Alabama" },
                          { "name": "Alaska" },
                          { "name": "Arizona" },
                          { "name": "Arkansas" },
                          { "name": "California" }
                          ]
                    }),
                    queryMode: 'local',
                    typeAhead: true
                }, {
                    //只能输入数字的文本框
                    xtype: 'numberfield',
                    name: 'numberfield1', //10
                    fieldLabel: 'Number field',
                    value: 20,
                    minValue: 0,
                    maxValue: 50
                }, {
                    //复选框
                    xtype: 'checkboxfield', //11
                    name: 'checkbox1',
                    fieldLabel: 'Checkbox',
                    boxLabel: '复选框'
                }, {
                    //单选框，注意name和下面的单选框相同
                    xtype: 'radiofield', //12
                    name: 'radio1',
                    value: 'radiovalue1',
                    fieldLabel: 'Radio buttons',
                    boxLabel: 'radio 1'
                }, {
                    //单选框，注意name和上面的单选框相同
                    xtype: 'radiofield', //13
                    name: 'radio1',
                    value: 'radiovalue2',
                    fieldLabel: '',
                    labelSeparator: '',
                    hideEmptyLabel: false,
                    boxLabel: 'radio 2'
                }, {
                    //拖动组件
                    xtype: 'multislider', //14
                    fieldLabel: 'Multi Slider',
                    values: [25, 50, 75],
                    increment: 5,
                    minValue: 0,
                    maxValue: 100
                }, {
                    //拖动组件
                    xtype: 'sliderfield', //15
                    fieldLabel: 'Single Slider',
                    value: 50,
                    increment: 10,
                    minValue: 0,
                    maxValue: 100
                }]
//                ,
//                buttons:[{text:"确定",handler:function(){
//                   varform1=this.up("form").getForm();
//                   //alert(form1);
//                  Ext.get("panel21").dom.submit();
//                }},{text:"取消",handler:function(){alert("事件！");}}],
//                buttonAlign:'center'
            });
            
    //alert(add_winForm);
    //创建window面板，表单面板是依托window面板显示的
    var syswin = Ext.create('Ext.window.Window',{
              title : "新建属性",
              width : 350,
              //height : 120,
              //plain : true,
              iconCls : "addicon",
              // 不可以随意改变大小
              resizable : false,
              // 是否可以拖动
              // draggable:false,
              collapsible : true, // 允许缩放条
              closeAction : 'close',
              closable : true,
              // 弹出模态窗体
              modal : 'true',
              buttonAlign : "center",
              bodyStyle : "padding:0 0 0 0",
              items : [add_winForm],
              buttons : [{
                         text : "保存",
                         minWidth : 70,
                         handler : function() {
                            if (add_winForm.getForm().isValid()) {
                                add_winForm.getForm().submit({
                                          url :'testshowform.jsp',
                                           //等待时显示 等待
                                          waitTitle: '请稍等...',
                                          waitMsg: '正在提交信息...',
                                          params: {
                                              t: "add"
                                          },
                                          success: function(fp, o) {
       //alert(o);success函数，成功提交后，根据返回信息判断情况
                                              if (o.result== true) {
    Ext.MessageBox.alert("信息提示","保存成功!");
                                       syswin.close(); //关闭窗口
                                                 // Store1.reload();
                                              }else {
                                                 msg('信息提示', '添加时出现异常！');
                                              }
                                          },
                                          failure: function() {
                                              msg('信息提示', '添加失败！');
                                          }
                                       });
                            }
                         }
                     }, {
                         text : "关闭",
                         minWidth : 70,
                         handler : function() {
                            syswin.close();
                         }
                     }]
           });
    syswin.show();
    };
    showform(); //调用showform显示整个包含表单面板的window面板
});

Testshowform.jsp页面：

<%System.out.println("提交到了测试页面");%>
<%out.println("true"); %> //返回的“true”在success中的函数o.result中接收到的

效果截图：

提交过程效果图：