(Página creada 2008/05/19; movida a esta ubicación 2009/05/06.)

Experimentos diversos.

Queremos crear un componente de manera tal que algunas de sus características dependan de las opciones de configuración pasadas al constructor. Por ejemplo, queremos que el title de un panel se arme en base al valor de un parámetro type, y que el panel contenga subpaneles también afectados por el valor de type:

Ext.getBody().update("");
MyPanel = Ext.extend(Ext.Panel, {
  title: 'My Panel',
  width: 360,
  height: 180,
  bodyStyle: 'padding: 1em',
  //html: {children: [{tag: 'i', html: 'Hello'}]},
 
  // modify or add some config parameters
  initComponent: function(){
    this.title = this.title + " of type " + this.type;
    //this.html.children = this.html.children.concat([{tag: 'br'}, {tag: 'b', html: 'Goodbye'}]);
    this.items = [{title: 'A subpanel of type ' + this.type, width: 280, height: 100}];
    MyPanel.superclass.initComponent.call(this); // note: must come *after* this.items
  }
});
new MyPanel({
  renderTo: document.body,
  type: 'SomeType'
})
new MyPanel({
  renderTo: document.body,
  type: 'SomeOtherType'
})

Para más detalles, ver: Tutorial: Extending Ext 2 Class y Extending Ext Components.

extjs