ExtJs 类的设计

阅读更多

  一、类的设计
    JavsScript并没有提供一个自动的调用父类构造器的机制，所以必须通过属性superclass在构造器中显式调用父类。第一个参数总是this，以保证构造器工作在调用函数的作用域。

 MyNewClass = function(arg1, arg2, etc) {
     // 显示调用父类的构造函数
     MyNewClass.superclass.constructor.call(this, arg1, arg2, etc);
};

Ext.extend(MyNewClass, SomeBaseClass, {
    theDocument : Ext.get(document),
     myNewFn1 : function() {
         // etc
    },
     myNewFn2 : function() {
         // etc
    }
});

MyNewClass = function(arg1, arg2, etc) {
	// 显示调用父类的构造函数
	MyNewClass.superclass.constructor.call(this, arg1, arg2, etc);
};

Ext.extend(MyNewClass, SomeBaseClass, {
	theDocument : Ext.get(document),
	myNewFn1 : function() {
		// etc
	},
	myNewFn2 : function() {
		// etc
	}
});

二、扩展Ext.Component
    一个可重用模板

MyComponent = Ext.extend(Ext.some.component, {
     //缺省构造参数，可被自定义设置覆盖
    propA: 1,

     initComponent: function(){
        //在组件初始化期间调用的代码

         //因为配置对象应用到了“this”，所以属性可以在这里被覆盖，或者添加新的属性
         //（如items,tools,buttons）
         Ext.apply(this, {
            propA: 3
        });

        //调用父类代码之前

         //调用父类构造函数（必须）
         MyComponent.superclass.initComponent.apply(this, arguments);

        //调用父类代码之后
         //如：设置事件处理和渲染组件
    },

     //覆盖其他父类方法
     onRender: function(){

         //调用父类代码之前

         //调用父类相应方法（必须）
         MyScope.superclass.onRender.apply(this, arguments);

         //调用父类代码之后

    }
});

 //注册成xtype以便能够延迟加载
 Ext.reg('mycomponentxtype', MyComponent);

MyComponent = Ext.extend(Ext.some.component, {
    //缺省构造参数，可被自定义设置覆盖
    propA: 1,
 
    initComponent: function(){
       //在组件初始化期间调用的代码
 
        //因为配置对象应用到了“this”，所以属性可以在这里被覆盖，或者添加新的属性
        //（如items,tools,buttons）
        Ext.apply(this, {
            propA: 3
        });
 
       //调用父类代码之前        
 
        //调用父类构造函数（必须）
        MyComponent.superclass.initComponent.apply(this, arguments);
 
       //调用父类代码之后
        //如：设置事件处理和渲染组件
    },
 
    //覆盖其他父类方法
    onRender: function(){
 
        //调用父类代码之前
 
        //调用父类相应方法（必须）
        MyScope.superclass.onRender.apply(this, arguments);
 
        //调用父类代码之后
 
    }
});
 
//注册成xtype以便能够延迟加载
Ext.reg('mycomponentxtype', MyComponent);

    创建以上代码的实例：

 var myComponent = new MyComponent({
    propA: 2
});
 //或者延迟加载:
{..
   items: {xtype: 'mycomponentxtype', propA: 2}
..}

var myComponent = new MyComponent({
    propA: 2
});
//或者延迟加载:
{..
  items: {xtype: 'mycomponentxtype', propA: 2}
..}

属性propA将被设置3次，按顺序分别是1，2，3 。通过跟踪代码（和注释） ，你会发现初始值为1（构造缺省），然后通过用户配置对象设置为2，最后在initComponent方法中被覆盖设置成3.希望这个例子能让你稍微明白代码执行的顺序（而不是按照你读代码的顺序！）。

因为组件是其他组件的基础，所以下面代码是获取基础组件快捷方法。

 var topCmp = (function(o){while(o.ownerCt){o=o.ownerCt} return o;})(this);