使用 Ext.Net TreePanel,TabPanel控件 布局
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" 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 id="Head1" runat="server">
<title></title>
<link href="http://www.cnblogs.com/http://www.cnblogs.com/resources/css/examples.css" rel="stylesheet" type="text/css" />
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
SiteMapNode siteNode = SiteMap.RootNode;
Ext.Net.TreeNode root = this.CreateNode(siteNode);
TreePanel1.Root.Add(root);
TreePanel1.ExpandAll();
}
//dynamic node creation
private TreeNodeBase CreateNodeWithOutChildren(SiteMapNode siteMapNode)
{
TreeNodeBase treeNode;
if (siteMapNode.ChildNodes != null && siteMapNode.ChildNodes.Count>0)
{
treeNode = new AsyncTreeNode();
}
else
{
treeNode = new Ext.Net.TreeNode();
treeNode.Leaf = true;
}
if (!string.IsNullOrEmpty(siteMapNode.Url))
{
treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);
}
treeNode.NodeID = siteMapNode.Key;
treeNode.Text = siteMapNode.Title;
treeNode.Qtip = siteMapNode.Description;
return treeNode;
}
//static node creation with children
private Ext.Net.TreeNode CreateNode(SiteMapNode siteMapNode)
{
Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();
if (!string.IsNullOrEmpty(siteMapNode.Url))
{
treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);
}
treeNode.NodeID = siteMapNode.Key;
treeNode.Text = siteMapNode.Title;
treeNode.Qtip = siteMapNode.Description;
SiteMapNodeCollection children = siteMapNode.ChildNodes;
if (children != null && children.Count > 0)
{
foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
{
treeNode.Nodes.Add(this.CreateNode(mapNode));
}
}
return treeNode;
}
</script>
<script type="text/javascript">
var loadPage = function (tabPanel, node) {
var tab = tabPanel.getItem(node.id);
if (!tab) {
tab = tabPanel.add({
id: node.id,
title: node.text,
closable: true,
autoLoad: {
showMask: true,
url: node.attributes.href,
mode: "iframe",
maskMsg: "Loading " + node.attributes.href + "..."
},
listeners: {
update: {
fn: function (tab, cfg) {
cfg.iframe.setHeight(cfg.iframe.getSize().height);
},
scope: this,
single: true
}
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="true"
Split="true"
MinWidth="175"
MaxWidth="400"
MarginsSummary="5 0 5 5"
CMarginsSummary="5 5 5 5">
<ext:TreePanel
ID="TreePanel1"
runat="server"
Width="300"
Title=""
Icon="ChartOrganisation">
<Listeners>
<Click Handler="if (node.attributes.href) { e.stopEvent(); loadPage(#{Pages}, node); }" />
</Listeners>
</ext:TreePanel>
</West>
<Center MarginsSummary="0 0 0 0">
<ext:TabPanel ID="Pages" runat="server" EnableTabScroll="true" />
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Web.sitemap
<?xml version="1.0" encoding="utf-8"?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode title="一级菜单">
<siteMapNode title="二级菜单">
<siteMapNode title="页面" description="页面" url="Default.aspx" />
</siteMapNode>
</siteMapNode>
</siteMap>
<Listeners>
<Click Handler="if (node.attributes.href) { e.stopEvent(); loadPage(#{Pages}, node); }" />
</Listeners>
当点击树的节点时，如果当前节点可以导航， 就添加或激活一个tab页，
两个日期控件范围
View Code
<
ext:DateField
ID
="Start_Date"
runat
="server"
Width
="250"
FieldLabel
="有效期"
Format
="yyyy-MM-dd"
Vtype
="daterange"
>
<
Listeners
>
<
Render
Handler
="this.endDateField ='#{End_Date}'"
/>
</
Listeners
>
</
ext:DateField
>
<
ext:DateField
ID
="End_Date"
runat
="server"
Width
="250"
FieldLabel
="至"
Format
="yyyy-MM-dd"
Vtype
="daterange"
>
<
Listeners
>
<
Render
Handler
="this.endDateField ='#{Start_Date}'"
/>
</
Listeners
>
</
ext:DateField
>