<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Version=3.1.0.29122, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
//var paragraph = Ext.get(e.target);
//paragraph.highlight();
//Ext.MessageBox.show({
// title: 'Paragraph Clicked',
// msg: paragraph.dom.innerHTML,
// width: 400,
// buttons: Ext.MessageBox.OK,
// animEl: paragraph
//});
var addTab = function (tabPanel, record) {
var tab = tabPanel.getComponent(record.getId());
if (!tab) {
tab = tabPanel.add({
id: record.getId(),
title: record.data.text,
closable: true,
loader: {
url: "http://www.baidu.com",
mode: "iframe",
loadMask: {
showMask: true,
msg: "Loading " + record.data.text + "..."
}
},
autoScroll: true
});
}
tabPanel.setActiveTab(tab);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Viewport ID="viewport1" runat="server" Layout="border">
<Items>
<ext:Panel
runat="server"
Region="North"
Height="80"
Html="aa"
Border="true" >
<items>
<ext:Label runat="server">adsafsdfasfsfsadfsfasdfasd</ext:Label>
</items>
</ext:Panel>
<ext:Panel
runat="server"
Title="菜单"
Region="West"
Layout="AccordionLayout"
Width="225"
MinWidth="225"
MaxWidth="400"
Split="true"
Collapsible="true">
<Tools>
<ext:Tool Type="Refresh" Handler="Ext.Msg.alert('Message','Refresh Tool Clicked!');" />
</Tools>
<Items>
<ext:TreePanel runat="server" Title="The Menu One" RootVisible="false">
<Root>
<ext:Node Text="Root">
<Children>
<ext:Node Text="Friends" Expanded="true">
<Children>
<ext:Node Text="Jack" Icon="User" Leaf="True" />
<ext:Node Text="Brian" Icon="FolderWrench" Leaf="True" />
<ext:Node Text="Jon" Icon="User" Leaf="True" />
<ext:Node Text="Tim" Icon="User" Leaf="True" />
<ext:Node Text="Nige" Icon="User" Leaf="True" />
<ext:Node Text="Fred" Icon="User" Leaf="True" />
<ext:Node Text="Bob" Icon="User" Leaf="True" />
</Children>
</ext:Node>
<ext:Node Text="Family" Expanded="false">
<Children>
<ext:Node Text="Kelly" Icon="UserFemale" Leaf="True" />
<ext:Node Text="Sara" Icon="UserFemale" Leaf="True" />
<ext:Node Text="Zack" Icon="UserGreen" Leaf="True" />
<ext:Node Text="John" Icon="UserGreen" Leaf="True" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Listeners>
<ItemClick Handler="if (record.data.text) { e.stopEvent(); addTab(#{TabPanel1}, record); }" />
</Listeners>
</ext:TreePanel>
<ext:TreePanel runat="server" Title="The Menu Two" RootVisible="false">
<Root>
<ext:Node Text="Root">
<Children>
<ext:Node Text="Friends" Expanded="true">
<Children>
<ext:Node Text="Jack" Icon="User" Leaf="True" />
<ext:Node Text="Brian" Icon="User" Leaf="True" />
<ext:Node Text="Jon" Icon="User" Leaf="True" />
<ext:Node Text="Tim" Icon="User" Leaf="True" />
<ext:Node Text="Nige" Icon="User" Leaf="True" />
<ext:Node Text="Fred" Icon="User" Leaf="True" />
<ext:Node Text="Bob" Icon="User" Leaf="True" />
</Children>
</ext:Node>
<ext:Node Text="Family" Expanded="false">
<Children>
<ext:Node Text="Kelly" Icon="UserFemale" Leaf="True" />
<ext:Node Text="Sara" Icon="UserFemale" Leaf="True" />
<ext:Node Text="Zack" Icon="UserGreen" Leaf="True" />
<ext:Node Text="John" Icon="UserGreen" Leaf="True" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
</Items>
</ext:Panel>
<ext:TabPanel runat="server" Region="Center" ID="TabPanel1">
<TabBar>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Icon="Reload" Border="false">
<Listeners>
<Click Handler="Ext.Msg.alert('Refresh', 'Here is Refresh message');" />
</Listeners>
</ext:Button>
</TabBar>
<Items>
<ext:Panel
runat="server"
Title="主页"
Border="false"
BodyPadding="6"
Html="<h1>Viewport with BorderLayout</h1>" />
</Items>
</ext:TabPanel>
<ext:Panel
runat="server"
Title="East"
Region="East"
Collapsible="true"
Collapsed="true"
Split="true"
MinWidth="225"
Width="225"
Layout="Fit">
<Items>
<ext:TabPanel
runat="server"
ActiveTabIndex="1"
TabPosition="Bottom"
Border="false">
<Items>
<ext:Panel
runat="server"
Title="Tab 1"
Border="false"
BodyPadding="6"
Html="East Tab 1" />
<ext:Panel
runat="server"
Title="Tab 2"
Closable="true"
Border="false"
BodyPadding="6"
Html="East Tab 2" />
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
<ext:Panel
runat="server"
Region="South"
Title=" "
Height="7"
Border="true" />
</Items>
</ext:Viewport>
</form>
</body>
</html>
原文地址：http://blog.csdn.net/mrtraum/article/details/44921311
