extjs 3.x несколько экземпляров

Question

// Using extjs 3.x  
var box = new Ext.Textfield { /* textField configuration */ }; 
var form = new Ext.FormPanel{
    /* formPanel configuration */
    items:[box]
}

Это прекрасно работает, но я хочу создать несколько экземпляров box, чтобы при создании нескольких экземпляров form я не повредил box, а также я не хотел использовать массивы. Пожалуйста, предложите лучший подход к созданию и управлению несколькими экземплярами Ext.Component

Answer 1

@ Mchl's answer - это хороший подход для создания повторно используемых компонентов, особенно когда вам нужно переопределить или добавить новое поведение к существующему. Если вам просто нужно повторно использовать некоторые настройки конфигурации и ничего более, вы также можете сделать что-то попроще:

cfg = {
   xtype: 'textfield',
   width: 100,
   maxLength: 10
}

new Ext.FormPanel({
    items: [cfg, cfg]
});

Если вам нужно добавить специфичные для экземпляра поля конфигурации (например, id), вы можете просто передать свои уникальные значения и добавить к ним cfg по умолчанию (applyIf не будет переопределять существующие свойства, оно только добавит свойства):

new Ext.FormPanel({
    items: [
        Ext.applyIf({id:'foo'}, cfg),
        Ext.applyIf({id:'bar'}, cfg)
    ]
});

Одна вещь, которую я бы добавил к ответу @ Mchl, заключается в том, что если вы собираетесь создать собственный класс, убедитесь, что вы задали ему собственный тип xtype. Таким образом, вы все равно можете использовать возможности отложенного создания экземпляров Ext даже с вашими собственными компонентами, вместо того, чтобы создавать экземпляры всего во время инициализации.

Answer 2

Расширение компонентов является ключом

var MyBoxClass = Ext.extend(Ext.form.TextField,{
  /* your config values */
  width: ...

  /* this is important, see bmoeskau's comment below*/
  initComponent: function() {
    BoxClass.superclass.initComponent.call(this);
  }
});


var form = new Ext.FormPanel{

  items: [
    new MyBoxClass({fieldLabel: 'first box'}),
    new MyBoxClass({fieldLabel: 'second box'}),
    new MyBoxClass({fieldLabel: 'third box'}),
  ]

}