Adding Tabs With OnActivate Listener

  1. #1

    Adding Tabs With OnActivate Listener



    Hi,

    I'm using the below script to add new tabs. Each tab loads a different aspx file and while activating the tab; I want to call the click event of the btnRefresh button in that page.

    Using this code, I can't get the "button exists" message box. What would be the correct version?

        <script type="text/javascript">
            function addTab(tabPanel, id, url, name) {
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: name,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading...'
                        }
                    });
                    tab.on('activate', function() {
                        var btn = &#100;ocument.getElementById('btnRefresh');
                        if (btn) {
                            Ext.Msg.alert('button exists');
                            btn.fireEvent('click');
                        }
                    }, this);
                }
                tabPanel.setActiveTab(tab);
            }
        </script>
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MainPositionDefinition.aspx.cs"
        Inherits="Forms_MainPositionDefinition" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>
        <link rel="Stylesheet" type="text/css" href="\..\Project.css" />
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
    </head>
    <body>
        <form id="frmMainPositionDefinition" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
        <ext:Store ID="Store1" runat="server" DataSourceID="SqlDataSource1" UseIdConfirmation="true"
            AutoLoad="false">
            <Reader>
                <ext:JsonReader ReaderID="ID">
                    <Fields>
                        <ext:RecordField Name="ID" />
                        <ext:RecordField Name="ACCESS_GROUP_NAME" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center MarginsSummary="0 5 0 5">
                        <ext:Panel ID="Panel1" runat="server" Height="300" Header="false">
                            <Body>
                                <ext:FitLayout ID="FitLayout1" runat="server">
                                    <ext:GridPanel ID="GridPanel1" runat="server" Title="Title" StoreID="Store1" Border="false"
                                        StripeRows="true" ClicksToEdit="1">
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                <ext:RowNumbererColumn />
                                                <ext:Column DataIndex="ACCESS_GROUP_NAME" Header="Ana Pozisyon Adi">
                                                    <Editor>
                                                        <ext:TextField ID="TextField1" runat="server" />
                                                    </Editor>
                                                </ext:Column>
                                            </Columns>
                                        </ColumnModel>
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                        </SelectionModel>
                                        <BottomBar>
                                            <ext:PagingToolbar ID="PagingToolBar1" runat="server" StoreID="Store1" PageSize="10"
                                                DisplayInfo="false" />
                                        </BottomBar>
                                        <SaveMask ShowMask="true" />
                                        <LoadMask ShowMask="true" />
                                    </ext:GridPanel>
                                </ext:FitLayout>
                            </Body>
                            <Buttons>
                                <ext:Button ID="btnInsert" runat="server" Text="Insert" Icon="Add">
                                    <Listeners>
                                        <Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPanel1}.startEditing(0, 0);" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
                                    <Listeners>
                                        <Click Handler="#{GridPanel1}.save();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="btnRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
                                    <Listeners>
                                        <Click Handler="#{GridPanel1}.reload();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="btnDelete" runat="server" Text="Delete" Icon="Delete">
                                    <Listeners>
                                        <Click Handler="#{GridPanel1}.deleteSelected();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    Thanks in advance.
  2. #2

    RE: Adding Tabs With OnActivate Listener

    Hi,

    Don't use getElementById
    Use
    Ext.getCmp('btnRefresh')

    or use directly by id (all Coolite controls register own id as js variable)
    btnRefresh.fireEvent('click');
  3. #3

    RE: Adding Tabs With OnActivate Listener



    Hi Vladimir,

    When I'm activating a tab that contains a btnRefresh button, I get "Microsoft JScript runtime error: 'btnRefresh' is undefined". If the tab doesn't contain such a component no error is thrown.

    
        <script type="text/javascript">
            function addTab(tabPanel, id, url, name) {
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: name,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading...'
                        }
                    });
                    tab.on('activate', function() {
                        btnRefresh.fireEvent('click');
    
    
                    }, this);
                }
                tabPanel.setActiveTab(tab);
            }
        </script>
  4. #4

    RE: Adding Tabs With OnActivate Listener

    I've changed the script as follows. The tab is reloading properly but this time the GridPanel inside the tab is not reloading. I'm willing to find a way to force a refresh on selected tab. Please help...

        <script type="text/javascript">
            function addTab(tabPanel, id, url, name) {
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: name,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading...'
                        }
                    });
                    tab.on('activate', function() {
                        tab.reload();
                    });
                }
                else {
                    tab.reload();
                }
                tabPanel.setActiveTab(tab);
            }
        </script>
  5. #5

    RE: Adding Tabs With OnActivate Listener

    I solved it by using below code. You can mark this thread as closed.

        <script type="text/javascript">
            function addTab(tabPanel, id, url, name) {
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: name,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading...'
                        }
                    });
                    tab.on('activate', function() {
                        tab.getUpdater().refresh();
                        tab.reload();
                    });
                }
                tabPanel.setActiveTab(tab);
            }
        </script>

Similar Threads

  1. Adding 2 idetical tabs on the same TabPanel
    By ozayExt in forum 1.x Help
    Replies: 5
    Last Post: Aug 22, 2011, 5:12 PM
  2. adding tabs dynamically
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 3
    Last Post: Nov 16, 2009, 7:29 AM
  3. Replies: 1
    Last Post: Mar 26, 2009, 8:54 AM
  4. Adding tabs to tabpanel in JavaScript
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 0
    Last Post: Dec 04, 2008, 9:20 AM
  5. Adding textfields to tabs
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Nov 13, 2008, 10:35 AM

Posting Permissions