NHibernate3.2+Asp.net MVC3+Extjs 4.0.2项目实践(四):Web主程序结构和界面

骑猪看日落 2021-12-10 14:09 133阅读 0赞

Web主程序主要包括：Controllers，Views，Components(Extjs库文件和应用程序Extjs模块化组件库:Tesz.App)，而Tesz.App组件库分为Forms,Models,Pages,Panels,Stores和基本组件，这里我没有按模块来分类，而是依据组件的属性进行分类，便于管理也比较清晰；还有Configuration(启动加载类文件)，Content(css和images文件)，Scripts(jQuery组件库和应用程序Util通用js库文件)，以及Global.asax与Web.config文件，可参考下图：

![o_u25434367_1340c315707g214_s.gif][] Web主程序结构图

[![Snap4][]][Snap4 1]

应用程序界面方面，在这里我只介绍App Center，之后博文涉及到的Controller，View，Extjs组件也是以App Center为导向。App Center（应用程序中心），在该项目中是应用系统的集成化管理平台。主界面是一个Extjs的Boder类型的ViewPort，Top为header，左侧为树形导航菜单(Ext TreePanel)，Center是主操作区域，使用Extjs的TabPanel，默认为StarPage的Tab，有导航菜单单击来动态加载Tab。界面如下图：

![o_u25434367_1340c315707g214_s.gif][] 主界面

[![5][]][5 1]

App Center主界面View文件包括\_AC\_Layout.cshtml(MVC layout View)，\_Index.cshtml，\_Start.cshtml（Start page in TabPanel），AppCenterController以及Extjs组件AppViewPort.js，ACMainPanel.js，TabCloseMenu.js，ACStartPage.js。

![o_u25434367_1340c315707g214_s.gif][]  \_AC\_Layout.cshtml

隐藏行号 复制代码 ？

1.      <!DOCTYPE html>
2.      <html>
3.      <head>
4.      <title>@ViewBag.Title</title>
5.      <link href="@Url.Content("~/Content/ext-all-gray.css")" rel="stylesheet" type="text/css" />
6.      <script src="@Url.Content("~/Components/ext 4.0.2/ext-all.js")" type="text/javascript"></script>
7.      <link href="@Url.Content("~/Content/MainStyle.css")" rel="stylesheet" type="text/css" />
8.      <link href="@Url.Content("~/Content/menu.css")" rel="stylesheet" type="text/css" />
9.      <link href="@Url.Content("~/Content/Default.css")" rel="stylesheet" type="text/css" />
10.     <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
11.     <script src="@Url.Content("~/Scripts/TESZ.Web.App.Util.js")" type="text/javascript"></script>
12.     </head>
13.     <body  topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
14.     <div>@RenderBody()</div>
15.     </body>
16.     </html>
17.

\_AC\_Layout.cshtml主要装载了css文件，Etxjs库文件和TESZ.Web.App.Util.js。

![o_u25434367_1340c315707g214_s.gif][]  \_Index.cshtml

隐藏行号 复制代码 ？

1.      <script type="text/javascript">
2.      Ext.Loader.setConfig({enabled: true});
3.      Ext.Loader.setPath('Tesz.App', '../Components/Tesz.App');
4.  
5.      Ext.onReady(function () {
6.      Ext.QuickTips.init();
7.      Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
8.      Ext.create('Tesz.App.AppViewPort');
9.  
10.     });
11.     </script>
12. 
13.     @{
14.     ViewBag.Title = "Application Center";
15.     Layout = "~/Views/AppCenter/_AC_Layout.cshtml";
16.     }
17.     <div id="divViewPort"></div>
18. 
19. 
20.

\_Index.cshtml是AppCenter的Index view，定义了Extjs组件的引用路径，并且创建了AppCenter的ViewPort。

\_Start.cshtml则加载默认开始页。

隐藏行号 复制代码 ？

1.      <script src="@Url.Content("~/Components/Tesz.App/Pages/ACStartPage.js")" type="text/javascript"></script>
2.      <div id="divPage"></div>
3.

接着来看一下ViewPort和Main TabPanel。

![o_u25434367_1340c315707g214_s.gif][]  AppViewPort.js

隐藏行号 复制代码 ？

