ExtJs 4... Comment étendre Extjs 4 composants?

Qui suit est un exemple de code de l'extension de la textfield dans ExtJS 4.

Puis d'autres à l'aide de l'existant configs et des méthodes, ce composant étendu a aussi une nouvelle config bien créé et une nouvelle méthode créée & associés à un événement.

L'objectif de la composante est simple, il affiche l'étiquette de couleur rouge si la valeur est obligatoire, modifie la couleur de fond du champ, si sa readOnly et modifie également la couleur de fond du champ lors de la concentration.

Le code est bien commenté. Espérons que cela aide.

Ext.define('Ext.pnc.Textfield', {

extend: 'Ext.form.field.Text',//Extending the TextField

alias: 'widget.pnctextfield',//Defining the xtype

config:{
    focusCls:'focusClassFieldPnC',//Providing value for existing config property.
    testConfig:'testConfigValue'//Creating a new config. Accessor functions will be created for this one by ExtJS engine
},

constructor:function(cnfg){
    this.callParent(arguments);//Calling the parent class constructor
    this.initConfig(cnfg);//Initializing the component
    this.on('beforerender',this.beforeRender);//Associating a new defined method with an event
},

//Defining a method below and associating this with an event in the constructor above
beforeRender:function(){

    if(!this.allowBlank){
        this.labelStyle =   'color:#FF0000';        
    }

    if(this.readOnly){
        this.fieldCls   =   'readOnlyClass';
    }
},

//Over-riding a function which already exists in parent class. Note that this has not been associated with any event in constructor as it already defined in parent class
afterRender:function(){
    console.log('after render function');
    this.callParent();//Calling the parent class method. This can be omitted if not     required and is not a must
}
});

.readOnlyClass{
background:#FF0000 !important
}


.focusClassFieldPnC{
background:#00ff00 !important
}

Ext.define('BS.view.MyGrid' , {
    extend: 'Ext.grid.Panel',
    alias: 'widget.my-grid',

    //Non-complex config types (booleans, integers, strings) go here
    width: 1000,
    autoHeight: true

    initComponent: function() {
        Ext.apply(this, {
            //complex configs (objects /arrays) go here
            columns: colModel,  
        });

        this.callParent(arguments);
    }
});