How to neatly put a ThreeJS renderer in a window?

Hi,

I am trying to put a WebGL renderer in a Ext JS window. I am using Ext JS 4.2 and ThreeJS r68. This is one of the few ways I can get it working;

Code:

Ext.define('TestWindow', {    extend: 'Ext.window.Window',
    title: 'Test',

    width: 400,
    height: 300,
    modal: true,

    listeners: {
        render: function () {
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(300, 200);

            this.body.first().first().appendChild(renderer.domElement);
        }
    }
});

The first().first() chain is needed to get into the innerCt element. I'd rather append directly to the window body but that seems to cause layout issues. This is probably not the way to go, can anyone point me in the right direction? The resize event could help me get the renderer up to size, but how would I go about finding the 'inner' window size available for the renderer?

Thanks!

How to neatly put a ThreeJS renderer in a window?