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

来源：http://blog.csdn.net/i_am_wangzg/archive/2008/07/19/2677741.aspx

一、美化表单：
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(&apos;regform&apos;);   
                //加入验证框
                 fm2.add(new Ext.form.TextField({
                 allowBlank: false,//不能为空
                 blankText:&apos;EMAIL不能为空，且请确保有效地址！&apos;,
                //regex:re,//正则验证
                 invalidText:&apos;EMAIL格式不正确或此EMAIL已被注册！&apos;,
                 validator:checkEmail//自定义验证函数
                 }).applyTo(userEmail)); 
             
                 fm2.add(new Ext.form.TextField({
                 allowBlank: false,//不能为空
                 blankText:&apos;密码不能为空！&apos;
                 }).applyTo(Ext.get(&apos;UserPwd&apos;)));
              
                 fm2.add(new Ext.form.TextField({
                 allowBlank: false,//不能为空
                 blankText:&apos;密码不能为空！&apos;,
                 invalidText:&apos;2次密码不相同！&apos;,
                 validator:vailda//自定义验证函数
                 }).applyTo(Ext.get(&apos;UserPwd1&apos;))); 
            
               fm2.add(new Ext.form.TextField({
                 allowBlank: false,//不能为空
                 blankText:&apos;会员名称不能为空！&apos;
                 }).applyTo(&apos;CustomerName&apos;));
ExtJS能对表单进行非常灵活的验证，上面是将表单的字段绑定起来，同时添加了相应的验证，并且也支持自定义函数验证，以下是对比2个输入框密码是否相同的自定义函数
 /**//**
                    * 验证密码是否相同
                   */
                  function vailda()
                  {
                    if(Ext.get(&apos;UserPwd&apos;).dom.value==Ext.get(&apos;UserPwd1&apos;).dom.value)
                        return true;
                    else
                        return false;  
                   }

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/i_am_wangzg/archive/2008/07/19/2677741.aspx