ExtJS的架构多页应用

问题描述

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

I have a .NET application in which most of the UI is custom. On some of the pages, I am using ExtJS4 components, such as Grid, to display a table of Users for example. I also have another page where I display a user profile, and another page where I display an application form. There are many other pages that don't use ExtJS. I sparingly use ExtJS components and would like to have re-usable code for Stores and Models across all the pages where I use ExtJS.

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

I am familiar with ExtJS MVC architecture but all the documentation and examples demonstrate best practices for a single page ExtJS app.

有关我的情况，我一直在寻找到建筑师的最佳方式ExtJS的code是什么意见。

For my scenario, I was looking for advice on what the best way to architect the ExtJS code is.

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

Should I just create the Stores and Models in a common JavaScript file and include that file on every page? Then create an instance of the Ext.Application or Ext.onReady for every page I would like to use ExtJS components? Or should I essentially be using a MVC architecture for each page in question just for a few components?

我只是想避免复制/粘贴code和具有可重用性。请推荐采取的最佳路径。

I just want to avoid copy/pasting code and have re-usability. Please recommend the best path to take.

推荐答案

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

So i found a suitable solution that I believe works well.

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

On my page template I load Ext JS required files and use Loader.setConfig to specify location of ExtJS MVC folder structure:

<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文件夹，我有以下文件夹结构：

Then in my app folder, I have the following folder structure:

app/
   Models/
        User.js
        MyOtherModel.js

我的user.js的文件包括：

My User.js file contains:

    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模型：

Then, on every page I am using ExtJS, I just include the model through 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
    });  

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

With this method, I can write re-usable code such as Models and Controllers and not have to go full MVC with a single viewport.

这篇关于ExtJS的架构多页应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！