extjs 面向对象实践

近期一个项目前台采用了extjs框架，经过一段时间的编码，对extjs面向对象也有了一定的了解。以下通过FormPanel扩展对表单对象中常用代码段进行了通用提取，并以此实践ext面向对象的继承，希望对刚接触的朋友有所帮助。

1.实现类构造方法:

 1 /**/ /*
 2 * 默认表单类
 3 * add by daiqiang
 4 * */
 5 Ext.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方式实现父类方法、属性的继承扩展.

 1 Ext.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. extend(  Function 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('回调方法');提示一个表单新增操作完成。