Printable View
Hi,
I would like to wrap the touch application in a div but can't seem to get it working. I've tried autoCreateViewPort set to false and specify renderTo on my outmost component. Can't pull it off.
Would anyone like to post a snippet to get me started?
Many thanks,Code:<body>
<div id="hi-wrapper">
App should render here
</div>
</body>
Arjen
Have you inspected the DOM? Has the Ext.Viewport covered everything?
Hi,
The DOM looks like this:
It is generated by:Code:<body id="ext-element-3" style="width: 100% !important; height: 100% !important; " class="x-desktop x-macos x-landscape">
<div id="hi-wrapper">
</div>
<div class="x-container" id="ext-viewport" style="width: 100% !important; height: 100% !important; ">
(inner elements removed for clarity)
</div>
</body>
Code:Ext.Loader.setConfig({ enabled: true });
Ext.require('SBB.view.NavGrid');
Ext.application({
name: 'SBB',
appPath: 'app',
autoCreateViewPort: false,
initialize: function () {
this.callParent();
},
launch: function() {
var grid = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'vbox',
renderTo: Ext.Element.get('#hi-wrapper'),
items: [
{
dock: 'top',
height:169,
layout:'hbox',
items: [
{
cls:'logo',
width:213
},{
id:'companion-image',
flex:1,
html:'<img src="images/ZW-Drenthe.jpg" />'
}
]
},
{
dock: 'top',
height:100,
html: '<h1>Veen to Lauwersmeer</h1>',
cls:'locationitem'
},
{xtype:'navgrid'},
{
dock:'bottom',
height:100
}
]
});
}
});
Since you have fullscreen to true, it will be added to the Ext.Viewport class and not to your div. If you use renderTo you will need to handle the sizing.
Thanks for that.
There were more things wrong, the spelling of autoCreateViewport should be lowercase 'port' according to the docs. Also, in the renderTo I had to use a document.getElementById since Ext.Element.get is probably deprecated.
Anyway I got it working, but i noticed that beneath my div hosting the app a viewport was still being generated. I will postpone this part of the app and look in to it another time.
Ext.get isn't deprecated. Ext.Viewport will always be created.