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.'
}
]
});
}
});
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.'
}
]
});
}
});