如何在ExtJS中重复使用组件？

Question

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

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

我希望能够重复使用这个网格，以便我可以有多个独立的实例。唯一的方法是使用 Ext.extend 吗？还是有其他方法？我不需要扩展它，我只需要创建它的多个实例。

- Daniel T.

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 */ }));

如果您打算在应用程序中或多个应用程序中重复使用具有特定配置的网格，则子类可能是最佳选择。

本教程 介绍了几种不同的重用功能的方法，这将是您决定哪种方法最适合您的需求（如果您需要超出两个基本实例的内容）的好起点。

- Brian Moeskau

---

有时我会这样做。先定义配置，然后重复使用它来创建多个对象。 - Jonathan Julian

谢谢，我已经自己找到了教程来回答我的问题，但是你在这里也提供了链接。 - Daniel T.

Answer 2

你能简单地实例化新对象吗？

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

- Upperstage

Answer 3

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建议的那样，这可能对您有所帮助。

- Igor Zevaka

Answer 4

Ext.Component#cloneConfig()这个方法可能可以吗？

- Steve Skrla