[引导贴]如何在子页面中向父页面添加Tab，如何关闭当前Tab

黑冰.cn · 发表于 2013-10-15 16:55:23

这个问题经常有人问啊问，说DEMO有吧，可总是折腾不清，我来发个简化版的。

page1.aspx，主页面，放一个工具栏，点击添加tab，打开grid.aspx页，注意标红的JS部分，必须要有。

<form id="form1" runat="server">
<ext:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server"></ext:PageManager>
<ext:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server">
<Regions>
<ext:Region ID="Region1" Margins="0 0 0 0" ShowBorder="false" Height="30px" ShowHeader="false"
Position="Top" Layout="Fit" runat="server">
<Toolbars>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="打开GRID页" OnClick="OpenGrid"></ext:Button>
</Items>
</ext:Toolbar>
</Toolbars>
</ext:Region>
<ext:Region ID="mainRegion" ShowHeader="false" Layout="Fit" Margins="0 0 0 0" Position="Center"
runat="server">
<Items>
<ext:TabStrip ID="mainTabStrip" EnableTabCloseMenu="true" ShowBorder="false" runat="server">
<Tabs>
<ext:Tab Title="首页" Layout="Fit" Icon="House" runat="server">
<Items>
<ext:ContentPanel ShowBorder="false" BodyPadding="10px" ShowHeader="false" AutoScroll="true"
CssClass="intro" runat="server">
首页
</ext:ContentPanel>
</Items>
</ext:Tab>
</Tabs>
</ext:TabStrip>
</Items>
</ext:Region>
</Regions>
</ext:RegionPanel>
</form>
<script type="text/javascript">
<font color="#ff0000"> function onReady() {
var mainTabStrip = Ext.getCmp("<%=mainTabStrip.ClientID %>");
// 公开添加示例标签页的方法
window.addExampleTab = function (id, url, text, icon, refreshWhenExist) {
// 动态添加一个标签页
// mainTabStrip：选项卡实例
// id：选项卡ID
// url: 选项卡IFrame地址
// text：选项卡标题
// icon：选项卡图标
// addTabCallback：创建选项卡前的回调函数（接受tabConfig参数）
// refreshWhenExist：添加选项卡时，如果选项卡已经存在，是否刷新内部IFrame
X.util.addMainTab(mainTabStrip, id, url, text, icon, null, refreshWhenExist);
};
window.removeActiveTab = function () {
var activeTab = mainTabStrip.getActiveTab();
mainTabStrip.removeTab(activeTab.id);
};
}</font>
</script>

复制代码

page1.aspx.cs，按钮事件，增加tab

protected void OpenGrid(object sender, EventArgs e)
{
FineUI.PageContext.RegisterStartupScript(mainTabStrip.GetAddTabReference("tabGrid3", "WebForm3.aspx", "TabGrid", true));
}

复制代码

grid.aspx页，显示一个grid列表。。请各种自备数据

<!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>
</head>
<body>
<form id="form1" runat="server">
<ext:PageManager runat="server" AutoSizePanelID="Grid1"/>
<ext:Grid runat="server" ID="Grid1"<font color="#ff0000"><b> OnRowCommand="GridRowCommand"</b></font>>
<Columns>
<ext:BoundField DataField="ID" HeaderText="ID"/>
<ext:BoundField DataField="DeptName" HeaderText="部门名称"/>
<ext:BoundField DataField="CustomerName" HeaderText="企业名称"/>
<ext:BoundField DataField="Mobile" HeaderText="手机"/>
<ext:BoundField DataField="Position" HeaderText="职位"/>
<ext:BoundField DataField="Status" HeaderText="状态"/>
<font color="#ff0000"><b> <ext:LinkButtonField TextAlign="Center" Width="30px" Icon="TabAdd" ToolTip="打开Tab1"
ColumnID="deleteField1" CommandName="OpenTab1" />
<ext:LinkButtonField TextAlign="Center" Width="30px" Icon="TabAdd" ToolTip="打开Tab2"
ColumnID="deleteField2" CommandName="OpenTab2" /></b></font>
</Columns>
</ext:Grid>
</form>
</body>
</html>

复制代码

grid.aspx.cs，在RowCommand事件中处理，判断要创建一个神马Tab

protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
Grid1.DataSource = (new Employee()).GetList();
Grid1.DataBind();
}
protected void GridRowCommand(object sender, FineUI.GridCommandEventArgs e)
{
switch (e.CommandName)
{
case "OpenTab1":
<font color="#ff0000"><b> FineUI.PageContext.RegisterStartupScript(
"parent.addExampleTab("gridTab1", "tabContent1.aspx", "LinkButton1")");</b></font>
break;
case "OpenTab2":
<font color="#ff0000"><b> FineUI.PageContext.RegisterStartupScript(
"parent.addExampleTab("gridTab2", "</b></font><b style="color: rgb(255, 0, 0);">tabContent2</b><font color="#ff0000"><b>.aspx", "LinkButton2")");</b></font>
break;
}
}

复制代码

tabContent1.aspx，演示关闭当前tab

<form id="form1" runat="server">
<ext:PageManager runat="server" />
<ext:Button ID="Button2" runat="server" Icon="Delete" OnClick="CloseCurrentTab" Text="关闭我"></ext:Button>
</form>

复制代码

tabContent1.aspx.cs，执行page1.aspx中的JS

protected void CloseCurrentTab(object sender, EventArgs e)
{
<font color="#ff0000"> PageContext.RegisterStartupScript("parent.removeActiveTab()");</font>
}

复制代码

xtb_sp · 发表于 2014-9-13 00:41:48

执行后台的关闭方法会爆js错误，请问如何解决？

黑冰.cn · 发表于 2014-9-18 09:40:10

xtb_sp 发表于 2014-9-13 00:41
执行后台的关闭方法会爆js错误，请问如何解决？

见附件演示。

xtb_sp · 发表于 2014-9-18 20:10:00

你这个是通过前台js关闭的，这个大家都知道。demo里面就有，比如这个场景：button提交表单将数据保存到数据里面，保存成功以后，然后在关闭当前这个tab。这个就会有问题了。IE11会报错。

erp8@live.cn · 发表于 2014-9-23 23:14:21

衷心感谢! ----- 黑冰.cn
大师出手,必须顶!

黑冰.cn · 发表于 2014-10-10 16:17:28

xtb_sp 发表于 2014-9-18 20:10
你这个是通过前台js关闭的，这个大家都知道。demo里面就有，比如这个场景：button提交表单将数据保存到数据 ...

了解一下FineUI的运行原理和用到的HTML元素就知道，当你打开了多层窗体后，要用top.方法名来执行最外层页面的方法。

世界没有真情 · 发表于 2015-2-4 20:14:14

求指教，开原版，专业版，调用__dopostback 页面为什么没有闪。。。能给个思路我想想吗，想了好久了

sanshi · 发表于 2015-2-5 21:55:30

世界没有真情发表于 2015-2-4 20:14
求指教，开原版，专业版，调用__dopostback 页面为什么没有闪。。。能给个思路我想想吗，想了好久了
...

下载开源版全部源代码，查找如下 JavaScript 函数（可以看到FineUI重写了这个函数）：

hookPostBack: function () {
if (typeof (__doPostBack) != 'undefined') {
__doPostBack = f__doPostBack;
}
}

复制代码

xiaowengang · 发表于 2016-8-29 17:34:18

我在首页加个下拉框，在下拉框里面改变值的时候，实现右键鼠标的关闭所有标签的那种功能，这个怎么实现？？

飞↑草 · 发表于 2016-9-19 10:18:35

xtb_sp 发表于 2014-9-18 20:10
你这个是通过前台js关闭的，这个大家都知道。demo里面就有，比如这个场景：button提交表单将数据保存到数据 ...

不会报错吧，执行完保存，调用前端的js函数就可以了

		自动登录	找回密码
密码			立即注册

[引导贴]如何在子页面中向父页面添加Tab，如何关闭当前Tab

本帖子中包含更多资源