6

我有一个 .NET 应用程序，其中大部分 UI 都是自定义的。在某些页面上，我使用 ExtJS4 组件（例如 Grid）来显示用户表。我还有另一个页面显示用户个人资料，还有另一个页面显示申请表。还有许多其他页面不使用 ExtJS。我很少使用 ExtJS 组件，并希望在我使用 ExtJS 的所有页面中为 Stores 和 Models 提供可重用的代码。

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

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

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

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

4

3 回答 3

3

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

我最终使用了一个带有单个视口的 Ext.Application（这对于调整大小管理非常有用），我Ext.panel.Panel为其他（非 ExtJS）页面创建了一个“代理”视图，并将页面的内容转储到该面板的html配置中它是使用 servlet 呈现的——我不想使用 IFrame，但我想这可能是另一种选择。

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

于 2013-03-05T20:14:10.297 回答
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。

于 2013-03-07T19:28:53.157 回答
1

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

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

于 2013-03-06T02:49:08.650 回答