Rendering ExtJS 4+ MVC application in a html div - how-to?

Question

All examples that I have found so far explain how to render ExtJS (4.2) MVC application within the \"viewport\", which in other words means full browser screen, and occupying wh

Answer 1

I liked Evan Trimboli's concise approach but I could not get it to work either (it also told me that MyContainer is not defined). However this approach worked...

launch: function () {    
    Ext.create('widget.MyContainer', {
        renderTo: 'MyDiv'
    });
}

...where 'widget.MyContainer' is the alias created inside the view itself, and provided I also did this up top:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',

    name: 'MyApp',

    views: [
        'MyApp.view.MyContainer'
    ],
...

Answer 2

Have you tried using Ext.panel.Panel or Ext.window.Window as a container?

<div id="appBox">
<script type="text/javascript">  

Ext.require('Ext.panel.Panel');
        Ext.onReady(function(){

            Ext.create('Ext.panel.Panel', {
                renderTo: Ext.getBody(),
                width: 400,
                height: 300,
                title: 'Container Panel',
                items: [
                    {
                        xtype: 'panel',
                        title: 'Child Panel 1',
                        height: 100,
                        width: '75%'
                    },
                    {
                        xtype: 'panel',
                        title: 'Child Panel 2',
                        height: 100,
                        width: '75%'
                    }
                ]
            });


        })

    </script>
</div>

Answer 3

In some of these answers, some suggest using an Ext.Panel with a renderTo. You shouldn't be using an Ext.Panel if you're not going to be utilizing it for anything other than a container if you're going to go this route. You should be using Ext.container.Container instead.

By using Ext.Panel you are adding a bunch of unnecessary things like the title bar and such to your component. Each one of these puts extra place holders there even if you aren't using them.

Answer 4

A viewport is just a specialized Ext.container.Container that auto sizes to the the document body.

As such, you can easily create your own in the launch method:

launch: function(){
    new MyContainer({
        renderTo: 'myDiv'
    });
}