Question

到目前为止我找到的所有示例都解释了如何在“视口”中呈现ExtJS（4.2）MVC应用程序，换句话说，这意味着完整的浏览器屏幕，并占据整个HTML BODY。

我想在名为DIV的现有HTML页面中呈现应用程序，以便我可以围绕应用程序进行HTML设计。

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

我已经看到一些使用ExtJS 4示例的网站使用技巧通过使用IFRAME在页面内呈现ExtJS应用程序。

是否可以避免使用IFRAME？而且，如果是的话，ExtJS 4.2应用程序的骨架如果将在div中呈现则应该如何。

注意：在ExtJS 3中，我通过创建一个面板作为主容器找到了解决方案，该面板在命名div中呈现。但是，版本4.2（以及可能更早的4.x版）表明MVC应用程序方法似乎远远优越。

----编辑

我意识到我必须为这个问题提出起点。

此示例的源由ExtJS的CMD命令生成，该命令生成“应用程序”框架骨架。
应用程序的骨架由许多文件组成，包括引擎引用和其他引用，所以我不能在这里包含“application”目录/文件夹中的所有源代码。应用程序的骨架可以通过以下方式使用cmd来完成：sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp这将生成文件和文件夹，并在该位置复制所有必需的文件。
“用户”活动区域位于“app”目录中。 App dir有视图，控制器，模型和其他东西的子目录。
与许多其他框架一样，您需要保留文件夹结构，以便框架可以找到适当的文件并初始化它们。
文件列表：

index.html（在生成的应用程序的根目录中）

    <!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.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      
        }
    });

注意：最初没有启动功能，但是有自动生成视口（默认生成器有一个获取）

应用程序/控制器/ Main.js

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

应用程序/视图/ 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'
            }]
        }]
    });

这应该是屏幕上的初始布局（AFAIK）

最后：

应用程序/视图/ Main.js

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

，据我所知，应该是“内容”。

因为它生成了一个错误，即没有创建“Ext.view.appBoxView”以及它对我的看法，框架不会初始化应用程序。

Answer 1

视口只是一个专门的Ext.container.Container，可自动调整文档正文的大小。

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

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

Answer 2

您需要使用除Ext.container.Viewport之外的其他容器。通过definfiton Ext.container.Viewport将始终占据整个浏览器窗口。

来自文档：

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

只需使用Ext.panel.Panel代替

参考下面的样本。

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout: 'fit',
            renderTo: Ext.get('content')
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

另请参阅以下链接

http://www.sencha.com/forum/showthread.php?141964-Render-an-ExtJs-4-application-in-a-div http://css.dzone.com/articles/height-problem-when-rendering

Answer 3

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

通过使用Ext.Panel，您可以向组件中添加一些不必要的内容，例如标题栏等。即使你没有使用它们，每一个都会在那里放置额外的占位符。

Answer 4

我喜欢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'
    ],
...

Answer 5

您是否尝试过使用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>

在html div中渲染ExtJS 4+ MVC应用程序 - 操作方法？

5 个答案: