Asp.Net大型项目实践(9)-ExtJs实现系统框架页（非iframe,附源码,在线demo）

　　本篇我们来做系统的框架页，并用EXT的“load”方式实现单页渲染。使整个应用程序就是一个单页，而非iframe实现的框架页，这样那些引用的繁杂JS库只需加载一次即可，而无需每个功能页都重新加载一边所有引用JS，从而大大提高了效率，杜绝了内存溢出错误。国际惯例先看效果图：
在线Demo：http://218.60.8.35:1234/(按登录按钮直接进入，如果你路由器禁用了1234端口可能访问不到哈)

是不是很漂亮呢？因为有了强悍的EXTJS，我们不需要搞美工，CSS，HTML这些繁杂的东西就能实现出来。左边的动态菜单树是通过权限配置出的，由于我们还没有讲到权限管理，所以这里左边的菜单树暂时不实现。上面的那些按钮点击的具体功能也暂不实现。

首先我们新建一个文件MasterPage.cs，和上篇一样只有一个简单的名为MasterPage的Action返回View即可

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Demo.HIS.MVC.CommonSupport;

namespace Demo.HIS.MVC.Controllers
{
public partial class MainController : BaseController
{
public ActionResult MasterPage()
{
return View();
}
}
}

同样在Views文件下的Main文件夹下新建文件MasterPage.aspx，里面包含了整个系统所需的所有JS，就像前面说的这些CSS和JS库只需要在这里加载一次即可，以后的具体功能页都不需要加了。（可以看到加载CSS和JS文件非常多，这是在开发阶段...在交付客户使用的时候可以整理成一个JS然后压缩）：

代码

<% @ Page Language = " C# " Inherits = " System.Web.Mvc.ViewPage " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< link href ="http://www.cnblogs.com/Scripts/ext/resources/css/ext-all.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Scripts/ext-ux/css/ux-all.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Content/Site.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Content/IconCls.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Scripts/ext-ux/SuperBoxSelect/superboxselect.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Scripts/ext-ux/TreeGrid/TreeGrid.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Scripts/ext-ux/GridSummary/GridSummary.css" rel ="stylesheet" type ="text/css" />

< script src ="http://www.cnblogs.com/Scripts/ext/adapter/ext/ext-base.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext/ext-all.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext/src/locale/ext-lang-zh_CN.js" type ="text/javascript" ></ script >


< script src ="http://www.cnblogs.com/Scripts/RemoteValidator.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext-ux/ux-all.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/RowEditorOverride.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/FilterOverride.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/Ext.data.StoreOverride.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ComboBoxOverride.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext-ux/SuperBoxSelect/SuperBoxSelect.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext-ux/TreeGrid/TreeGrid.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext-ux/GridSummary/GridSummary.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/Ext.form.Action.LoadOverride.js" type ="text/javascript" ></ script >

< script src ="http://www.cnblogs.com/Scripts/JsHelper.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/CustomExt.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/DomainControlers.js" type ="text/javascript" ></ script >


< script src ="http://www.cnblogs.com/Scripts/Main/MasterPage.aspx.js" type ="text/javascript" ></ script >

< title > 代码如尿崩MIS </ title >
</ head >
< body >
< div ></ div >
</ body >
</ html >

 

接下来是最主要的MasterPage.aspx.js文件：

代码

