Hello
The tab content in our case can be:
- an asp page within the same web application
- a page of an external web site
In both cases the tab is opened creating it in code behind and assigning to it the url.
In the example provided below, that is as simple as possible to reproduce our scenario, there are two tabs pointing to
external web sites.
---------------------------------------------------------------------------------------
Default.aspx
---------------------------------------------------------------------------------------
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
<!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>
<script type="text/javascript">
window.name = "SISA.ApplicationCenter";
</script>
<%-- Navigation tree --%>
<script type="text/javascript">
var selectedNavigationNodeId = null;
function navigationTreePanelNodeOnClick(node) {
if (node != null)
selectedNavigationNodeId = node.id;
if (selectedNavigationNodeId != null) {
X.NavigationTreePanelNode_Click(selectedNavigationNodeId, {
success: function (result) {
}
});
}
}
</script>
<%-- tabs --%>
<script type="text/javascript">
function closeTabButtonOnClick(tab) {
X.CloseTab_Click(tab.id, {
success: function (result) {
}
});
}
function closeActiveTabButtonOnClick(tabId) {
X.CloseTab_Click(tabId, {
success: function (result) {
}
});
}
function reloadActiveTabButtonOnClick(tabId) {
X.ReloadActiveTab_Click(tabId, {
success: function (result) {
}
});
}
var closeCurrentTabFromPlugin = function () {
alert("call closeCurrentTabFromPlugin");
X.CloseCurrentTabFromPlugin({
success: function (result) {
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="true" MinWidth="300" Split="true">
<ext:Panel ID="Panel1" runat="server" Layout="Fit" Width="300">
<Items>
<ext:TreePanel ID="NavigationTreePanel" runat="server" RootVisible="false" AutoScroll="true">
<Root>
<ext:TreeNode NodeID="root">
<Nodes>
<ext:TreeNode NodeID="extnet" Text="Ext NET" />
<ext:TreeNode NodeID="sisa" Text="Sisa" />
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<Click Fn="navigationTreePanelNodeOnClick" />
</Listeners>
</ext:TreePanel>
</Items>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel2" runat="server" Layout="Fit">
<Items>
<ext:BorderLayout ID="BorderLayout2" runat="server">
<North>
<ext:Toolbar ID="Toolbar" runat="server" Height="30">
<Items>
<ext:Button ID="ReloadActiveTabButton" runat="server" Icon="Reload" Text="Reload">
<Listeners>
<Click Handler="reloadActiveTabButtonOnClick(#{TabbedPanel}.getActiveTab().id);" />
</Listeners>
</ext:Button>
<ext:Button ID="CloseActiveTabButton" runat="server" Icon="Decline" Text="Close">
<Listeners>
<Click Handler="closeActiveTabButtonOnClick(#{TabbedPanel}.getActiveTab().id);" />
</Listeners>
</ext:Button>
<ext:Button ID="OpenWindowButton" runat="server" Icon="Wand" Text="Open Window">
<DirectEvents>
<Click OnEvent="OpenWindowButton_Click"/>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</North>
<Center>
<ext:Panel ID="CenterPanel" runat="server" Layout="Fit">
<Items>
<ext:TabPanel ID="TabbedPanel" runat="server" AutoFocus="true" IDMode="Explicit"
ResizeTabs="true" Border="false" EnableTabScroll="true" AutoWidth="true">
</ext:TabPanel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
<ext:Window runat="server" Hidden="false" ID="Window1" >
<Items>
<ext:Label ID="Label1" runat="server" Text="A window"></ext:Label>
</Items>
</ext:Window>
</div>
</form>
</body>
</html>
---------------------------------------------------------------------------------------
Default.aspx.vb
---------------------------------------------------------------------------------------
Imports System.Net
Imports System.IO
Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
SetupTabPanel()
End Sub
#Region "Tree"
<Ext.Net.DirectMethod()> _
Public Sub NavigationTreePanelNode_Click(ByVal nodeId As String)
Dim _url As String
Dim _title As String = nodeId
If nodeId = "extnet" Then
_url = "http://www.ext.net/"
Else
_url = "http://www.sisa.ch/"
End If
OpenTab(nodeId, _url, _title)
End Sub
#End Region
#Region "Tab handling"
Private Sub SetupTabPanel()
'NOTE: add tabs stored in session
For Each _tab As Ext.Net.Panel In GetTabList()
TabbedPanel.Items.Add(_tab)
Next
Dim _tabIdParameter As New Ext.Net.Parameter("TabId", _
"#{" + TabbedPanel.ID + "}.getActiveTab().id", _
Ext.Net.ParameterMode.Raw, True)
TabbedPanel.DirectEvents.TabChange.ExtraParams.Add(_tabIdParameter)
RemoveHandler TabbedPanel.DirectEvents.TabChange.Event, AddressOf TabPanel_TabChange
AddHandler TabbedPanel.DirectEvents.TabChange.Event, AddressOf TabPanel_TabChange
End Sub
<Ext.Net.DirectMethod()> _
Protected Sub TabPanel_TabChange(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
'NOTE: remove leading and trailing "
Dim _tabId As String = e.ExtraParams("TabId").Trim(CChar(""""))
Dim _tab As Ext.Net.Panel = GetTabById(_tabId)
UpdateCurrentTabInfo(_tab)
End Sub
Private Function AddTabIdParam(ByVal _url As String, _tabId As String) As String
Return _url + "?tabId=" + _tabId
End Function
Private Sub UpdateCurrentTabInfo(ByVal _tab As Ext.Net.Panel)
If _tab IsNot Nothing Then
Session("CurrentTab") = _tab
End If
End Sub
#Region "Open Tab"
Private Sub OpenTab(_id As String, _url As String, _title As String)
Dim _tab As Ext.Net.Panel = Nothing
_tab = GetTabById(_id)
If _tab Is Nothing Then
_tab = New Ext.Net.Panel
_tab.ID = _id
_tab.Title = _title
_tab.AutoLoad.Url = AddTabIdParam(_url, _id)
_tab.AutoFocus = True
_tab.AutoLoad.ShowMask = True
_tab.AutoLoad.MaskMsg = "Loading..."
_tab.AutoLoad.Mode = Ext.Net.LoadMode.IFrame
'_tab.AutoLoad.Mode = Ext.Net.LoadMode.Merge
_tab.AutoLoad.NoCache = True
_tab.AutoRender = True
_tab.AutoScroll = True
_tab.AutoShow = True
_tab.Closable = True
_tab.Listeners.Close.Fn = "closeTabButtonOnClick"
_tab.AddTo(TabbedPanel)
_tab.Render(TabbedPanel, Ext.Net.RenderMode.AddTo)
RegisterTab(_tab)
End If
TabbedPanel.SetActiveTab(_tab)
_tab.LoadContent()
UpdateCurrentTabInfo(_tab)
End Sub
#End Region
#Region "Close Tab"
<Ext.Net.DirectMethod()>
Public Sub CloseTab_Click(ByVal tabId As String)
CloseTabById(tabId)
End Sub
<Ext.Net.DirectMethod()> _
Public Sub CloseCurrentTabFromPlugin()
'FIXME extension
Dim _tab As Ext.Net.Panel = CType(Session("CurrentTab"), Ext.Net.Panel)
If _tab IsNot Nothing Then
CloseTab(_tab)
End If
End Sub
Private Sub CloseTabById(ByVal _tabId As String)
Dim _tab As Ext.Net.Panel = GetTabById(_tabId)
If _tab IsNot Nothing Then
CloseTab(_tab)
End If
End Sub
Private Sub CloseTab(ByVal _tab As Ext.Net.Panel)
_tab.Hide()
TabbedPanel.Remove(_tab)
If GetTabByIdDictionary.ContainsKey(_tab.ID) Then
GetTabByIdDictionary.Remove(_tab.ID)
GetTabList.Remove(_tab)
End If
TabbedPanel.Reload()
End Sub
Private Function AddCloseTabParam(ByVal _url As String) As String
Dim queryString As String = _url.Substring(_url.IndexOf("?"))
Dim _urlWithoutQueryString As String = _url.Substring(0, _url.IndexOf("?"))
Dim params As NameValueCollection = HttpUtility.ParseQueryString(queryString)
params.Remove("closeTab")
params.Add("closeTab", "true")
queryString = ""
For Each key As String In params.AllKeys
If queryString.Length > 0 Then
queryString = queryString + "&"
End If
queryString = queryString + key + "=" + params.Get(key)
Next
Return _urlWithoutQueryString + "?" + queryString
End Function
#End Region
#Region "Reload Tab"
<Ext.Net.DirectMethod()> _
Public Sub ReloadActiveTab_Click(ByVal tabId As String)
Dim _tab As Ext.Net.Panel = GetTabById(tabId)
If _tab IsNot Nothing Then
_tab.LoadContent()
End If
End Sub
#End Region
#Region "Session Stored Tab List"
Private Function GetTabList() As List(Of Ext.Net.Panel)
Dim _tabList As List(Of Ext.Net.Panel) = _
CType(Session("TabList"), List(Of Ext.Net.Panel))
If _tabList Is Nothing Then
_tabList = New List(Of Ext.Net.Panel)
Session("TabList") = _tabList
End If
Return _tabList
End Function
Private Function GetTabById(ByVal _tabId As String) As Ext.Net.Panel
If GetTabByIdDictionary.ContainsKey(_tabId) Then
Return GetTabByIdDictionary(_tabId)
End If
Return Nothing
End Function
Private Function GetTabByIdDictionary() As Dictionary(Of String, Ext.Net.Panel)
Dim _tabDictionary As Dictionary(Of String, Ext.Net.Panel) = _
CType(Session("TabByIdDictionary"), Dictionary(Of String, Ext.Net.Panel))
If _tabDictionary Is Nothing Then
_tabDictionary = New Dictionary(Of String, Ext.Net.Panel)
Session("TabByIdDictionary") = _tabDictionary
End If
Return _tabDictionary
End Function
Private Sub RegisterTab(ByVal _tab As Ext.Net.Panel)
If Not GetTabByIdDictionary.ContainsKey(_tab.ID) Then
GetTabByIdDictionary.Add(_tab.ID, _tab)
GetTabList.Add(_tab)
End If
End Sub
#End Region
#End Region
#Region "Open window"
<Ext.Net.DirectMethod()> _
Public Sub OpenWindowButton_Click(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
Window1.Show()
End Sub
#End Region
End Class
---------------------------------------------------------------------------------------
Web.config
---------------------------------------------------------------------------------------
<?xml version="1.0"?>
<configuration>
<configSections>
<!-- Add "extnet" configuration section to Web.config -->
<section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false"/>
</configSections>
<system.web>
<compilation debug="true" strict="false" explicit="true" targetFramework="4.0" />
<pages>
<controls>
<add tagPrefix="ext" assembly="Ext.Net" namespace="Ext.Net"/>
</controls>
</pages>
<httpHandlers>
<add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
</httpHandlers>
<httpModules>
<add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</httpModules>
</system.web>
<system.webServer>
<modules>
<add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</modules>
<handlers>
<add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler"/>
</handlers>
<defaultDocument>
<files>
<remove value="default.aspx" />
<remove value="iisstart.htm" />
<remove value="index.html" />
<remove value="index.htm" />
<remove value="Default.asp" />
<remove value="Default.htm" />
<add value="AppCent.aspx" />
</files>
</defaultDocument>
<validation validateIntegratedModeConfiguration="false"/>
</system.webServer>
</configuration>