Nov 16, 2011, 1:02 PM
[CLOSED] Tab Panel Tab Activate Listeners issue
Hi
I have implemented tab listeners handler for all tabs in tab panel. In my scenario I have to show specific button and specific tab based on selection from parent window. In parent window I have six buttons for add and edit specific item. If I click on add button the window is showing properly, but if I click on edit button, the popup window is showing required button initially and then activate listener activating, then hiding required button (Update) and showing Add button. If I am not implemented activate listener all required buttons showing properly based on selection from parent, but in popup window if I want to navigate to other tab the controls are not update automatically. Please check the code so that you can understand my issue.
Parent form...
I have implemented tab listeners handler for all tabs in tab panel. In my scenario I have to show specific button and specific tab based on selection from parent window. In parent window I have six buttons for add and edit specific item. If I click on add button the window is showing properly, but if I click on edit button, the popup window is showing required button initially and then activate listener activating, then hiding required button (Update) and showing Add button. If I am not implemented activate listener all required buttons showing properly based on selection from parent, but in popup window if I want to navigate to other tab the controls are not update automatically. Please check the code so that you can understand my issue.
Parent form...
<%@ Page Language="VB" %>
<%@ 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">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
var ShowCommonWindow = function (opt) {
var windowConfig = {
id: "WindowTestCommon",
height: 540,
width: 720,
hidden: false,
closeAction: "hide",
buttonAlign: "center",
iconCls: "icon-pagewhitecode",
buttons: [
{
id: "btnJAddText",
text: "Add Text",
iconCls: "icon-add",
hidden: true,
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnDelConditions.fireEvent('click');
}
}
}
},
{
id: "btnJEditText",
text: "Update Text",
iconCls: "icon-disk",
hidden: true,
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnAddNew.fireEvent('click');
}
}
}
},
{
id: "btnJAddLabel",
text: "Add Label",
iconCls: "icon-add",
hidden: true,
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnUpdate.fireEvent('click');
}
}
}
},
{
id: "btnJEditLabel",
text: "Update Label",
iconCls: "icon-disk",
hidden: true,
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnCommonRefresh.fireEvent('click');
}
}
}
},
{
id: "btnJAddComment",
text: "Add Comment",
iconCls: "icon-add",
hidden: true,
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnDeleteDocs.fireEvent('click');
}
}
}
},
{
id: "btnJEditComment",
text: "Update Comment",
iconCls: "icon-disk",
hidden: true,
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnUploadDocument.fireEvent('click');
}
}
}
},
{
id: "btnClose",
text: "Close",
listeners: {
click: {
fn: function (el, e) {
parent.parent.Ext.getCmp('WindowTestCommon').hide();
}
}
}
}
],
autoLoad: {
url: "TabTesting.aspx?" + new Date().getTime(),
nocache: true,
mode: "iframe",
showMask: true,
triggerEvent: "show",
reloadOnEvent: true,
params: {
DEFAULT_TO_OPEN: opt
}
}
}
renderWindow(windowConfig);
}
var renderWindow = function (windowConfig) {
var win = Ext.getCmp(windowConfig.id);
if (!win) {
new Ext.Window(windowConfig);
} else {
win.close();
new Ext.Window(windowConfig);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="resMngr" runat="server" />
<ext:Button ID="btnAddText" runat="server" Text="Add Text" Width="120">
<Listeners>
<Click Handler="ShowCommonWindow('AddText')" />
</Listeners>
</ext:Button>
<ext:Button ID="btnEditText" runat="server" Text="Edit Text" Width="120">
<Listeners>
<Click Handler="ShowCommonWindow('EditText')" />
</Listeners>
</ext:Button>
<ext:Button ID="btnAddLabel" runat="server" Text="Add Label" Width="120">
<Listeners>
<Click Handler="ShowCommonWindow('AddLabel')" />
</Listeners>
</ext:Button>
<ext:Button ID="btnEditLabel" runat="server" Text="Edit Label" Width="120">
<Listeners>
<Click Handler="ShowCommonWindow('EditLabel')" />
</Listeners>
</ext:Button>
<ext:Button ID="btnAddComment" runat="server" Text="Add Comment" Width="120">
<Listeners>
<Click Handler="ShowCommonWindow('AddComment')" />
</Listeners>
</ext:Button>
<ext:Button ID="btnEditComment" runat="server" Text="Edit Comment" Width="120">
<Listeners>
<Click Handler="ShowCommonWindow('EditComment')" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
The child window code ...<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TabTesting.aspx.vb" Inherits="Testing_TabTesting" %>
<%@ 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 runat="server">
<title></title>
<script language="javascript" type="text/javascript">
var ControlsToShow = function (controlid1) {
parent.parent.parent.Ext.getCmp('btnJAddText').hide();
parent.parent.parent.Ext.getCmp('btnJEditText').hide();
parent.parent.parent.Ext.getCmp('btnJAddLabel').hide();
parent.parent.parent.Ext.getCmp('btnJEditLabel').hide();
parent.parent.parent.Ext.getCmp('btnJAddComment').hide();
parent.parent.parent.Ext.getCmp('btnJEditComment').hide();
if (controlid1.length > 0)
parent.parent.parent.Ext.getCmp(controlid1).show();
}
</script>
</head>
<body id="bodyload" runat="server">
<form id="form1" runat="server">
<ext:ResourceManager ID="resMngr" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:TabPanel ID="pnlbackground" runat="server" Region="Center" Border="false">
<Items>
<ext:Panel ID="pnlText" Title="Text Type" runat="server" BodyStyle="background-color:#ffffff"
Border="false" Layout="BorderLayout">
<TopBar>
<ext:Toolbar ID="tbLS" runat="server">
<Items>
<ext:Button ID="btnAddText" runat="server" Text="Add Text" Icon="Add" IconAlign="Left">
<Listeners>
<Click Handler="ControlsToShow('btnJAddText')" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator />
<ext:Button ID="btnEditText" runat="server" Text="Edit Text" Icon="ApplicationEdit"
IconAlign="Left">
<Listeners>
<Click Handler="ControlsToShow('btnJEditText')" />
</Listeners>
</ext:Button>
<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="pnlTextCenter" runat="server" Region="Center">
</ext:Panel>
</Items>
<Listeners>
<Activate Handler="ControlsToShow('btnJAddText')" />
</Listeners>
</ext:Panel>
<ext:Panel ID="pnlLabel" Title="Label Type" runat="server" BodyStyle="background-color:#ffffff"
Border="false" Layout="BorderLayout">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnAddLabel" runat="server" Text="Add Label" Icon="Add" IconAlign="Left">
<Listeners>
<Click Handler="ControlsToShow('btnJAddLabel')" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator />
<ext:Button ID="btnEditLabel" runat="server" Text="Edit Label" Icon="ApplicationEdit"
IconAlign="Left">
<Listeners>
<Click Handler="ControlsToShow('btnJEditLabel')" />
</Listeners>
</ext:Button>
<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="pnlLabelCenter" runat="server" Region="Center">
</ext:Panel>
</Items>
<Listeners>
<Activate Handler="ControlsToShow('btnJAddLabel')" />
</Listeners>
</ext:Panel>
<ext:Panel ID="pnlComment" Title="Comment Type" runat="server" BodyStyle="background-color:#ffffff"
Border="false" Layout="BorderLayout">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="btnAddComment" runat="server" Text="Add Text" Icon="Add" IconAlign="Left">
<Listeners>
<Click Handler="ControlsToShow('btnJAddComment')" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator />
<ext:Button ID="btnEditComment" runat="server" Text="Edit Text" Icon="ApplicationEdit"
IconAlign="Left">
<Listeners>
<Click Handler="ControlsToShow('btnJEditComment')" />
</Listeners>
</ext:Button>
<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="Panel4" runat="server" Region="Center">
</ext:Panel>
</Items>
<Listeners>
<Activate Handler="ControlsToShow('btnJAddComment')" />
</Listeners>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
the code behind...Imports Ext.Net
Partial Class Testing_TabTesting
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim controlToShow As String = ""
If Not Ext.Net.X.IsAjaxRequest Then
If Not Me.Request("DEFAULT_TO_OPEN") Is Nothing Then
Select Case Me.Request("DEFAULT_TO_OPEN")
Case "AddText"
controlToShow = "btnJAddText"
pnlbackground.ActiveIndex = 0
Case "EditText"
controlToShow = "btnJEditText"
pnlbackground.ActiveIndex = 0
Case "AddLabel"
controlToShow = "btnJAddLabel"
pnlbackground.ActiveIndex = 1
Case "EditLabel"
controlToShow = "btnJEditLabel"
pnlbackground.ActiveIndex = 1
Case "AddComment"
controlToShow = "btnJAddComment"
pnlbackground.ActiveIndex = 2
Case "EditComment"
controlToShow = "btnJEditComment"
pnlbackground.ActiveIndex = 2
End Select
End If
bodyload.Attributes.Add("onload", "javascript:ControlsToShow('" & controlToShow & "')")
End If
End Sub
End Class
Last edited by Daniil; Nov 18, 2011 at 5:39 PM.
Reason: [CLOSED]