Question

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

This works fine, but I want to create multiple instances of box so that when I create multiple instances of form I don’t corrupt box, also I don’t want to use arrays. Please suggest a better approach to creating and managing multiple instances of an Ext.Component

Answer 1

Extending components is the key

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

}