ExtJS学习心得（三）

这里主要讲一下表单的应用：）

一、美化表单：
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');    
                //加入验证框
).applyTo('CustomerName'));

ExtJS能对表单进行非常灵活的验证，上面是将表单的字段绑定起来，同时添加了相应的验证，并且也支持自定义函数验证，以下是对比2个输入框密码是否相同的自定义函数

                  }

如果想让效果更好，还要在绑定代码里加多一句

Ext.QuickTips.init();

加入此代码后，表单验证的错误消息会在鼠标放到相应字段时显示出来

三、表单提交：
先将提交按钮进行注册，然后再对此按钮进行操作

//注册按钮
              Ext.get('regform').un("submit", fm2.onSubmit, fm2);
);

其中waitMsg即指定提交时loading的文字，animEl则绑定提交按钮的特效，在fm2.on里就写表单提交前后的相应事件，表单的事件基本上就写完了，剩下的就是后台处理方法，我上一篇已有说明，在此就不再说了