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..!!

score 22 · Answer 1 · answered Aug 30 '11 at 09:32

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
}

The example could be even more explanatory if it actually used the custom config you defined. — Muxecoid, Aug 08 '12 at 07:51
Thanks for callParent in constructor, it solved my problems! It isnt included in oficial docu. Docu says, only initConfig is sufficient... — ArcanisCz, Oct 29 '14 at 07:59

score 7 · Answer 2 · answered Jul 13 '11 at 05:56

7

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

now you can use xtype:'mygrid'

answered Jul 13 '11 at 05:56

Kunal

984
4
14
33

score 6 · Answer 3 · edited Aug 07 '13 at 00:27

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

score 5 · Answer 4 · answered Jul 08 '11 at 01:01

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

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

4 Answers4