Extjs custom components

A new JS file // javascriptjavasentext. namespace (& amp; #39; CRM. panels & amp; #39;); CRM. panels. userDetailExt. extend (Ext. panel, {width: 350, height: 120, data: {ID: 0, FirstName: & am

A new JS File

 

// JavaScript Document
Ext. namespace ('crm. panels ');
CRM. Panels. UserDetail = Ext. extend (Ext. Panel ,{
Width: 350,
Height: 120,
Data :{
ID: 0,
FirstName :'',
LastName :'',
Email :'',
City :'',
Phone :''
},
Split: true,
Tpl: new Ext. XTemplate ([
'No.: {ID }',
'Name: {FirstName}-{LastName }',
'Phone: {Phone }',
'City: {City }',
'Email: {Email }'
]),
InitComponent: function (){
CRM. Panels. UserDetail. superclass. initComponent. call (this );
If (typeof this. tpl === 'string '){
This. tpl = new Ext. XTemplate (this. tpl );
}
This. addEvents ('ualert '); // register a new event
This. addListener ({// listener function www.2cto.com
UAlert: {// newly registered event
Fn: this. onAlert, // call the onAlert Method
Scope: this
}
});
},
//////////////
OnAlert: function (){
Alert ('registered new event ');
},
UAlert: function (){
This. fireEvent ('ualert ');
},
/////////////////////
OnRender: function (ct, position ){
CRM. Panels. UserDetail. superclass. onRender. call (this, ct, position );
If (this. data ){
This. update (this. data );
}
},
Update: function (data ){
This. data = data;
This. tpl. overwrite (this. body, this. data );
// This. fireEvent ('update', this. data );
}
});

// Register the newly created custom component as an xtype
Ext. reg ('userdetail', CRM. Panels. UserDetail );
/* Usage:
Items :[
{
Region: 'west ',
Xtype: 'userdetail ',
Data: userData [0],
Title: 'user detail'
}
] */

 

On the page: