17

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.'
                }
            ]
        });
    }
});
Mchl
  • 61,444
  • 9
  • 118
  • 120
user2170010
  • 185
  • 1
  • 8

1 Answers1

16

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.'
                }
            ]
        });
    }
});
Mchl
  • 61,444
  • 9
  • 118
  • 120
  • Just replace `Ext.container.Viewport` with `Ext.panel.Panel` and uncomment the `renderTo` config option. And it's `Ext.get('content')` – Mchl Mar 15 '13 at 16:58
  • It's not #content, that's what I needed. Thanks! – user2170010 Mar 15 '13 at 17:12
  • Hit the checkmark next to his answer to mark this question answered please, thanks! – Reimius Mar 15 '13 at 18:17
  • @Mchl it's been a while but, I was in the same exact situation and your answer helped set the application inside a custom div but could you tell me which layout to use, because when I make the switch from `Ext.Viewport` to `Ext.panel.Panel` it does not show properly. I need it to act like the viewport did, taking all the available space all the way down to the bottom of the page's viewport, thanx – Scaramouche Jan 18 '18 at 15:47