Render Ext.application in a div

Question

I am trying to run an ExtJS4 Ext.application inside our existing website template. We have a div #content, into which I want to place the application for development. How do I render the application into this area, rather than replacing the existing html page?

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
       //   renderTo: Ext.Element.get('#content')  doesn't work
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Answer 1

You need to use other container than a Ext.container.Viewport. By definfiton Ext.container.Viewport will always take the entire browser window.

From documentation:

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

Just use Ext.panel.Panel instead

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout: 'fit',
            renderTo: Ext.get('content')
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});