Question

- ＆gt;问题在帖子的末尾。

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

鉴于ExtJs主要是单页面向应用程序的框架，我必须找到一种方法使其适用于多页面应用程序。

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

<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.js是我的应用启动器，简化如下：

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

所以我的视口包含一个带有标签的面板，标签中有一个标签。使用<div id = "mainAppContainer"></div>呈现标签后，我知道我可以通过调用BuildActionHTML()

开始在其中呈现我的观点

1。我的问题是这种方法有多糟糕，因为我确信它不优雅。什么＆＃34;问题＆＃34;我可能会进入，有哪些优点/缺点。

2. 此外，如何自定义ext-all.js以仅使用我在应用程序中使用的类和组件来减小其大小。由于我的应用程序架构（或缺乏应用程序架构），我不认为我可以使用sencha cmd。

谢谢。

ExtJS＆amp; ASP.NET MVC 4关于多页面应用程序

0 个答案: