extjs的css效果及与传统布局结合下的panel的使用及表单提交

  一、美化表单:
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" /> &nbsp; < 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;   
                   }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值