ExtJS_FormPanel 小结

关注

原创最新推荐文章于 2023-12-20 14:55:19 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

ExtJS Window嵌入FormPanel，多次调用报错问题原始代码： Ext.define('Gigi.view.user.EditForm', { extend : 'Ext.form.Panel', alias : 'widget.userform', frame : true, bodyPadding : 5, 阅读详情

最近写了一段关于FormPanel 的代码，主要是来实现提交和验证。有几点收获进行总结下。

1）在提交时可以选择id或者name.

2）在验证时可以自定义，也可以使用默认的。主要是通过正则表达式来判断

3）Form可以说是个特别的东东，主要实在div中实现的，所以如果其他的内容不放在div里面，则会有意想不到的效果产生。

Ext.onReady(function(){

    Ext.QuickTips.init(); //初始化Tip
    Ext.form.Field.prototype.msgTarget = 'side';   //Tip显示位置

    var fm =new Ext.form.FormPanel({
    title: "登陆",
    renderTo:Ext.getBody(), //渲染
    frame:true,
    buttonAlign:"right",

    width: 300,
    height: 200,
    layout:"form",
    //plain:true, //协调颜色
    //resizable:false,
    //bodyStyle:"padding:7px",
    labelWidth:60,
    defaults:{xtype:"textfield", width:180},
    buttonAlign:"center",
//    closable:false, //指定close按钮的显示
//    closeAction:"hide", 指定close按钮触发的事件
    listeners:{
      "show":function(){
        Ext.Msg.alert("窗体显示");
       },
      "hide":function(){
        alert("窗体隐藏");
       },
      "close":function(){
        alert("窗体关闭");
       }
     },
    items:[{
      fieldLabel:"账号",
      id:"count",
      name:"count"
     },{
      fieldLabel:"密码",
      id:"password",
      name:"password"
     },{
      fieldLabel:"电话号码",
      id:"phone",
      name:"phone",
      blankText:'不能为空',
      allowBlank: false
     },{
      fieldLabel:"邮箱",
      id:"email",
      name:"email",

// 要求email非空
allowBlank: false,

     //验证email
      vtype:"email",
      //当鼠标放到此处时显示的提示，如果不写的话就显示默认的。
      vtypeText:"email输入有错误"
     }],
    buttons:[{
      text:"确定",
      handler:function(){
          //alert(Ext.getCmp("count").getValue());
          this.ownerCt.ownerCt.getForm().submit();
              Ext.Ajax.request({url:"test.jsp",success:function(response){alert(response.responseXML.xml);}, params:{name:Ext.getCmp("count").getValue(), sex:Ext.getCmp("password").getValue(), phone:Ext.getCmp("phone").getValue(), email:Ext.getCmp("email").getValue()}});
         }
     },{
      text:"取消",
      handler:function(){
       }
     }]
    });
       });

</script>
</head>

<body>
<div>测试</div>