Entire app in a div

**redmagic** · 17 Jan 2012 3:32 AM

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?

Code:

<body>
<div id="hi-wrapper">
App should render here
</div>
</body>

Many thanks,

Arjen

mitchellsimoens

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.

**mitchellsimoens** · 17 Jan 2012 6:53 AM

Have you inspected the DOM? Has the Ext.Viewport covered everything?

**redmagic** · 17 Jan 2012 7:16 AM

Hi,

The DOM looks like this:

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>

It is generated by:

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

**mitchellsimoens** · 17 Jan 2012 7:33 AM

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.

**redmagic** · 17 Jan 2012 8:03 AM

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.

**mitchellsimoens** · 17 Jan 2012 8:10 AM

Ext.get isn't deprecated. Ext.Viewport will always be created.

Entire app in a div

Thread Tools

Search Thread

Display

Answered: Entire app in a div

Answered: Entire app in a div