Coolite Toolkit学习笔记一：效果图
前台代码实现如下：
前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Admin_Index" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<!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>创意连环管理系统</title>
<link href="../resources/css/main.css" rel="stylesheet" type="text/css" />
<script src="../resources/ExampleTab.js" type="text/javascript"></script>
<link href="../App_Themes/ThemeAdmin/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var loadExample = function (href, id) {
var tab = ExampleTabs.getComponent(id);
if (tab) {
ExampleTabs.setActiveTab(tab);
} else {
createExampleTab(id, href);
}
}
function addTab(tabPanel, id, url, title) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: title,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode: 'iframe',
maskMsg: '正在加载模块【 ' + title + '】，请稍候'
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ViewPort ID="ViewPort2" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Margins-Bottom="5" >
<ext:Panel ID="Panel1" IDMode="Ignore" runat="server" Header="false" Border="false">
<Body>
<div id='header'><h1>欢迎使用超级漂亮界面的后台管理系统之无敌存在</h1><br />
<div class="topToolBar">
<img src="../App_Themes/ThemeAdmin/Images/user.gif"alt="" />当前登录用户【 <a href="#"><asp:Label ID="labUserName" runat="server" Text="admin"></asp:Label></a> 】 |
<img src="../App_Themes/ThemeAdmin/Images/logout.gif" alt="换一个用户登录" /><asp:LinkButton ID="btnZhuXiao" runat="server">注销系统</asp:LinkButton> |
<img src="../App_Themes/ThemeAdmin/Images/exit.png" alt="关闭系统" /><asp:LinkButton ID="LinkButton1" runat="server">退出系统</asp:LinkButton>
</div>
</div>
</Body>
</ext:Panel>
</North>
<South Collapsible="true" Split="true">
<ext:Panel runat="server" Height="60" Title="关于系统" Icon="Cmy" Collapsed="true">
<Body>
<div style="text-align:center;height:60px; padding-top:10px; font-size:12px;"> 版权归@连环创意所有
开发单位：北京华软英创工作室 网址：<a href="Http://www.dzbsoft.com" target="_blank">Http://www.dzbsoft.com</a> 联系手机：13911778384 Email：dengzebo@163.com MSN：dengzebo@hotmail.com
</div>
</Body>
</ext:Panel>
</South>
<West Collapsible="true" Split="true">
<ext:Panel ID="Panel3" runat="server" Width="240" Header="false" Border="false">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TreePanel
ID="exampleTree"
runat="server"
Title="功能菜单"
AutoScroll="true"
Lines="false"
CollapseFirst="false"
ContainerScroll="true"
Icon="TagGreen"
RootVisible="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Theme: " />
<ext:ComboBox
ID="cbTheme"
runat="server"
EmptyText="系统换肤"
Width="100"
Editable="false"
TypeAhead="true">
<Items>
<ext:ListItem Text="默认" Value="Default" />
<ext:ListItem Text="灰色" Value="Gray" />
<ext:ListItem Text="暗蓝灰色" Value="Slate" />
</Items>
<Listeners>
<Select Handler="Coolite.AjaxMethods.GetThemeUrl(cbTheme.getValue(),{
success: function (result) {
Coolite.Ext.setTheme(result);
ExampleTabs.items.each(function (el) {
if (!Ext.isEmpty(el.iframe)) {
el.iframe.dom.contentWindow.Coolite.Ext.setTheme(result);
}
});
}
});" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:ToolbarButton ID="ToolbarButton1" runat="server" IconCls="icon-expand-all">
<Listeners>
<Click Handler="#{exampleTree}.root.expand(true);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip1" IDMode="Ignore" runat="server" Html="Expand All" />
</ToolTips>
</ext:ToolbarButton>
<ext:ToolbarButton ID="ToolbarButton2" runat="server" IconCls="icon-collapse-all">
<Listeners>
<Click Handler="#{exampleTree}.root.collapse(true);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip2" IDMode="Ignore" runat="server" Html="Collapse All" />
</ToolTips>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:AsyncTreeNode Cls="treeCss" NodeID="0" Text="Root" />
</Root>
<Loader>
<ext:PageTreeLoader OnNodeLoad="GetExamplesNodes">
<EventMask ShowMask="true" Msg="Loading..." />
</ext:PageTreeLoader>
</Loader>
<Listeners>
<Click Handler="if(node.isLeaf()){e.stopEvent();addTab(ExampleTabs,node.id,node.attributes.href,node.text);}" />
</Listeners>
</ext:TreePanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</West>
<Center>
<ext:TabPanel ID="ExampleTabs" runat="server" ActiveTabIndex="0" EnableTabScroll="true">
<Tabs>
<ext:Tab runat="server" ID="tabHome" Icon="BulletHome" IconCls="icon-application" Closable="false" Title="系统首页" AutoScroll="true">
<Body>
</Body>
</ext:Tab>
</Tabs>
<Plugins>
<ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
</Plugins>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>
后台代码实现功能：
1）、提供AjaxMethod方法实现系统换肤；
2）、加载XML配置文件实现主页左侧功能菜单的添加；
后台代码：
代码
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Coolite.Ext.Web;
public partial class Admin_Index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[AjaxMethod]
public string GetThemeUrl(string theme)
{
Theme temp = (Theme)Enum.Parse(typeof(Theme), theme);
this.Session["Coolite.Theme"] = temp;
return (temp == Coolite.Ext.Web.Theme.Default) ? "Default" : this.ScriptManager1.GetThemeUrl(temp);
}
protected void GetExamplesNodes(object sender, NodeLoadEventArgs e)
{
Coolite.Ext.Web.TreeNodeCollection treeNodes = new Coolite.Ext.Web.TreeNodeCollection();
System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
string strFileName = HttpContext.Current.Server.MapPath("XMLFile.xml");
doc.Load(strFileName);
System.Xml.XmlNodeList nodes = doc.GetElementsByTagName("siteMapNode");
for (int i = 0; i < nodes.Count; i++)
{
string firstNodeText = nodes[i].Attributes["title"].Value;
Coolite.Ext.Web.TreeNode tn = new Coolite.Ext.Web.TreeNode(firstNodeText);
tn.Icon = Icon.Add;
tn.Href = "#";
tn.Cls = "treeCss";
System.Xml.XmlNode xmlPNode = (System.Xml.XmlNode)nodes[i];
foreach (System.Xml.XmlNode tnc in xmlPNode.ChildNodes)
{
Coolite.Ext.Web.TreeNode tnn = new Coolite.Ext.Web.TreeNode(tnc.Attributes["title"].Value);
tnn.Href = tnc.Attributes["url"].Value;
tnn.HrefTarget = "ExampleTabs";
tnn.Leaf = true;
tnn.NodeID = "";
tnn.Cls = "treeCss";
tnn.Text = tnc.Attributes["title"].Value;
tnn.Icon = Icon.UserBrown;//
tnn.Qtip = tnc.Attributes["description"].Value;
tn.Nodes.Add(tnn);
}
treeNodes.Add(tn);
}
e.Nodes = treeNodes;
}
}
XML文件配置如下：
代码
<?xml version="1.0" encoding="utf-8" ?>
<DocumentElement>
<siteMapNode title="用户管理" url="#">
<siteParent title="用户管理" description="用户管理" url="../Admin/User/UserManage.aspx" />
<siteParent title="用户添加" description="用户添加" url="../Admin/User/UserAdd.aspx" />
<siteParent title="密码修改" description="密码修改" url="../Admin/User/PwdEdit.aspx" />
</siteMapNode>
<siteMapNode title="订单表管理" url="#">
<siteParent title="订单管理" description="订单管理" url="../Admin/Order/OrderManage.aspx" />
</siteMapNode>
<siteMapNode title="商品表管理" url="#">
<siteParent title="商品管理" description="商品管理" url="../Admin/Product/ProductManage.aspx" />
<siteParent title="商品添加" description="商品添加" url="../Admin/Product/ProductAdd.aspx" />
</siteMapNode>
<siteMapNode title="正式作品表管理" url="#">
<siteParent title="正式作品表管理" description="正式作品表管理" url="../Admin/Works/ZSWorksManage.aspx" />
<siteParent title="正式作品表添加" description="正式作品表添加" url="../Admin/Works/ZSWorksAdd.aspx" />
</siteMapNode>
<siteMapNode title="临时作品表管理" url="#">
<siteParent title="临时作品表管理" description="临时作品表管理" url="../Admin/Works/LSWorksManage.aspx" />
<siteParent title="临时作品表添加" description="临时作品表添加" url="../Admin/Works/LSWorksAdd.aspx" />
</siteMapNode>
<siteMapNode title="DTG码表管理" url="#">
<siteParent title="DTG码表管理" description="临时作品表管理" url="../Admin/DTG/DTGManage.aspx" />
<siteParent title="DTG码表添加" description="DTG码表添加" url="../Admin/DTG/DTGAdd.aspx" />
</siteMapNode>
</DocumentElement>
本文属学习笔记文章，愿与有志者共同学习交流。欢迎转载，但请在明显地位标记本文的原文连接。
作 者：郑某人
文章出处：http://www.cnblogs.com/jsonzheng
另附广告：女朋友的淘宝网店，为她做宣传，希望大家别介意，http://iyseek.taobao.com 欢迎大家逛逛，嘿嘿！
如有需要帮助，请联系MSN：zheng331773812@hotmail.com（上班时在线） QQ：331773812
欢迎大家共同交流！
作者：郑某人
出处：http://jsonzheng.cnblogs.com
欢迎转载或分享，但请务必声明文章出处。如果文章对您有帮助，希望你能推荐或关注。
