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 > 】 & nbsp; |& nbsp;
< img src = " ../App_Themes/ThemeAdmin/Images/logout.gif " alt = " 换一个用户登录 " />< asp:LinkButton ID = " btnZhuXiao " runat = " server " > 注销系统 </ asp:LinkButton >& nbsp; |& nbsp;
< 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; " > 版权归@连环创意所有 & nbsp; & nbsp;
开发单位：北京华软英创工作室 & nbsp; & nbsp;网址： < a href = " Http://www.dzbsoft.com " target = " _blank " > Http: // www.dzbsoft.com</a>&nbsp;&nbsp;联系手机：13911778384&nbsp;&nbsp;Email：dengzebo@163.com&nbsp;&nbsp;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

欢迎大家共同交流！

转载于:https://www.cnblogs.com/jsonzheng/archive/2010/08/28/1811107.html