Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ExtJS 4: What is the Proper Way to Perform Inheritance

My code:

Ext.onReady(function() { // Every property is declared inside the class
Ext.define('MyCustomPanel1', {
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel1',
    title: 'I am a custom Panel 1',
    html: 'This is the content of my custom panel 1',
    renderTo: Ext.getBody()
});    


Ext.define('MyCustomPanel2', { // HTML is declared inside the class, title inside the config, constructor overridden
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel2',
    renderTo: Ext.getBody(),        
    html: 'This is the content of my custom panel 2',        
    config: {
        title: 'I am a custom Panel 2'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config)
    }
});        


Ext.define('MyCustomPanel3', { // Title and HTML declared inside config, constructor overridden
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel3',
    renderTo: Ext.getBody(),        
    config: {
        title: 'I am a custom Panel 3',
        html: 'This is the content of my custom panel 3'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config)
    }
});

Ext.define('MyCustomPanel4', { // title and html inside of initComponent, title override in instance declaration doesn't hold. HTML property is empty on render
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel4',
    renderTo: Ext.getBody(),        
    initComponent: function(config) {
        Ext.apply(this, {
            title: 'I am a custom Panel 4',
            html: 'This is the content of my custom panel 4'                
        })
        this.callParent(arguments);
    }
});            
Ext.define('MyCustomPanel5', { // title declared inside config, html set inside of initComponent. Both initComponent and constructor are used.
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel5',
    renderTo: Ext.getBody(),        
    config: {
        title: 'I am a custom Panel 5'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config);
    },
    initComponent: function(config) {
        Ext.apply(this, {
            html: 'This is the content of my custom panel 5'                
        })
        this.callParent(arguments);
    }
});                
Ext.create('MyCustomPanel1', {
    title: 'I am custom Panel 1 - Instance!',
    html: 'This is the content of my custom panel 1 - Instance!'
})
Ext.create('MyCustomPanel2', {
    title: 'I am custom Panel 2 - Instance!',
    html: 'This is the content of my custom panel 2 - Instance!'
})
Ext.create('MyCustomPanel3', {
    title: 'I am custom Panel 3 - Instance!',
    html: 'This is the content of my custom panel 3 - Instance!'
})
Ext.create('MyCustomPanel4', {
    title: 'I am custom Panel 4 - Instance!',
    html: 'This is the content of my custom panel 4 - Instance!'
})
Ext.create('MyCustomPanel5', {
    title: 'I am custom Panel 5 - Instance!',
    html: 'This is the content of my custom panel 5 - Instance!'
})

})

Results (via JSFiddle.net): http://jsfiddle.net/HtPtt/

Which of the above methods is the correct way to create an object by extending an existing object? What are the advantages and disadvantages of each? Where can I find further information on ExtJS 4 inheritance other than what is already here (http://docs.sencha.com/ext-js/4-0/#/guide/class_system)?

Thanks,

like image 317
Levi Hackwith Avatar asked Jul 02 '11 04:07

Levi Hackwith


People also ask

What function is used to extend from an existing object in ExtJS?

We can inherit a new class from existing class using extend keyword while defining a new class in Ext JS.

What is extend in ExtJS?

extend gives you a new class basing on existing one. Ext. override modifies existing class without creating a new one. It's not something specific to ExtJS. It's how JavaScript's prototype-based object model works.

What is a constructor in ExtJS?

A constructor is a special function that gets called when a Class is instantiated.


2 Answers

I asked this question on the Sencha forum and here's the answer I got from Saki:

Whether you use constructor or initComponent while extending depends on what you want to do. initComponent will run from the parent constructor anyway, but later, after some internal variable have already been initialized, so in some cases you want that, sometimes not.

In no case I would use renderTo in Ext.define because it causes the component to be rendered immediately after instantiation and that is not always what you want. Also, initConfig should come before parent call in constructors, otherwise it's useless as config has been already inited in the parent call.

You may also want to read "Writing a big..." in my signature. This document was written for a previous version of Ext so code examples do not apply anymore but principles are same.

like image 142
Levi Hackwith Avatar answered Oct 18 '22 09:10

Levi Hackwith


As per the things found by me at ExtJS 4 so far, following is the way in which I extend existing components (below is a sample component created on textfield).

I use the constructor approach and so far have not found any issues with it:

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

extend: 'Ext.form.field.Text',

alias: 'widget.pnctextfield',

config:{
    focusCls:'focusClassFieldPnC',
    fieldCls:'baseClassFieldPnC'
},

constructor:function(cfg){
    this.callParent(arguments);
    this.initConfig(cfg);
    this.on('beforerender',this.beforeRender);
},

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

Hope this proves to be of help.

like image 42
netemp Avatar answered Oct 18 '22 09:10

netemp