Ext.extend()

When you program you own component in extjs you use Ext.extend() (verison Ext 3) or Ext.define() (verison Ext 4).

I will showing you "how to" in Ext 3.

When extending you use already known component like Ext.Panel and add you own properties, functions, events and you can also override the existing properties, functions.
MyCMP.atributePanel = Ext.extend(Ext.Panel, {
  myDefaultProp:'..',
  myDefaultValue:'..',
  
  constructor : function(config){
   /**
   * Constructor is always required. 
   * If you don't create a constructor Ext will create one for you! 
   * Using initComponent just so that Ext will create a constructor
   * for you is hardly an advantage.
   **/
   MyCMP.atributePanel.superclass.constructor.call(this, config);
  },
  
  initComponent: function(){
  /**
  * Called during component initialization
  **/
  /**
  * Config object has already been applied to 'this' so properties 
  * can be overriden here or new properties
  */
  Ext.apply(this, {myDefaultProp: 'atribute'});
  
  
  /* Call parent (required)*/
 MyCMP.atributePanel.superclass.initComponent.apply(this, arguments);
  /**
 * you can also add you own events, like this
 **/
  this.addEvents('errorloadConfig');
  },
  // Override other inherited methods 
 onRender: function(){
 
 // Before parent code
 
 // Call parent (required)
 MyCMP.atributePanel.superclass.onRender.apply(this, arguments);
 
 },
 loadConfig:function(){
 /*
 raise you own event
 */
 this.fireEvent('errorloadConfig', this);
 },
 });
Ext.reg('my-atributePanel', MyCMP.atributePanel);

And this is how you call you own component:

var mysecondpanel = new MyCMP.atributePanel({
    title: 'MyCMP atributePanel'
});

In the end you will ask why to extend component, when you can to easily write call component in javascript,
because it's object oriented programming, write less and code will do more, you will develop you own framework, where you can easily reused code...etc

There are some good tutorials on sencha site, so you may want to check them:
http://www.sencha.com/learn/legacy/Tutorial:Extending_Ext_for_Newbies
http://www.sencha.com/learn/legacy/Manual:Component:Extending_Ext_Components
http://www.sencha.com/learn/legacy/Tutorial:Extending_Ext_Class
and examples :
http://extjs.eu/

Comments

Popular Posts