多页面应用的 ExtJS 架构 [英] ExtJS Architecture for Multi Page Application
问题描述
我有一个 .NET 应用程序,其中大部分 UI 都是自定义的.例如,在某些页面上,我使用 ExtJS4 组件(例如 Grid)来显示用户表.我还有另一个页面显示用户个人资料,另一个页面显示申请表.还有许多其他页面不使用 ExtJS.我很少使用 ExtJS 组件,并希望在我使用 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 代码的最佳方式的建议.
For my scenario, I was looking for advice on what the best way to architect the ExtJS code is.
我是否应该只在一个通用 JavaScript 文件中创建 Stores 和 Models 并将该文件包含在每个页面上?然后为我想使用 ExtJS 组件的每个页面创建一个 Ext.Application 或 Ext.onReady 的实例?或者我应该本质上为每个有问题的页面使用 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?
我只想避免复制/粘贴代码并具有可重用性.请推荐最佳路径.
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>
然后在我的应用程序文件夹中,我有以下文件夹结构:
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
});
使用这种方法,我可以编写可重用的代码,例如模型和控制器,而不必使用单个视口进行完整的 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 架构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!