6

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.

  1. Source for this example is generated by ExtJS's CMD command that generates "application" framework skeleton.
  2. 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.
  3. "User" activity area is in "app" dir. App dir has subdirs for views, controllers, models and additional stuff.
  4. As in many other frameworks you are expected to keep folder structure so that framework can find appropriate files and initialise them.
  5. 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.

4

4 回答 4

3

视口只是一种Ext.container.Container自动调整文档正文大小的专用工具。

因此，您可以轻松地在启动方法中创建自己的：

launch: function(){
    new MyContainer({
        renderTo: 'myDiv'
    });
}
于 2013-05-22T00:48:32.650 回答
1

在其中一些答案中，有些人建议使用带有 renderTo 的 Ext.Panel。如果你打算走这条路，你不应该使用 Ext.Panel，如果你不打算将它用于容器以外的任何东西。您应该改用 Ext.container.Container 。

通过使用 Ext.Panel，您正在向组件中添加一堆不必要的东西，例如标题栏等。即使您不使用它们，它们中的每一个都会在那里放置额外的占位符。

于 2013-07-12T00:02:40.730 回答
1

我喜欢 Evan Trimboli 的简洁方法，但我也无法让它工作（它还告诉我 MyContainer 没有定义）。然而这种方法奏效了......

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

...在'widget.MyContainer'视图本身内部创建的别名在哪里，如果我也这样做了：

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

    name: 'MyApp',

    views: [
        'MyApp.view.MyContainer'
    ],
...
于 2014-06-17T22:47:35.740 回答
0

您是否尝试过使用 Ext.panel.Panel 或 Ext.window.Window 作为容器？

<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>
于 2013-06-25T12:18:49.323 回答