I use Control Viewport to divide Page WebForm4 into 3 parts: the up-district, the left-district (which is divided from the part under the up-district), and the middle-district (which is also divided from the part under the up-district). Then I place a TabPanel in the middle-district. And finally I put a webpage (whose address is WebForm13) into TabPanel.
The code of WebForm4 is as follows:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication2.WebForm4" %>

<!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>

<script language="javascript">

var addTab = function(url, title, fresh, addAnother) {
var tabPanel = Ext.getCmp('TabPanel1');
var tab = tabPanel.getComponent(url);
if (!tab || addAnother) {
var tabId = url;

var p = new Ext.Panel({
tabTip: title,
id: tabId,
title: title,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode: "iframe",
maskMsg: "..."
}
});

tab = tabPanel.add(p);
fresh = false;
}

var currentTab = tabPanel.getActiveTab();
tab.opener = currentTab;
tabPanel.setActiveTab(tab);
if (fresh) {
tab.reload();
}
}

function CloseTab(tabId) {
var tabPanel = Ext.getCmp('TabPanel1');
var tab;
if (tabId) {
tab = tabPanel.getComponent(tabId);
}
else {
tab = tabPanel.getActiveTab();
}
if (tab)
tabPanel.closeTab(tab);
}
function GetActiveTab() {
var tabPanel = Ext.getCmp('TabPanel1');
return tabPanel.getActiveTab();
}
</script>

</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
<Items>
<ext:BorderLayout runat="server">
<North>
<ext:Panel runat="server" Height="80" BodyCssClass="Header" Layout="ColumnLayout"
Border="false">
<Items>
</Items>
</ext:Panel>
</North>
<West Margins-Top="14">
<ext:Panel Region="West" runat="server" Width="180" ID="LeftPanel">
<Items>
</Items>
</ext:Panel>
</West>
<Center>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" EnableTabScroll="true"
MinTabWidth="85" Plain="true">
<Items>
<ext:panel id="Panel2" title="Main" icon="House" runat="server" closable="false">
<AutoLoad Url="WebForm13.aspx" Mode="IFrame" ShowMask="true" MaskMsg="...">
</AutoLoad>
</ext:panel>
</Items>
<Plugins>
<ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
</Plugins>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>


There is a control GridPanel in WebForm13. And I add 2 data to GridPanel in its Initialization.
The code of WebForm13 is as follows:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm13.aspx.cs" Inherits="WebApplication2.WebForm13" %>
<%@ Import Namespace="System.Collections.Generic"%>

<!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>

<script type="text/javascript">

var EditTab = function(href, title) {
window.parent.addTab(href, title, true, false);
}

</script>

<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
GridStore.DataSource = Data;
GridStore.DataBind();
}
private List<Temp> Data
{
get
{
var array = new List<Temp>();
array.Add(new Temp() { Age = 18, Name = "Jim" });
array.Add(new Temp() { Age = 19, Name = "Tom" });
return array;
}
}

public class Temp
{
public string Name { get; set; }
public int Age { get; set; }
}
</script>

</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel runat="server" Height="100">
<Store>
<ext:Store runat="server" ID="GridStore">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Age" Type="Int">
</ext:RecordField>
<ext:RecordField Name="Name" Type="String">
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:CommandColumn ButtonAlign="Center">
<Commands>
<ext:GridCommand CommandName="Edit" Icon="Pencil" ToolTip-Text="aaa">
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:TemplateColumn Header="Name" Wrap="true" ColumnID="Name" Sortable="false" Width="200">
<Template runat="server">
<Html>
<a href='javascript:void(0);' onclick="EditTab('WebForm14.aspx','Title')">{Name} </a>
</Html>
</Template>
</ext:TemplateColumn>
<ext:Column Header="Age" DataIndex="Age" Sortable="false">
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<Command Handler="EditTab('WebForm14.aspx','Title')" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>


The result is as follows:
Click image for larger version.  Name: 1.JPG  Views: 82  Size: 8.4 KB  ID: 3094

In my design, users can open another Tab when they click the pencil icon and user can see some tips when the cursor is over the pencil icon. So I edit this to accomplish this function:
<ext:GridCommand CommandName="Edit" Icon="Pencil" ToolTip-Text="aaa">
</ext:GridCommand>


Here comes the result:
When the cursor is over the pencil icon, I can see the tip (?aaa?). But when I click this icon, there comes the JS error? Invalid Parameter?.
When I delete the GridCommand?s Attribute (ToolTip-Text="aaa"), the error disappears. I would like to know why.
Also I need to know how to show the trip when the cursor is over the pencil icon without an error. Thank you!