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(',');
}
}