Asp.net mvc 4 基于多页应用程序的ExtJS和ASP.netmvc4_Asp.net Mvc 4_Extjs_Web Applications_Architecture_Multipage

Asp.net mvc 4 基于多页应用程序的ExtJS和ASP.netmvc4

asp.net-mvc-4 extjs web-applications architecture

Asp.net mvc 4 基于多页应用程序的ExtJS和ASP.netmvc4,asp.net-mvc-4,extjs,web-applications,architecture,multipage,Asp.net Mvc 4,Extjs,Web Applications,Architecture,Multipage,->问题在文章的末尾我想在带有ASP.NET MVC的多页应用程序上使用ExtJs。我知道MVC的一个目的是构建干净、快速的HTML页面，但我们只能说我必须使用ExtJs 考虑到ExtJs主要是一个面向单页应用程序的框架，我必须找到一种方法让它在多页应用程序上工作因此，我的布局页面如下所示： App.js是我的应用程序启动程序，简化后的外观如下：现在，主控制器中的索引视图和任何其他视图如下所示：因此，我的视口包含一个带有标签的面板，其中有一个标签。在使用该属性渲染标签后，我确信可以通过调

->问题在文章的末尾

我想在带有ASP.NET MVC的多页应用程序上使用ExtJs。我知道MVC的一个目的是构建干净、快速的HTML页面，但我们只能说我必须使用ExtJs

考虑到ExtJs主要是一个面向单页应用程序的框架，我必须找到一种方法让它在多页应用程序上工作

因此，我的布局页面如下所示：

App.js是我的应用程序启动程序，简化后的外观如下：

现在，主控制器中的索引视图和任何其他视图如下所示：

因此，我的视口包含一个带有标签的面板，其中有一个标签。在使用该属性渲染标签后，我确信可以通过调用BuildActionHTML在其中开始渲染视图

一,。我的问题是这种方法有多糟糕，因为我确信它并不优雅。我可能会遇到什么问题？优点/缺点是什么

二,。另外，我如何定制ext-all.js以仅使用我在应用程序中使用的类和组件，从而减小其大小。我不认为我可以用sencha cmd来解决这个问题，因为我的应用程序架构或缺乏它

多谢各位

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @*Scripts.Render("~/bundles/modernizr")*@

        @Styles.Render("~/Resources/css/app.css")
        @Styles.Render("~/ExtJs/ext-theme-neptune-all-debug_01.css")
        @Styles.Render("~/ExtJs/ext-theme-neptune-all-debug_02.css")
        @Scripts.Render("~/ExtJs/ext-all-debug.js")
        @Scripts.Render("~/App/app.js")
        @RenderSection("actionscripts", required: false)

    </head>
    <body>
        <div id="body">
            <section class="">
                @RenderBody()
            </section>
        </div>
    </body>
</html>

APP = {}
BuildActionHTML = null;
Ext.application({
    name: 'MyApp',
    launch: function () {
        APP = this;
        APP.VIEWPORT = Ext.create('Ext.container.Viewport', {
            layout: 'border',
            cls: 'spViewport',
            maxWidth: 1280,
            minWidth:960,
            items: [{
                region: 'center',
                xtype: 'panel',
                title: 'Main content',
                items: [{
                    xtype: 'label',
                    html: '<div id = "mainAppContainer"></div>',
                    listeners: {
                        afterrender: function (label, eOpts) {
                            BuildActionHTML && typeof BuildActionHTML == 'function' && BuildActionHTML();
                        }
                    }
                }]
            }]
        });

    }
});

@section actionscripts
{
    <script type="text/javascript">
        function BuildActionHTML() {
            Ext.create('Ext.panel.Panel', {
                title: 'My panel',
                width: '100%',
                renderTo: 'mainAppContainer',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Text field'
                }]
            })
        }
    </script>
}