2007-11-06

EXT表单的应用３

关键字: 表单的应用３
引自http://winsonet.cnblogs.com/
一、美化表单：
ExtJS自带的CSS效果可以让表单非常漂亮，在使用前先将ext-all.css文件导入页面，然后加入以下代码

<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<form id="regform">
<fieldset align="middle">
<legend><font class="btitle" color="#ff7300"><strong class="style7">帐号信息strong>font>legend>
<table width="100%" align="center">
<tr>
<td style="text-align: right">
会员Email：
td>
<td style="text-align: left" width="300">
<input type="text" id="UserEmail" name="UserEmail" /> <span id="msg" style="display: none">span>
td>
tr>
<tr>
<td style="text-align: right">
登录密码：
td>
<td style="text-align: left">
<input id="UserPwd" name="UserPwd" type="password" />
td>
tr>
<tr>
<td style="text-align: right">
密码确认：
td>
<td style="text-align: left">
<input id="UserPwd1" name="UserPwd1" type="password" />
td>
tr>
table>
fieldset>
<div id="regbutton">
div>
form>
div>
div>
div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc">
div>
div>
div>

二、绑定及验证表单：
以上只是将表单显示出来了，如需对表单域操作，还需要在JS里写相关的代码进行绑定
var fm2 = new Ext.form.BasicForm('regform');
//加入验证框
 fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
 blankText:'EMAIL不能为空，且请确保有效地址！',
//regex:re,//正则验证
 invalidText:'EMAIL格式不正确或此EMAIL已被注册！',
validator:checkEmail//自定义验证函数
 }).applyTo(userEmail));

fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
 blankText:'密码不能为空！'
}).applyTo(Ext.get('UserPwd')));

fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
 blankText:'密码不能为空！',
invalidText:'2次密码不相同！',
validator:vailda//自定义验证函数
 }).applyTo(Ext.get('UserPwd1')));

fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
 blankText:'会员名称不能为空！'
}).applyTo('CustomerName'));

ExtJS能对表单进行非常灵活的验证，上面是将表单的字段绑定起来，同时添加了相应的验证，并且也支持自定义函数验证，以下是对比2个输入框密码是否相同的自定义函数
/**
* 验证密码是否相同
*/
function vailda()
{
if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
return true;
else
return false;
}

如果想让效果更好，还要在绑定代码里加多一句
Ext.QuickTips.init();
加入此代码后，表单验证的错误消息会在鼠标放到相应字段时显示出来

三、表单提交：
先将提交按钮进行注册，然后再对此按钮进行操作
//注册按钮
 Ext.get('regform').un("submit", fm2.onSubmit, fm2);
var regButton = new Ext.Button('regbutton', {
text: ' 注 册 ',
handler: function(){
if (fm2.isValid()) {
Ext.Msg.show({
title:'再确认一下',
modal : false,
msg: '您确定资料正确吗?',
buttons: Ext.Msg.OKCANCEL,
fn: function(btn, text){
if (btn == 'ok'){
fm2.submit({
url: 'Register.htm',
params: {
oper: 'submit'
},
msgethod: 'POST',
waitMsg:'正在提交,请稍等'
});
}
},
animEl: 'regbutton'
}).getDialog().moveTo(200, 100);
} else {
Ext.Msg.show({
title:'信息',
msg: '请填写完整后再提交!',
modal : false,
buttons: Ext.Msg.OK
}).getDialog().moveTo(200, 100);
}
}
});
评论
siyuan 2008-04-19
如果有两个按钮呢？怎样使用new Ext.Button生成两个button
发表评论

您还没有登录，请登录后发表评论

zhangguoli1997
搜索本博客
存档
最新评论