<p>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 whole HTML BODY.</p> <p>I would like to render application within the existing HTML page within named DIV, so that I can have HTML design around the application.</p> <pre class="prettyprint"><code> <div id="appdiv"></div> </code></pre> <p>I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME. </p> <p>Is it possible to avoid IFRAME? And, if it is, how skeleton of ExtJS 4.2 application shall look like if it will be rendered within a div. </p> <p>Notes: In ExtJS 3 I have found the solution by creating a panel as main container which renders within named div. However, version 4.2 (and possibly earlier 4.x's) suggests MVC application approach that seem far superior.</p> <p>---- Edits</p> <p>I have realised that I have to put starting points for this question.</p> <ol> <li>Source for this example is generated by ExtJS's CMD command that generates "application" framework skeleton.</li> <li>Skeleton of application is consisted of many files including engine reference, and other references, so I would not be able to include here all sources in "application" dir/folder. Skeleton of application can be done using cmd in the fashion: <code>sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp</code> This generates files and folders and copies all necessary files in the place.</li> <li>"User" activity area is in "app" dir. App dir has subdirs for views, controllers, models and additional stuff. </li> <li>As in many other frameworks you are expected to keep folder structure so that framework can find appropriate files and initialise them.</li> <li>list of files:</li> </ol> <p>index.html (in the root of the generated application)</p> <pre class="prettyprint"><code> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>ExtGenApp</title>   <link rel="stylesheet" href="bootstrap.css"> <script src="ext/ext-dev.js"></script> <script src="bootstrap.js"></script>  <script src="app/app.js"></script>  </head> <body> <h1>HTML Before</h1> <div id="appBox"></div> <h1>HTML After</h1> </body> </html> </code></pre> <p>app/app.js</p> <pre class="prettyprint"><code> /* This file is generated and updated by Sencha Cmd. You can edit this file as needed for your application, but these edits will have to be merged by Sencha Cmd when it performs code generation tasks such as generating new models, controllers or views and when running "sencha app upgrade". Ideally changes to this file would be limited and most work would be done in other places (such as Controllers). If Sencha Cmd cannot merge your changes and its generated code, it will produce a "merge conflict" that you will need to resolve manually. */ // DO NOT DELETE - this directive is required for Sencha Cmd packages to work. //@require @packageOverrides Ext.application({ name: 'ExtGenApp', views: [ 'Main', 'appBoxView' ], controllers: [ 'Main' ], launch: function() { new Ext.view.appBoxView({ renderTo: 'appBox' });; // generates error } }); </code></pre> <p>note: originally there is no launch function but there is auto generate viewport (one gets that by default generator)</p> <p>app/controller/Main.js</p> <pre class="prettyprint"><code> Ext.define('ExtGenApp.controller.Main', { extend: 'Ext.app.Controller' }); </code></pre> <p>app/view/appBoxView.js</p> <pre class="prettyprint"><code> Ext.define('ExtGenApp.view.appBoxView', { extend: 'Ext.panel.Panel', requires:[ 'Ext.tab.Panel', 'Ext.layout.container.Border' ], layout: { type: 'border' }, items: [{ region: 'west', xtype: 'panel', title: 'west', width: 150 },{ region: 'center', xtype: 'tabpanel', items:[{ title: 'Center Tab 1' }] }] }); </code></pre> <p>this shall be initial layout on the screen (AFAIK) </p> <p>and finally:</p> <p>app/view/Main.js</p> <pre class="prettyprint"><code> Ext.define("ExtGenApp.view.Main", { extend: 'Ext.Component', html: 'Hello, World!!' }); </code></pre> <p>which shall, as I understood, be the "content".</p> <p>as is, it generates an error of not founding "Ext.view.appBoxView" and how it looks to me, framework do not initialise the application.</p>

<p>A viewport is just a specialized <code>Ext.container.Container</code> that auto sizes to the the document body.</p> <p>As such, you can easily create your own in the launch method:</p> <pre class="prettyprint"><code>launch: function(){ new MyContainer({ renderTo: 'myDiv' }); } </code></pre>

Rendering ExtJS 4+ MVC application in a html div

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 whole HTML BODY.

I would like to render application within the existing HTML page within named DIV, so that I can have HTML design around the application.

 <div id="appdiv"><!-- application runs here --></div>

I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME.

Is it possible to avoid IFRAME? And, if it is, how skeleton of ExtJS 4.2 application shall look like if it will be rendered within a div.

Notes: In ExtJS 3 I have found the solution by creating a panel as main container which renders within named div. However, version 4.2 (and possibly earlier 4.x's) suggests MVC application approach that seem far superior.

---- Edits

I have realised that I have to put starting points for this question.

Source for this example is generated by ExtJS's CMD command that generates "application" framework skeleton.
Skeleton of application is consisted of many files including engine reference, and other references, so I would not be able to include here all sources in "application" dir/folder. Skeleton of application can be done using cmd in the fashion: sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp This generates files and folders and copies all necessary files in the place.
"User" activity area is in "app" dir. App dir has subdirs for views, controllers, models and additional stuff.
As in many other frameworks you are expected to keep folder structure so that framework can find appropriate files and initialise them.
list of files:

index.html (in the root of the generated application)

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>ExtGenApp</title>
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app/app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body>
        <h1>HTML Before</h1>
        <div id="appBox"></div>
        <h1>HTML After</h1>
    </body>
    </html>

app/app.js

    /*
        This file is generated and updated by Sencha Cmd. You can edit this file as
        needed for your application, but these edits will have to be merged by
        Sencha Cmd when it performs code generation tasks such as generating new
        models, controllers or views and when running "sencha app upgrade".

        Ideally changes to this file would be limited and most work would be done
        in other places (such as Controllers). If Sencha Cmd cannot merge your
        changes and its generated code, it will produce a "merge conflict" that you
        will need to resolve manually.
    */

    // DO NOT DELETE - this directive is required for Sencha Cmd packages to work.
    //@require @packageOverrides



    Ext.application({
        name: 'ExtGenApp',

        views: [
            'Main',
            'appBoxView'
        ],

        controllers: [
            'Main'
        ],

        launch: function() {
            new Ext.view.appBoxView({
                renderTo: 'appBox'
            });;  // generates error      
        }
    });

note: originally there is no launch function but there is auto generate viewport (one gets that by default generator)

app/controller/Main.js

    Ext.define('ExtGenApp.controller.Main', {
        extend: 'Ext.app.Controller'
    });

app/view/appBoxView.js

    Ext.define('ExtGenApp.view.appBoxView', {
        extend: 'Ext.panel.Panel',

        requires:[
            'Ext.tab.Panel',
            'Ext.layout.container.Border'
        ],

        layout: {
            type: 'border'
        },

        items: [{
            region: 'west',
            xtype: 'panel',
            title: 'west',
            width: 150
        },{
            region: 'center',
            xtype: 'tabpanel',
            items:[{
                title: 'Center Tab 1'
            }]
        }]
    });

this shall be initial layout on the screen (AFAIK)

and finally:

app/view/Main.js

    Ext.define("ExtGenApp.view.Main", {
        extend: 'Ext.Component',
        html: 'Hello, World!!'
    });

which shall, as I understood, be the "content".

as is, it generates an error of not founding "Ext.view.appBoxView" and how it looks to me, framework do not initialise the application.

Is ExtJS single page application?

Ext JS by Sencha is becoming the ExtJS is a rich, compelling and intuitive open source framework best suited for building single page applications. It offers very rich set of UI components and thus giving a tough competition to other JavaScript frameworks like AngularJS or ReactJS.

What is the use of ExtJS?

Ext JS is a popular JavaScript framework which provides rich UI for building web applications with cross-browser functionality. Ext JS is basically used for creating desktop applications. It supports all the modern browsers such as IE6+, FF, Chrome, Safari 6+, Opera 12+, etc.

What is requires ExtJS?

You can look at requires as a way to tell ExtJS: "When you construct an object of this class, please make sure to dynamically load the required scripts first".

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

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

Tags:

javascript

extjs

extjs4

extjs-mvc

extjs4.2

ljgww

People also ask

1 Answers

Evan Trimboli

Recent Activity

Donate For Us