ExtJS可以用來開發RIA也即富客戶端的AJAX應用，是一個用javascript寫的，主要用於創建前端用戶界面，是一個與後臺技術無關的前端ajax框架。 國慶節放假作短暫休息之後，想起多日來學生問的關於Extjs問題，決定做一項目給予理解：
後臺主界面製作：
過程步驟：
一、導入Extjs文件分別爲：
其中vswd-ext_2.2.js爲vs2008智能提示插件；
二、新建一個js文件來編寫Extjs:
<link href="../Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="../App_Themes/BlueTheme/Default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Extjs/ext-all.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
Ext.onReady(function(){
//動態更新時間
var aWeek=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var clock = new Ext.Toolbar.TextItem(new Date().format('Y-m-d G:i:s A')+' '+aWeek[new Date().getDay()]);
//定期更新時間
Ext.TaskMgr.start({
run: function(){
Ext.fly(clock.getEl()).update(new Date().format('Y-m-d G:i:s A')+' '+aWeek[new Date().getDay()]);
},
interval: 1000
});
var viewport=new Ext.Viewport({
layout:'border',
items:[{
title:'山西IT人才網後臺管理',
region:'north',
contentEl:'north-div',
split:true,
border:false,
collapsible:true,
height:50,
minSize:50,
maxSize:120,
tbar:[clock,//添加一文本
{xtype:"tbseparator"},
{xtype:"tbtext",text:'歡迎：admin管理員'},
{xtype:"tbfill"},//加上這句，後面的就顯示到右邊去了
{pressed:true,text:"清空緩存"},
{pressed:true,text:"註銷"}
]
},{
region:'south',
contentEl:'south-div',
split:true,
border:false,
collapsible:true,
height:25,
minSize:50,
maxSize:120,
html:'<div class="menu south">山西IT人才網，版權所有copyright:瑪維斯工作室</div>'
},{
title:'菜單導航',
region:'west',
contentEl:'west-div',
split:true,
border:true,
collapsible:true,
width: 200,
minSize:120,
maxSize:200,
//設定佈局爲fit,子容器自動填充整個父容器
layout:'fit',
layoutConfig:{ activeontop:true},
defaults: { bodyStyle: 'margin:0;padding:0;'},
items:
//添加TabPanel面板
new Ext.TabPanel({
border:false,
activeTab:0,
//位置爲底部
tabPosition:'bottom',
items:[{
contentEl:'west_content',
layout:'accordion',
layoutConfig:{animate:true },
title:'會員管理',
autoScroll:true,
border:false,
items:[<%=MemberXMLMenus %>]
},{
layout:'accordion',
layoutConfig:{animate:true },
title:'系統管理',
autoScroll:true,
border:false,
items:[<%=SysXMLMenus %>]
}]
})
},{
//中間內容區域
region:'center',
contentEl:'center-div',
split:true,
border:true,
collapsible:true,
html:'<iframe id="center-iframe" width="100%" height=100% name="main" frameborder="0" scrolling="auto" style="border:0px none; background-color:#BBBBBB; " ></iframe>'
}]
});
//加載過程時間爲250毫秒
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 200)
});
</script>
<form id="form1" runat="server">
<!--啓動加載-->
<div id="loading-mask">
</div>
<div id="loading">
<div class="loading-indicator">
<img src="../Extjs/resources/extanim32.gif" width="32" height="32" style="margin-right: 8px;"
/>正在加載...</div>
</div>
<!--啓動加載-->
<div id="tree">
</div>
<!--頂部內容-->
<div id="north-div">
</div>
<!--頂部內容-->
<div id="south-div">
</div>
<!--菜單導航-->
<div id="west-div">
</div>
<div id="west_content">
</div>
<!--主要內容-->
<div id="center-div">
</div>
</form>
</body>
</html>
注意：
MemberXMLMenus
SysXMLMenus
這後臺定義變量，將爲HTML格式數據；（目的是添加摺疊菜單）
三、編寫後臺代碼：
public partial class Default : System.Web.UI.Page
{
public string SysXMLMenus;
public string MemberXMLMenus;
protected void Page_Load(object sender, EventArgs e)
{
XMLHelper xmlHelper1 = new XMLHelper(@"~/app_data/SysXMLMenus.xml");
SysXMLMenus = xmlHelper1.CreateHTML();
XMLHelper xmlHelper2 = new XMLHelper(@"~/app_data/MemberXMLMenus.xml");
MemberXMLMenus = xmlHelper2.CreateHTML();
}
}
四、其中用到XMLHelper類代碼爲：（主要爲讀取XML數據）
public class XMLHelper
{
private string _XMLpath;
public XMLHelper(string XMLpath)
{
//初始化XML
InitXMLpath(XMLpath);
}
/// <summary>
/// 設定XML文件的讀寫權限
/// </summary>
/// <param name="XMLpath"></param>
public void InitXMLpath(string XMLpath)
{
//獲取物理路徑
_XMLpath = HostingEnvironment.MapPath(XMLpath);
//設定XML文件的權限
FileIOPermission permission = new FileIOPermission(FileIOPermissionAccess.Write, _XMLpath);
permission.Demand();
}
/// <summary>
/// 讀取XML數據返回DataTable
/// </summary>
/// <returns></returns>
public DataTable GetAllNodes()
{
DataSet ds = new DataSet();
ds.ReadXml(_XMLpath);
return ds.Tables[0];
}
/// <summary>
/// 讀取子節點內容返回DataTable
/// </summary>
/// <param name="parentid">父類ID</param>
/// <returns></returns>
public DataTable GetAllNodes(string parentid)
{
//讀取XML所有數據到DataTable
DataTable dt = GetAllNodes();
//克隆對象
DataTable _dt = dt.Clone();
foreach (DataRow dr in dt.Rows)
{
//如果parentid兩個相等，則添加克隆對象中
if (dr["parentid"].ToString() == parentid.ToString())
_dt.Rows.Add(dr.ItemArray);
}
return _dt;
}
/// <summary>
/// text:要顯示的節點文件
/// id:屬性
/// href:鏈接地址
/// hrefTarget:鏈接目標框架名稱
/// children:子節點 格式：[{節點1},{節點2}……]
/// leaf:當前節點是否爲葉子節點，如果爲false,則此節點有子點
/// 否則爲true,此節點再無子節點
/// </summary>
/// <param name="sb">JSON字串</param>
public void CreateExtTreeNode(StringBuilder sb)
{
//節取根節點數據
DataTable dt = GetAllNodes("0");
if (dt.Rows.Count > 0)
{
sb.Append("[");
foreach (DataRow dr in dt.Rows)
{
sb.Append("{");
sb.Append("text:'" + dr["title"].ToString() + "',");
sb.Append("id:'node" + dr["id"].ToString() + "'");
//讀取字節點數據
AddChildrenNode(GetAllNodes(dr["id"].ToString()), sb);
sb.Append("}");
}
}
sb.Append("]");
}
/// <summary>
/// 增加子節點,讀取子節點並填加到數據中
/// </summary>
/// <param name="dt">DataTable讀取的XML數據</param>
/// <param name="sb">JSON字串</param>
public void AddChildrenNode(DataTable dt, StringBuilder sb)
{
//讀取DataTable數據
if (dt.Rows.Count > 0)
{
sb.Append(",leaf:false,children:[");
foreach (DataRow dr in dt.Rows)
{
sb.Append("{");
sb.Append("text:'" + dr["title"].ToString() + "',");
sb.Append("id:'node" + dr["id"].ToString() + "',");
sb.Append("href:'" + dr["url"].ToString() + "',");
sb.Append("hrefTarget:'main'");
//遞歸讀取節點中所有數據
AddChildrenNode(GetAllNodes(dr["id"].ToString()), sb);
sb.Append("}");
}
sb.Append("]");
}
else
sb.Append(",leaf:true");
}
/// <summary>
/// 得到Html數據
/// </summary>
/// <returns></returns>
public string CreateHTML()
{
StringBuilder sb = new StringBuilder();
DataTable dt = GetAllNodes("0");
DataTable dt2 = null;
string _tempHtml;
foreach (DataRow dr in dt.Rows)
{
sb.Append("{title:'" + dr["title"].ToString() + "',autoScroll:true,border:false,iconCls:'nav',");
dt2 = GetAllNodes(dr["id"].ToString());
if (dt2.Rows.Count > 0)
{
_tempHtml = "<ul class=/"LeftNav/">";
foreach (DataRow dr2 in dt2.Rows)
{
_tempHtml += "<li><a target=/"main/" href=/"" + dr2["url"].ToString() + "/"> " + dr2["title"].ToString() + "</a></li>";
}
if (_tempHtml != "<ul>")
{
_tempHtml += "</ul>";
sb.Append("html:'" + _tempHtml + "'}");
}
else
{
sb.Append("html:''}");
}
}
else
{
sb.Append("html:''}");
}
sb.Append(",");
}
return sb.ToString().TrimEnd(',');
}
}
