Customize components in extjs and expose events to callers

/* *
* @ Example Image
*
* A component subclass that adds a value to an image
  */
Ext. Require ('ext. Panel. Panel ');

Ext. Define ('ext. UX. image ',{
Extend: 'ext. Component ',//Subclass Ext. Component
Alias: 'widget. managedimage ',//This component will have an xtype of 'managedimage'
Autoel :{
Tag: 'img ',
SRC: Ext. blank_image_url,
CLS: 'My-managed-image'
},

// Add custom processing to the onrender phase.
// Add a 'load' listener to the element.
Onrender: Function (){
This . Autoel = ext. Apply ({}, This . Initialconfig, This . Autoel );
This . Callparent (arguments );
This . El. On ('load ', This . Onload, This ), // Load is not an IMG event
This . El. On ('click ', This . Onclick,This );
},

Onload:Function(){
This. Fireevent ('load ',This);
},

Onclick:Function(){
This. Fireevent ('click ',This);
},

Setsrc: Function (SRC ){
If ( This . Rendered ){
This . El. Dom. src = SRC; // El is an instance of the Ext. Element class and should point to the root node of the extjs component.
} Else {
This . Src = SRC;
}
},

Getsrc:Function(SRC ){
Return This. El. Dom. SRC |This. SRC;
}
});

Ext. onready (Function(){

VaRImage = ext. Create ('ext. UX. image ');

Ext. Create ('ext. Panel. Panel ',{
Title: 'image panel ',
Height: 200,
Renderto: Ext. getbody (),
Items: [Image]
})

Image. On ('load ',Function(){
Console. Log ('image loaded: ', image. getsrc ());
});

Image. On ('click ',Function(){
Alert ('click ');
});

Image. setsrc ('HTTP: // www.sencha.com/img/sencha-large.png ');

});