如何重用ExtJS中的組件？

Question

我有一個這樣的ExtJS網格：

var grid = new Ext.grid.GridPanel({
    ...
});

我希望能夠重新使用此網格，以便可以讓它具有多個獨立運行的實例。 做到這一點的唯一方法是使用Ext.extend ，還是還有另一種方法？ 我真的不需要擴展它，我只需要能夠創建它的多個實例。

Answer 1

如果您確實只需要兩個網格實例，則按照Upper Stage的說明再創建一個。

如果需要在多個網格之間共享配置，則可以將該配置另存為單獨的JS對象，然后在每次創建一個JS對象時將其傳遞給網格構造器。

var myCfg = { ... };
var grid1 = new Ext.GridPanel(Ext.apply(myCfg, { /* other options */ }));
var grid2 = new Ext.GridPanel(Ext.apply(myCfg, { /* other options */ }));

如果要在整個應用程序或多個應用程序中以特定配置重用網格，則子類可能是最好的選擇。

本教程回顧了幾種重用功能的方法， 這將是您決定哪種方法最適合您的需求（如果您需要兩個以上基本實例以外的方法）的一個很好的起點。

Answer 2

Ext.Component＃cloneConfig（）也許？

Answer 3

您可以簡單地實例化新對象嗎？

var anotherGrid = new Ext.grid.GridPanel({
    ...
});

Answer 4

Ext對子類化提供了不錯的支持。 這意味着您可以擴展標准網格並實例化：

Foo = {};
Foo.BarGrid = function(config) {
  Foo.BarGrid.superclass.constructor.call(this, config); //call the default grid constructor
}

Ext.extend(Foo.BarGrid, Ext.grid.GridPanel, {
  //grid config
});

var grid = new Foo.BarGrid({/*minimal config*/});

您甚至可以注冊自己的xtype並使用它代替new ：

Ext.reg('foobargrid', Foo.BarGrid);

var pane = new Ext.TabPanel({
  items: [{xtype: 'foobargrid'}]
});

編輯誤讀了問題。 由於您顯然了解Ext.extend共享配置，如bmoeskau所建議的那樣，可能就可以為您解決問題。