Model view controller 多页应用程序的ExtJS体系结构

我有一个.NET应用程序，其中大部分UI是自定义的。在一些页面上，我使用ExtJS4组件，例如Grid，来显示用户表。我还有另一个页面显示用户配置文件，还有另一个页面显示申请表。还有许多其他页面不使用ExtJS。我很少使用ExtJS组件，并且希望在使用ExtJS的所有页面上都有可重用的存储和模型代码

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

对于我的场景，我正在寻找关于构建ExtJS代码的最佳方法的建议

我是否应该在一个公共JavaScript文件中创建存储和模型，并在每个页面上包含该文件？然后为我想使用ExtJS组件的每个页面创建一个Ext.Application或Ext.onReady实例？或者，我应该为每个有问题的页面使用MVC体系结构，只为几个组件

---

我只是想避免复制/粘贴代码，并具有可重用性。请推荐最佳路径。

我必须创建一个包含多个非ExtJS组件页面的应用程序。对我来说，大约是50/50，所以比你的ExtJS多一点。当我尝试时，Ext.Application的多个实例不可用，因为视口是如何绑定到它的

我最终使用了一个带有单个视口的Ext.应用程序（这对于调整大小管理很好），我为另一个（非ExtJS）创建了一个“代理”

Ext.panel.panel

视图当使用servlet呈现页面时，我将页面内容转储到该面板的配置中——我不想使用IFrames，但我想这可能是另一种选择

---

这对我来说效果很好，我能够像这样利用MVC架构。

最新版本的Sencha Cmd明确支持开发和部署。如果您的依赖项设置正确，它允许您创建特定于页面的构建包，以优化每页的加载和缓存。虽然从实际的角度来看，如果重叠代码的数量足够大（和/或代码总量足够小），那么最好是KISS并将所有应用程序类包含在一个文件中

---

是的，使用Ext的每个页面通常应该使用Ext.onReady或Ext.application包装应用程序代码。你是否遵循MVC模式取决于你自己，应该由你的应用程序的要求和复杂性决定。对于简单的情况，这通常是不值得的，但对于复杂的应用程序或团队开发，遵循MVC可能是有意义的。

因此我找到了一个我认为效果良好的合适解决方案

在我的页面模板上，我加载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/
   Models/
        User.js
        MyOtherModel.js

My 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。

这似乎就是它的发展方向。我将所有模型放在一个文件中，该文件在ExtJS代码之前包含。如果我尝试使用MVC模型提供的约定功能，我似乎会遇到问题，但对于我们这些在Eclipse和Maven中进行开发的人来说，逐页使用BasisEncha cmd并不是一个好的解决方案。只是在ExtJS 5中尝试了这种方法，它仍然有效。