ExtJs 4... How to extend Extjs 4 components?

Question

can somebody help me with how to extend extjs components using extjs version 4. I am looking for a proper syntax for the same. please help..!!

Answer 1

Following is an example code of extending textfield in ExtJS 4.

Other then using the existing configs and methods, this extended component also has a new config property created and a new method created & associated with an event.

The purpose of component is simple that it displays the label in red color if the value is mandatory, modifies the background color of the field if its readOnly and also changes the background color of the field when focussed.

The code is properly commented. Hope it helps.

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
}

Answer 2

Ext.define('myApp.Grid', {
        extend: 'Ext.Grid',
        alias: 'widget.mygrid'
        ....
        ....
        }

now you can use xtype:'mygrid'

Answer 3

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);
    }
});

Answer 4

why not see the src of extjs4's components such as Grid,Table ...

and here are docs:

http://docs.sencha.com/ext-js/4-0/#/guide/components <== important

http://docs.sencha.com/ext-js/4-0/#/guide/class_system

Ext.define('My.custom.Component', {
    extend: 'Ext.Component'
});