用于多页面应用的ExtJS架构

Question

我有一个.NET应用程序,其中大多数UI是自定义的.在某些页面上,我使用ExtJS4组件(例如Grid)来显示用户表格.我还有另一个显示用户配置文件的页面,以及另一个显示应用程序表单的页面.还有许多其他页面不使用ExtJS.我谨慎地使用ExtJS组件,并希望在我使用ExtJS的所有页面上为Stores和Models提供可重用的代码.

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

对于我的场景,我一直在寻找有关构建ExtJS代码的最佳方法的建议.

我应该在一个通用的JavaScript文件中创建商店和模型,并在每个页面上包含该文件吗？然后为我想使用ExtJS组件的每个页面创建一个Ext.Application或Ext.onReady实例？或者我应该基本上为每个页面使用MVC架构只是为了几个组件？

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

Answer 1

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

在我的页面模板上，我加载 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

我的 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。