Ext.BLANK_IMAGE_URL = ' ../Scripts/ext/resources/images/default/s.gif ' ;
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ' title ' ;
var ALL_PAGESIZE_SETTING = 15 ; // 这里设置系统分页数的全局变量
function Main_MasterPage() {

// 居顶工具栏
var topBar = new Ext.Toolbar({
region : ' north ' ,
border : false ,
split : true ,
height : 26 ,
minSize : 26 ,
maxSize : 26 ,
items : [{
xtype : ' tbbutton ' ,
text : " 代码如尿崩MIS " ,
cls : ' x-btn-text-icon ' ,
icon : ' /Content/icons/house.png ' ,
disabled : true ,
disabledClass : ''
}, " - " , {
xtype : ' tbbutton ' ,
text : " 心脏外科 " ,
cls : ' x-btn-text-icon ' ,
icon : ' /Content/icons/layers.png ' ,
disabled : true ,
disabledClass : ''
}, " - " , {
xtype : ' tbbutton ' ,
text : " 王二麻 " ,
cls : ' x-btn-text-icon ' ,
icon : ' /Content/icons/user.png ' ,
disabled : true ,
disabledClass : ''
}, " -> " , " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 刷新当前页 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/arrow_refresh.png " ,
handler : function (btn, e) {
var tab = tabMain.getActiveTab();
tab.removeAll( true );
tab.getUpdater().refresh();
}
}, " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 全部关闭 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/stop.png " ,
handler : function (btn, e) {
tabMain.items.each( function (item) {
if (item.closable) {
tabMain.remove(item, true );
}
})

}
}, " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 设置为常用页 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/asterisk_yellow.png " ,
handler : function (btn, e) {
}
}, " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 修改密码 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/key.png " ,
handler : function (btn, e) {

}
}, " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 帮助 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/lightbulb.png " ,
handler : function (btn, e) {
}
}, " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 注销 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/lock_go.png " ,
handler : function (btn, e) {
}
}, " - " , {
xtype : " tbbutton " ,
minWidth : 80 ,
text : " 退出 " ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/door_out.png " ,
handler : function (btn, e) {
}
}]
});
// 左边的菜单
var menu = new Ext.tree.TreePanel({
title : ' 功能菜单 ' ,
region : " west " ,
autoScroll : true ,
enableTabScroll : true ,
collapsible : true ,
collapsed : true ,
iconCls : ' plugin ' ,
split : true ,
rootVisible : false ,
lines : false ,
width : 220 ,
minSize : 220 ,
maxSize : 220 ,
root : new Ext.tree.AsyncTreeNode({
id : ' 0 ' , // 注意这个0是约定
level : ' 0 ' ,
expanded : true ,
text : ' 菜单 ' ,
leaf : false
})
});
// 主显示区
var tabMain = new Ext.TabPanel({
id : " Main_MasterPage_TabMain " ,
region : " center " ,
autoScroll : true ,
enableTabScroll : true ,
activeTab : 0 ,
onTitleDbClick : function (e, target, o) {
var t = this .findTargets(e);
if (t.item && t.item.closable) {
if (t.item.fireEvent( ' beforeclose ' , t.item) !== false ) {
t.item.fireEvent( ' close ' , t.item);
this .remove(t.item);
}
}
},
items : [ new Ext.Panel({
id : ' tab-0001 ' ,
title : ' 首页 ' ,
autoScroll : true ,
layout : ' fit ' ,
border : false ,
iconCls : ' house ' ,
autoLoad : {
url : ' /Main/Index ' ,
scope : this ,
scripts : true ,
text : ' 页面加载中,请稍候.... '
}
})]
});
// 居底工具栏
var footBar = new Ext.ux.StatusBar({
region : " south " ,
items : [ " -> " , " 弦哥版权所有 " ]
});

// 创建框架
new Ext.Viewport({
id : " Main_MasterPage_ViewPort " ,
layout : ' border ' ,
items : [tabMain, topBar, footBar, menu]
});

}
Ext.onReady( function () {
Main_MasterPage();
});

上面的代码基本就是个框架布局没啥好说的，唯一需要注意的是下面的代码 比如我们要在tab里加一个叫“首页”的子页面（因为没有菜单，所以暂时把tab里的子页写死）：

代码

new Ext.Panel({
id : ' tab-0001 ' ,
title : ' 首页 ' ,
autoScroll : true ,
layout : ' fit ' ,
border : false ,
iconCls : ' house ' ,
autoLoad : {
url : ' /Main/Index ' ,
scope : this ,
scripts : true ,
text : ' 页面加载中,请稍候.... '
}
})

注意autoLoad属性，这样实现了在单页中动态渲染了需要加载的子页面，url：'/Main/Index'就是要请求子页面的URL。

下面我们简单实现一下/Main/Index这个子页：

新建Index.cs文件

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Demo.HIS.MVC.CommonSupport;

namespace Demo.HIS.MVC.Controllers
{
public partial class MainController : BaseController
{
public ActionResult Index()
{
return View();
}
}
}

新建文件Index.aspx，虽然我们将在这个子页实现一些EXTJS的功能，但是这里除了引用Index.aspx.js这个本页对应的js外，无需引用其他任何CSS和JS库

代码

<% @ Page Language = " C# " Inherits = " System.Web.Mvc.ViewPage " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Index </ title >
< script src ="http://www.cnblogs.com/Scripts/Main/Index.aspx.js" type ="text/javascript" ></ script >
</ head >
< body >
< div >

</ div >
</ body >
</ html >

最后是Index.aspx.js的代码，简单实现一个EXT按钮和提示框来验证我们的load加载方式：

代码

function Main_Index() {

var btn = new Ext.Button({
text : ' 我是一个Ext按钮 ' ,
handler : function () {
Ext.MessageBox.alert( ' 提示框 ' , ' 代码如尿崩，谁与我争疯！ ' );
}
});
var panel = new Ext.Panel({
title : ' 一个panel ' ,
items : [btn]
});
JsHelper.ExtTabDoLayout(panel); // 注意这里把panel组件加到当前的tabpanel里
}
Main_Index(); // 执行方法

 

最后效果如下：

这两篇关于EXT的内容都比较简单，没有涉及到EXTJS与后台Asp.net MVC的交互，下篇准备开始正经介绍EXTJS与后台的各种复杂交互，这里向大家征求一下意见，后面的篇章我想有两种方式去写：

第一种:先把MIS中的EXT结合后台的每个典型UI场景（如：下拉框绑定，表格绑定，表单提交等...）独立的系统的讲

第二种：直接按业务应用功能场景实现(如：字典管理，用户管理，角色管理，菜单管理...等，计划是完整的实现整个权限管理)去讲，这样虽然也会涉及到所有的典型UI场景，但各种UI场景设计交织在一起，比较复杂，我也不可能讲的太细，怕大家看不明白...

希望大家留言。

源码：HISDemo-9.rar