ExtJS_FormPanel 小结

最新推荐文章于 2021-03-23 22:53:58 发布

shandong_chu

最新推荐文章于 2021-03-23 22:53:58 发布

阅读量1.4k

点赞数

分类专栏： ExtJS 文章标签： extjs function email 正则表达式测试 div

本文链接：https://blog.csdn.net/ShanDong_Chu/article/details/4468042

版权

ExtJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近写了一段关于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>

<div>form还可以放在这个位置，当有很多组件时很适用</div>

测试//如果把"测试"放这里的话，会打乱布局。尤其体现在验证上。
</body>

shandong_chu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ExtJS_FormPanel 小结

最近写了一段关于FormPanel 的代码，主要是来实现提交和验证。有几点收获进行总结下。1）在提交时可以选择id或者name.2）在验证时可以自定义，也可以使用默认的。主要是通过正则表达式来判断3）Form可以说是个特别的东东，主要实在div中实现的，所以如果其他的内容不放在div里面，则会有意想不到的效果产生。Ext.onReady(function(){ Ex
复制链接

扫一扫