EXT组件的扩展与插件开发

在Ext框架中没有相应的功能，我们可以自己动手实现。但是究竟是写扩展（Extension）还是写插件（Plugin）呢？

EXT组件的扩展与插件它们之间是有很相似的地方：

1，它们都是对现有的库的功能进行修改或加入新的功能。

2，扩展与插件均不能独立使用，它们须依赖组件、类运行。

 

扩展

扩展（extension）在Ext中就是指衍生的子类。假设我们已经有一个附有一些方法的基类，现在欲加入新方法。我们可以框架的继承特性和JavaScript创建新类的语言特性组合新的一个类，包含基类的方法和加入的新方法。

我们这里进行Ext类的扩展。首先执行函数Ext.extend返回一个新的类，这个类的名称就是新的变量名。如下例：

MyExtension = Ext.extend(Ext.Panel, {//Ext.Panel作为父类

    /* 对象的新属性、新方法 */

    /* 一般都要重写initComponent方法，以覆盖父类的该方法*/

    initComponent:function() {

        // 在调用父类之前，编写你的代码

 //your code...

        /*

        var config = {

        };

 

        // apply config

        Ext.apply(this, config);

        Ext.apply(this.initialConfig, config);

        */

        // call parent

        AnExtension.superclass.initComponent.apply(this, arguments);

 

        // after parent code here, e.g. install event handlers

 

    }

    ,onRender:function() {//添加方法或覆盖父类方法

 

        // before parent code

 

        // call parent

        AnExtension.superclass.onRender.apply(this, arguments);

 

        // after parent code, e.g. install event handlers on rendered components

 

    } // eo function onRender

});

你也可以将自己的扩展类注册一个xtype名

// register xtype

Ext.reg('myextension', MyExtension);

接着，我们需要实例化对象：

var myExtension = new MyExtension({/* 可选的配置项 */});

 

插件

Ext 2.0 插件必须实现init方法，另外可以包含任意增加的方法和（或）覆盖组件方法。组件的所有插件的inint方法在紧接着组件的initComponent方法之后被调用。插件所在的组件对象作为插件的init方法的参数，inint方法运行在这个插件的一个实例上下文中。

举一个例子，说明如何创建插件：

MyPlugin = function(config) {

    Ext.apply(this, config);

};

然后使用插件：

var myPanel = new Ext.Panel({

     plugins:[new MyPlugin()] //myPanel将作为MyPlugin实例的init方法的参数

    ,// 其他myPanel的配置项

});

 

扩展和插件代码的比较

重写EditorGrid组件的onEditComplete方法，同样的功能使用两不种方式实现

扩展示例代码：

//扩展EditorGrid组件

Ext.ux.MyEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{

  initComponent: function(){

   Ext.ux.TableEditorGridPanel.superclass.initComponent.call(this);

  },

     onEditComplete : function(ed, value, startValue){//覆盖父类的onEditComplete方法

                //比较此处插件方式实现的代码

         this.editing = false;

         this.activeEditor = null;

                //。。。其他代码省略

     }

});

Ext.reg('myeditorgrid',Ext.ux.MyEditorGridPanel);

 

插件示例代码：

Ext.ux.plugins.MyEditorGridPlugin = function(config) {

    Ext.apply(this, config);

};

Ext.extend(Ext.ux.plugins.MyEditorGridPlugin, Ext.util.Observable, {

    init:function(grid) {//被设置插件的组件对象作为插件的init方法的参数

 Ext.apply(grid, {

     onEditComplete : function(ed, value, startValue){//覆盖父类的onEditComplete方法

                //比较此处扩展方式实现的代码

         grid.editing = false;

         grid.activeEditor = null;

                //。。。其他代码省略

         }

 });

    }

});

 

另外一个例子，为Ext.form.TextArea组件增加一个setReadonly方法：

Ext.ux.plugins.TextAreaPlugin = function(config) {

    Ext.apply(this, config);

};

Ext.extend(Ext.ux.plugins.TextAreaPlugin,Ext.util.Observable,{

 init: function(textarea){

  Ext.apply(textarea,{

   setReadonly: function(readonly,styles){

    textarea.readOnly = readonly;

    textarea.getEl().dom.readOnly=readonly;

    if(styles){

     textarea.getEl().applyStyles(styles);

    }

   }

  });

 }

});

调用插件：

var textarea1= new Ext.form.TextArea(

{

value:'test',

width:138,

height:62,

allowBlank:false,

y:68,

readOnly:true,

x:108,

plugins:[new Ext.ux.plugins.TextAreaPlugin()],

id:'textarea1'}

);

用扩展还是用插件

无论写扩展还是写插件都可以达到相同的效果。总得来说，小一点的功能写成插件，复杂一点的可以写成扩展。插件可以轻松地从组件上移除，扩展就和程序联系很紧密。

另外要注意一点：插件只能用在组件上，即从Ext.Component继承下来的类。