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.页面弹出