在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繼承下來的類。