Javascript 呈现extjs4+；html div中的MVC应用程序-如何操作？

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

我想在命名DIV中的现有HTML页面中呈现应用程序，这样我就可以对应用程序进行HTML设计

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

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

注意：最初并没有启动功能，但有自动生成视口（默认情况下会生成）

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

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

最后：

app/view/Main.js

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

据我所知，这将是“内容”

---

实际上，它会生成一个错误，即未创建“Ext.view.appBoxView”，并且在我看来，框架不会初始化应用程序。

视口只是一个专用的

Ext.container.container

，它会自动调整文档体的大小

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

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

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

---

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

Ext.require（“Ext.panel.panel”）；
Ext.onReady（函数（）{
Ext.create（'Ext.panel.panel'{
renderTo:Ext.getBody（），
宽度：400，
身高：300，
标题：“容器面板”，
项目：[
{
xtype:'面板'，
标题：“子面板1”，
身高：100，
宽度：“75%”
},
{
xtype:'面板'，
标题：“子面板2”，
身高：100，
宽度：“75%”
}
]
});
})

在其中一些答案中，有人建议使用带有渲染器的外部面板。如果您不打算将Ext.Panel用于除容器以外的任何其他用途，那么您不应该使用Ext.Panel，如果您打算走这条路线。您应该改用Ext.container.container

---

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

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

---

是的，这就是如何在ExtJS3中实现的。但extjs4mvc应用程序由视图和自动渲染视口组成。尝试了这个，它告诉我MyContainer没有定义，我如何将它引用到“视图”“？视口的自动渲染基本上与上面的操作完全相同。以与声明视口相同的方式声明自己的视图

MyApp.view.Container

。在视图中需要它，然后按照我上面的建议创建它。仍然无法确定如何实例化主容器，但由于视图是在其他地方定义的，所以在我看来，我将在启动中使用Ext.create方法，这里有一些讨论，但仍然没有有效的方法。create/new之间的唯一区别是create将查找任何未完成的依赖项，new不会。我真的不知道如何进一步解释，在启动时您创建了一个容器组件的实例。将在尝试回答中编译一组源代码，看不到其他解释问题所在的方法。它在“框架”和定义之间的某个地方失败。

MyContainer

只是我编的一个名字，没有内置的类叫它。没错，我创建了这个类（就像我在上面的示例中所做的那样）。但是，即使这样做并在应用程序中引用它，我似乎也无法在不说“未定义”的情况下创建新的MyContainer。我错过了什么吗？你的课是

MyApp.view.MyContainer

。很有趣。我假设它会看到/使用别名。因此，使用这种方法，我发现它不需要在上面的“视图”下包含。总之，实例化有几种方法。但是有没有一个你会建议作为最佳实践？Re:Meredith不幸的是，由于可疑的ext许可证（商业产品）和这些最初的障碍，本研究尝试的项目被另一条道路启动，因此，老实说，在此期间，我没有多少时间来评估答案。如果这足够清楚，我计划评估并结束这个问题。同时，我还想征求管理员的指导意见，因为这个问题似乎是自以为是的答案，并且可能会揭示关于EXT.js MVC框架的更有趣的见解，也许会继续开放一段时间？？？同时，我开始相信EXT.js的作者并没有设想以我所描述的方式使用这个框架。让应用程序在全尺寸浏览器中运行，这是ext.js集成到更大系统的最初想法。？？？不确定我在评论中说了什么（如果我去年做过的话？），但我已经很久没有使用ExtJS了。我最终将它作为一个完整的页面应用程序框架使用，而不仅仅是一个网格组件，这正是设计者想要使用它的方式。如果网格没有以这种方式使用，某些分组插件就会出现错误。