ExtJS的架构多页应用(ExtJS Architecture for Multi Page App

我有一个.NET应用程序，其中大部分的UI是定制的。在某些页面，我使用ExtJS4组件，如网格，以显示例如用户的表。我也有另外一个页面，在这里我显示用户配置文件，另一个网页，我展示的申请表。有迹象表明，不使用ExtJS的许多其他页面。我谨慎地使用ExtJS的部件，并想在所有的地方我使用ExtJS的网页有商店和模型可重用的代码。

我熟悉ExtJS的MVC架构，但所有的文档和示例演示了单页ExtJS的应用程序的最佳实践。

对于我的方案，我一直在寻找到建筑师的最佳方式ExtJS的代码是什么意见。

如果我只是创建存储和机型中常见的JavaScript文件，包括每一个页面上的文件吗？然后创建Ext.Application或Ext.onReady的每个页面的实例，我想用ExtJS的组件？或者我应该基本上是使用MVC架构，每个所讨论的页面只是几部分组成？

我只是想避免复制/粘贴代码，并具有可重用性。请推荐最好的路该如何走。

Answer 1:

我不得不创建一个包括不合ExtJS的组件数页的应用程序。对我来说，它是关于50/50比你这么多了几分ExtJS的。 Ext.Application的多个实例是行不通的，当我尝试了，因为视口是如何把它捆起来。

最后我用一个Ext.Application有一个视口（这是大小调整管理很好），我创建了一个“代理” Ext.panel.Panel为其他（非ExtJS的）页面查看和我甩了页面的内容这个小组的html的配置，当它被使用Servlet呈现-我不想使用iframe，但我想这可能是另一种选择。

这个工作很好地出来为我和我能够采取MVC achitecture这样的优势。

Answer 2:

所以，我找到了一个合适的解决方案，我相信效果很好。

在我的页面模板我加载的Ext JS所需文件，并使用Loader.setConfig指定ExtJS的MVC文件夹结构的位置：

<link href="<path>/ext-all.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<path>/bootstrap.js" charset="utf-8"></script>
<script type="text/javascript">
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'GS': '<path>/extjs/app") %>'
        }
    });
</script>

然后在我的app文件夹，我有以下文件夹结构：

app/
   Models/
        User.js
        MyOtherModel.js

我user.js的文件包括：

    Ext.define('GS.Model.SimpleUser', {
       extend: 'Ext.data.Model',
       fields: [
           { name: 'UserID', type: 'int' },
           { name: 'Username', type: 'string' },
           { name: 'Firstname', type: 'string' },
           { name: 'Lastname', type: 'string' },
           { name: 'Email', type: 'string' }
       ],
       idProperty: 'UserID'
    });

然后，我使用ExtJS的每一页上，我只是包括：通过Ext.requires模型：

    Ext.require([
      'Ext.grid.*',
      'Ext.data.*',
      'Ext.util.*',
      'Ext.state.*',
      'Ext.toolbar.Paging',
      'Ext.tip.QuickTipManager',
      'GS.Model.SimpleUser'
    ]);

    Ext.onReady(function () {
        //app code here
    });

使用这种方法，我可以写可重用的代码，如模型和控制器，并没有去完全MVC与单个视口。