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;   
                   }