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