eagle

学无止境,细节决定成败.
posts - 12, comments - 11, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

extjs 面向对象实践

Posted on 2009-07-17 23:31 月下孤城 阅读(2373) 评论(6)  编辑  收藏 所属分类: extjs
近期一个项目前台采用了extjs框架,经过一段时间的编码,对extjs面向对象也有了一定的了解。以下通过FormPanel扩展对表单对象中常用代码段进行了通用提取,并以此实践ext面向对象的继承,希望对刚接触的朋友有所帮助。

1.实现类构造方法:
 1/*
 2 * 默认表单类
 3 * add by daiqiang
 4 * */

 5Ext.ux.DefaultFormPanel = function(config){
 6        /*FormPanel submit按钮url*/
 7        this.subBtnUrl = config.subBtnUrl;
 8    /*submit按钮url提交参数*/
 9    this.subBtnParams = config.subBtnParams?config.subBtnParams:{};
10   /*submit提交完成后回调方法*/
11       this.subBtnCallbackFun = config.subBtnCallbackFun;
12    /*submit 显示文本*/
13       this.subBtnText = config.subBtnText? config.subBtnText:'保存';
14    /*
15        * 重置按钮定制方法
16        * 【主要针对表单状态为'修改'(非'新增')时,
17        * 提交表单数据可能含隐藏字段,
18        * 若用reset方法将把隐藏字段值也一并清掉。
19        * 考虑这种情况需自定义表单重置方法】
20        * */

21        this.resetBtnFun = config.resetBtnFun;
22    
23        Ext.ux.DefaultFormPanel.superclass.constructor.call(this, config);
24}
实现类构造方法中先初始化属性变量,然后调用继承类的构造方法,实现构造方法的继承扩展。

2.使用Ext.extend方式实现父类方法、属性的继承扩展.
 1Ext.extend(Ext.ux.DefaultFormPanel,Ext.form.FormPanel,{
 2    frame:true,
 3    defaultType: 'textfield',
 4    labelAlign:'right', 
 5    bodyStyle:'padding:5px 5px 0',
 6    layout : 'form',
 7    buttonAlign : 'center',
 8    autoHeight:true,
 9 initComponent:function(){
10        /*初始化提交、重置按钮*/
11        var oprBtns = [
12            {
13                text :this.subBtnText,
14                id:'subFormBtn',
15            handler :function(){
16                this.getForm().submit({
17                        url:this.subBtnUrl,
18                        params:this.subBtnParams,
19                        clientValidation: true,
21                        method:'post', 
22                        success:function(form, action){
23//                               Ext.Msg.alert("Success", action.result.msg);
24                               Ext.Msg.alert("信息", action.result.msg);
25                               //执行回调函数
26                            if(this.subBtnCallbackFun){
27                                   this.subBtnCallbackFun(this);
28                                }
;
29                         }
.createDelegate(this),
30                      failure: function(form, action){
31                            switch (action.failureType){
32                                case Ext.form.Action.CLIENT_INVALID:
33//                                    Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
34                                    Ext.Msg.alert("错误""提交的表单数据无效,请检查!");
35                                    break;
36                                case Ext.form.Action.CONNECT_FAILURE:
37//                                    Ext.Msg.alert("Failure", "Ajax communication failed");
38                                    Ext.Msg.alert("错误""服务器连接失败,请稍后再试!");
39                                    break;
40                                case Ext.form.Action.SERVER_INVALID:
41//                                   Ext.Msg.alert("Failure", action.result.msg);
42                                   Ext.Msg.alert("错误", action.result.msg);
43                           }

44                        }
.createDelegate(this)
45                    }
);
46                }
.createDelegate(this)
47            }
,
48        {    
49                text:'重置',
50                id:'resetFormBtn',
51            handler:function(){
52                    if(this.resetBtnFun){
53                             this.resetBtnkFun(this);
54                    }
else{
55                            this.getForm().reset();
56                    }

57                }
.createDelegate(this)
58            }

59        ];
60        
61    if(this.buttons){
62            for(var i=0;i<oprBtns.length;i++){
63                     this.buttons.push(oprBtns[i]);
64               }

65     }
else{
66                 this.buttons = oprBtns;
67         }

68        
69        Ext.ux.DefaultFormPanel.superclass.initComponent.apply(this, arguments);
70    }

71}
)

Ext.extendFunction subclass, Function superclass, [Object overrides] ),参数分别对应'子类对象','父类对象','覆盖扩展父类方法属性'。
2-8行是对FormPanel的默认设置。接下来就是对ext 组件方法initComponent的覆盖实现(了解ext组件生命周期详情点这里),该方法中主要实现默认的提交、重置
按钮操作。注意在29行代码success属性方法后加了个createDelegate(this)方法,这主要是success方法中引用了类属性this.subBtnCallbackFun,而success方法中的scope(域)
和当前类的scope不同,故通过Function类中的 createDelegate转化到当前域中。处理完自定义操作后别望了回调父类该方法,完成FormPanel的初始化工作。

3.调用代码片段
 1
           ...
            var formPanel = new Ext.ux.DefaultFormPanel({
 2                items:formItems,
 3               subBtnText:'新增',
 4               subBtnUrl : 'test/testDefaultForm.do',
                      subBtnParams:{id:'test'},   
                      items:items,  
                       subBtnCallbackFun:
function(){
 5                        alert('回调方法');
 6                    }

 7                }
);
 8           new Ext.Window({
 9                    width:310,
10                    height:400,
11                     layout :'fit',
12                     items:[formPanel]
13                }
).show();
代码执行后会弹出一个包含'新增','重置'按钮表单的窗口.点击新增按钮后会执行一系列流程:表单效验通过->发送subBtnUrl到后台接受数据->后台数据接受调用回调方法,最后alert('回调方法');提示一个表单新增操作完成。



---------------------
月下孤城
mail:eagle_daiqiang@sina.com

评论

# re: extjs 面向对象实践  回复  更多评论   

2009-07-17 23:42 by Gavin.lee
hi 问你个问题,为什么你的页面可以另存为 htm格式的呢,是你的哪里有设置吗? 我的就不可以。也看过其他的blogjava,也是有的行,有的不行。如果你知道的话,请回复给我,谢谢了。doingjava@126.com 期待ing

# re: extjs 面向对象实践  回复  更多评论   

2009-07-17 23:48 by 月下孤城
@Gavin.lee
这个我到没注意,写随笔的时候我就是按照系统默认的编辑器写的啊,没有其他特别的设置。

# re: extjs 面向对象实践  回复  更多评论   

2009-07-18 11:06 by 凡客诚品
不错 来看看

# re: extjs 面向对象实践  回复  更多评论   

2009-07-18 22:44 by Gavin.lee
呵,我找到原因了,是我勾选了 enable comments,不过这个应该不管页面保存的事吧,不知道算不算bug。

# re: extjs 面向对象实践  回复  更多评论   

2009-07-19 17:43 by 乾为天|天猪
createDelegate(this) 没必要.
加个scope:this

# re: extjs 面向对象实践  回复  更多评论   

2009-07-19 21:05 by eagle--daiq
@乾为天|天猪
多谢这位兄弟,这种方式不错,代码也更简洁些。

只有注册用户登录后才能发表评论。


网站导航: