ExtJS How to override onRender so that I can get correct component?

Question

I'm trying to get the size of a div that rendered as a component.

Ext.define('EDS.view.selector.Container', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.selectorcontainer',

    layout: 'fit',

    initComponent: function(){

        this.items = [
                {
                    xtype: 'tabpanel',
                    defaults: {
                        bodyPadding: 10
                    },
                    layout: 'fit',
                    items:[
                         {
                             title: 'Organization',
                             id: 'selector-organization',
                             tag: 'div',                             
                             html: 'div here',
                             height: '100%',

                            onRender: function(){

                                //// Render D3
                                // Selector
                                console.log("onRender");
                                console.log(this.height);
                                console.log(this.width);

                                var divId = Ext.getCmp('selector-organization').id + "-body";
                                var divHeight = Ext.get(divId).getHeight();
                                var divWidth = Ext.get(divId).getWidth();
                                console.log(divHeight);
                                console.log(divWidth);
                                renderSelectorOrgView(divId, divHeight, divWidth);   

                                this.callParent();
                             },
......
......

And this onRender function interrupts the normal render process. The whole layout got corrupted and the div (#selector-organization-body) is very small. So I'm wondering if I was overriding the onRender in a wrong way.

Answer 1

Indeed, that's broken. The problem is that callParent and such methods are only available for methods that have been passed through Ext.define.

You can emulate callParent yourself by calling the parent method with the current scope and arguments. In your case, replace this.callParent() (which is missing the arguments, by the way) with this line:

Ext.panel.Panel.prototype.onRender.apply(this, arguments);

Answer 2

If you want to override the onRender function on all Panels do this:

Ext.override(Ext.tab.Panel, {
    onRender: function() {
        this.callParent();

        console.log('do something');
    }
});