Question

我有一个像这样的ExtJS网格：

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

我希望能够重新使用这个网格，这样我就可以拥有它的多个实例，它们都是独立运作的。唯一的方法是使用Ext.extend，还是有另一种方式？我真的不需要扩展它，我只需要能够创建它的多个实例。

Answer 1

如果你真的需要两个网格实例，那么就像Upper Stage所说的那样创建另一个网格实例。

如果需要在多个网格之间共享配置，可以将配置保存为单独的JS对象，然后在每次创建时将其传递给网格构造函数。

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

如果要在应用程序或多个应用程序中重复使用特定配置的网格，那么子类可能是最好的方法。

This tutorial回顾了几种不同的重用功能方法，这将是您决定最适合您需求的方法的好起点（如果您需要超出两个基本实例的东西）。

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所建议的那样，可能只是为您解决问题。

如何在ExtJS中重用组件？

4 个答案: