Sencha logo  
 
产品咨询热线:021-32120333
 
       
 
 
 
Sencha Anmimator
HTML5动画编辑工具 Sencha Animator
Sencha Animator 是一个基于GUI的编辑器,针对的是想要创建HTML5动画的交互设计师。
 
 
 
ExtJS学习心得
 

这里主要讲一下表单的应用:)

一、美化表单:
ExtJS自带的CSS效果可以让表单非常漂亮,
如果你觉自带的这些效果不够漂亮,可以到本站的资源下载专区,下载其他皮肤.
下载地址: [url=http://www.extjs.org.cn/index.php?q=download/]
在使用前先将ext-all.css文件导入页面,然后加入以下代码

01.<div class="x-box-ml">
02.<div class="x-box-mr">
03.<div class="x-box-mc">
04.<form id="regform">
05.<fieldset align="middle">
06.<legend><font class="btitle" color="#ff7300">
07.<strong class="style7">帐号信息</strong></font></legend>
08.<table width="100%" align="center">
09.<tr>
10.<td style="text-align: right">
11.会员Email
12.</td>
13.<td style="text-align: left" width="300">
14.<input type="text" id="UserEmail" name="UserEmail" />
15.<span id="msg" style="display: none"></span>
16.</td>
17.</tr>
18.<tr>
19.<td style="text-align: right">
20.登录密码
21.</td>
22.<td style="text-align: left">
23.<input id="UserPwd" name="UserPwd" type="password" />
24.</td>
25.</tr>
26.<tr>
27.<td style="text-align: right">
28.密码确认
29.</td>
30.<td style="text-align: left">
31.<input id="UserPwd1" name="UserPwd1" type="password" />
32.</td>
33.</tr>
34.</table>
35.</fieldset>
36.<div id="regbutton">
37.</div>
38.</form>
39.</div>
40.</div>
41.</div>
42.<div class="x-box-bl">
43.<div class="x-box-br">
44.<div class="x-box-bc">
45.</div>
46.</div>
47.</div>

二、绑定及验证表单:
以上只是将表单显示出来了,如需对表单域操作,还需要在JS里写相关的代码进行绑定
01.var fm2 = new Ext.form.BasicForm('regform');   
02.//加入验证框
03.fm2.add(new Ext.form.TextField({
04.allowBlank: false,//不能为空
05.blankText:'EMAIL不能为空,且请确保有效地址!',
06.//regex:re,//正则验证
07.invalidText:'EMAIL格式不正确或此EMAIL已被注册!',
08.validator:checkEmail//自定义验证函数
09.}).applyTo(userEmail)); 
10. 
11.fm2.add(new Ext.form.TextField({
12.allowBlank: false,//不能为空
13.blankText:'密码不能为空!'
14.}).applyTo(Ext.get('UserPwd')));
15. 
16.fm2.add(new Ext.form.TextField({
17.allowBlank: false,//不能为空
18.blankText:'密码不能为空!',
19.invalidText:'2次密码不相同!',
20.validator:vailda//自定义验证函数
21.}).applyTo(Ext.get('UserPwd1'))); 
22. 
23.fm2.add(new Ext.form.TextField({
24.allowBlank: false,//不能为空
25.blankText:'会员名称不能为空!'
26.}).applyTo('CustomerName'));

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

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

1.Ext.QuickTips.init();

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

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

01.//注册按钮
02.Ext.get('regform').un("submit", fm2.onSubmit, fm2);
03.var regButton = new Ext.Button('regbutton', {
04.text: ' 注 册 ',
05.handler: function(){
06.if (fm2.isValid()) {
07.Ext.Msg.show({
08.title:'再确认一下',
09.modal : false,
10.msg: '您确定资料正确吗?',
11.buttons: Ext.Msg.OKCANCEL,
12.fn:  function(btn, text){
13.if (btn == 'ok'){
14.fm2.submit({
15.url: 'Register.htm',
16.params: {
17.oper: 'submit'
18.},
19.msgethod: 'POST',
20.waitMsg:'正在提交,请稍等'
21.});
22.}
23.},
24.animEl: 'regbutton'
25.}).getDialog().moveTo(200, 100);
26.} else {
27.Ext.Msg.show({
28.title:'信息',
29.msg: '请填写完整后再提交!',
30.modal : false,
31.buttons: Ext.Msg.OK
32.}).getDialog().moveTo(200, 100);
33.}
34.}
35.});
36.fm2.on({
37.//提交之前
38.beforeaction: function(form, action){
39.regButton.disable();
40.},
41.//提交完成后
42.actioncomplete: function(form, action){           
43.if(action.type == 'submit'){
44.regButton.enable();
45.}       
46.if(action.result.success){
47.Cookies.set('Allcard_userName', Ext.get('CustomerName').dom.value);
48.Ext.Msg.show({
49.title:'成功',
50.msg: '恭喜,您已注册成功!',
51.modal : false,
52.fn: showResult,
53.buttons: Ext.Msg.OK
54.}).getDialog().moveTo(200, 100);   
55.}
56.else{
57.Ext.Msg.show({
58.title:'错误',
59.msg: '抱歉!您注册失败,请联系管理员!',
60.modal : false,
61.buttons: Ext.Msg.OK
62.}).getDialog().moveTo(200, 100);
63.}           
64.},
65.//提交失败后
66.actionfailed: function(form, action){
67.regButton.enable();
68.}
69.});

其中waitMsg即指定提交时loading的文字,animEl则绑定提交按钮的特效,在fm2.on里就写表单提交前后的相应事件,表单的事件基本上就写完了


TOP

 
其他产品
 
  • Sencha Complete
  • Sencha Complete:Team
  • Sencha Touch
  • Sencha Ext JS
  • Sencha Animator
  • Sencha GXT
  • Sencha Architect
  •  
    中文教程
     
  • 优化基于EXTJS 4.1的应用
  • 如何创建一个SENCHA TOUCH 2应用(第一部分)
  • 在线PHONEGAP打包SENCHA TOUCH 2客户端应用
  • SENCHA TOUCH自动生成工具
  • EXTJS 4应用架构设计
  •  
    咨询热线:021-32120333 传真:021-62119020 邮箱:info@senchasoftware.com