Как повторно использовать компоненты в ExtJS?

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

Если вы собираетесь повторно использовать сетку с определенной конфигурацией в своем приложении или в нескольких приложениях, тогда подкласс может быть лучшим способом.

В этом учебном пособии рассматриваются несколько различных методов повторного использования функциональности и будет хорошей отправной точкой для того, чтобы вы решили, какой подход лучше всего соответствует вашим потребностям (если вам нужно что-то помимо двух основных примеров).

Answer 2

Можете ли вы просто создать новые объекты?

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

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 ing it:

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

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

РЕДАКТИРОВАТЬ Неправильный вопрос. Поскольку вы, очевидно, знаете, что Ext.extend совместное использование конфигурации, как предлагает bmoeskau, может помочь вам.

Answer 4

Ext.Component # cloneConfig () возможно?