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

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

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'}), 
    ] 

} 

Answer 2

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

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

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

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

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

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