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