1.      Ext.require('Tesz.App.AppMenuTree');
2.  
3.      Ext.define('Tesz.App.AppViewPort', {
4.      extend: 'Ext.Viewport',
5.      requires: ['Tesz.App.ACMainPanel'],
6.      renderTo: 'divViewPort',
7.      layout: {
8.      type: 'border'
9.      },
10.     defaults: {
11.     split: true
12.     },
13.     items: [{
14.     region: 'north',
15.     height: 74,
16.     border: false,
17.     html: '<a href="/" style="cursor:hand;text-decoration:none"><div id="Middle"><div style="text-align:right;padding-top:12px"><span class="header_Title">Application Center</span></div></div></>'
18.     },
19.     Ext.create('Ext.Panel',{
20.     region: 'west',
21.     el: 'west',
22.     title:'App Menu',
23.     split:true,
24.     width: 221,
25.     autoScroll:false,
26.     layout:'fit',
27.     collapsible :true,
28.     layoutConfig: {
29.     titleCollapse : true,
30.     animate : true,
31.     activeOnTop : false
32.     },
33.     items: Ext.create('Tesz.App.AppMenuTree')
34.     })
35.     , {
36.     region: 'center',
37.     layout: 'border',
38.     border: false,
39.     items: [{ xtype: 'acmainpanel', id:'MAINPANEL'}]
40.     }]
41.     });
42. 
43.

ViewPort的north为top header，west region为树形导航菜单AppMenuTree，center region为MainTabPanel，这里加载main panel是用的自定义组件MainTabPanel的alias来加载，但是树形树形菜单用alias来加载的话，会报错，不知道为什么；Extjs 4版本较之前版本有很大变化，比如创建不能再用new，取而代之的是Ext.create，而且Extjs调试起来比较麻烦，我是用firefox的firebug，但ext-all.js的很多错误都不是很明晰，ext-all.js打开也比较慢，也懒得去看js代码，就网上找解决方案，自己摸索吧。

![o_u25434367_1340c315707g214_s.gif][]  ACMainPanel.js

隐藏行号 复制代码 ？

1.      Ext.define('Tesz.App.ACMainPanel', {
2.      extend: 'Ext.tab.Panel',
3.      requires: ['Tesz.App.TabCloseMenu'],
4.      alias: 'widget.acmainpanel',
5.      id: 'MainTabPanel',
6.      //width: 300,
7.      region: 'center',
8.      resizeTabs: true,
9.      enableTabScroll: true,
10.     layoutOnTabChange: true,
11.     //height: 200,
12.     defaults: {
13.     autoScroll: true,
14.     bodyPadding: 2
15.     },
16.     items: [{
17.     title: 'Start Page',
18.     id: 'tab0',
19.     autoLoad: {
20.     url: 'StartPage',
21.     scripts:true
22.     }
23.     }],
24.     plugins: 'tabclosemenu'
25.     });
26.

Main panel中的tabclosemenu是extjs 4.0.2的examples的ux的现成plugin组件，我只是搬过来改了一下。

再介绍一下AppCenterController控制器，这里先列出来AppCenterController.cs和Dependencies.cs，其实这是一个类，只是定义了partial进行了分离，因为AppCenter涉及到的控制很多，所以进行代码分离不失为一个好方法。Dependencies.cs中对所有控制所需要的对中间业务层Service接口进行了定义，AppCenterController.cs则是Index和Start Page Tab的Action，因为同属于AppCenter，所以ACMainPanel中的autoLoad的url直接用了Action name，省去了Controller name。

![o_u25434367_1340c315707g214_s.gif][]  AppCenterController.cs

隐藏行号 复制代码 ？

1.      public partial class AppCenterController : Controller
2.      {
3.      public ActionResult Index()
4.      {
5.      return PartialView("~/Views/AppCenter/_Index.cshtml");
6.      }
7.  
8.      public ActionResult StartPage()
9.      {
10.     return PartialView("~/Views/AppCenter/_Start.cshtml");
11.     }
12.     }
13.

![o_u25434367_1340c315707g214_s.gif][]  Dependencies.cs

隐藏行号 复制代码 ？

1.      public　?partial class AppCenterController : Controller
2.      {
3.      [Dependency]
4.      public TESZ.Services.ISystem_PurviewService _iSystem_PurviewService { get; set; }
5.  
6.      [Dependency]
7.      public TESZ.Services.ILocation_CountryService _iLocation_CountryService { get; set; }
8.  
9.      [Dependency]
10.     public TESZ.Services.ILocation_StateProvinceService _iLocation_StateProvinceService { get; set; }
11. 
12.     }
13.

写了挺多，至于树形菜单在下一节中再讲吧。

转载于:https://www.cnblogs.com/leowuang/archive/2011/10/31/2230232.html

[o_u25434367_1340c315707g214_s.gif]: /images/20211210/0fdea33363674fd3b4ea4b4f03470f03.png
[Snap4]: /images/20211210/08bf18b270fb49c0882d28c68d0ac3af.png
[Snap4 1]: http://images.cnblogs.com/cnblogs_com/leowuang/201110/201110311600528784.gif
[5]: /images/20211210/88aaf3bc5a6f4da5b7cdd89e00fd1631.png
[5 1]: http://images.cnblogs.com/cnblogs_com/leowuang/201110/201110311654532453.jpg