[CLOSED] Errors updating Panels' loaders in TabPanel

  1. #1

    [CLOSED] Errors updating Panels' loaders in TabPanel

    Hello,

    we get some troubles (a set of javascript errors) trying to update a TabPanel, after an item is selected on a TreePanel. Anyway the problem seems caused by the way we update the TabPanel because we get the same errors with the following code.
    After the button is clicked, the content of the panel is updated but after that the TabPanel stops working: every click causes a javascript error.

    TestClientTab.aspx
    <%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
    
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    <!DOCTYPE html>
    <html>
    <head runat="server"><title>Tab Error</title></head>
    <body>
      <form id="form1" runat="server">
      <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <script type="text/javascript">
          function OnClick1() {
            App.Panel1.loader = {
              url: "TabContent.aspx?id=1&panel=1",
              renderer: "frame",
              loadMask: {
                showMask: true,
                msg: "Loading ..."
              }
            };          
            App.Panel2.loader = {
              url: "TabContent.aspx?id=1&panel=2",
              renderer: "frame",
              loadMask: {
                showMask: true,
                msg: "Loading ..."
              }
            };
            App.Panel1.reload();
            App.Panel2.reload();
          }
        </script>
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" EnableViewState="True">
          <Items>
            <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
              <TopBar>
                <ext:Toolbar runat="server">
                  <Items>
                    <ext:Button runat="server" ID="Button1" Text="Click me 1">
                      <Listeners>
                        <Click Handler="OnClick1();">
                        </Click>
                      </Listeners>
                    </ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>
              <Items>
                <ext:Panel ID="Panel1" runat="server" Title="Panel1" Closable="false">
                  <Loader runat="server" Url="TabContent.aspx" Mode="Frame" ID="L1">
                    <LoadMask ShowMask="True" />
                  </Loader>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Title="Panel2" Closable="false">
                  <Loader runat="server" Url="TabContent.aspx" Mode="Frame" ID="L2">
                    <LoadMask ShowMask="True" />
                  </Loader>
                </ext:Panel>
              </Items>
            </ext:TabPanel>
          </Items>
        </ext:Viewport>
      </div>
      </form>
    </body>
    </html>
    TabContent.aspx
    <%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
    <!DOCTYPE html>
    <html>
    <head runat="server"><title>Content</title></head>
    <body>
        <form id="form1" runat="server">
        <div>
          Id of Panel = <%= Request.QueryString["id"] %>
        </div>
        <div>
          Id of Button = <%= Request.QueryString["id"] %>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; May 04, 2012 at 9:51 PM. Reason: [CLOSED]
  2. #2
    Hi,

    This is how I would implement the requirement, works without any errors.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var load = function () {
                var options1 = {
                        params : {
                            id    : 1,
                            panel : 1
                        }
                    },
                     options2 = {
                        params : {
                            id    : 2,
                            panel : 2
                        }
                    };
    
                if (App.Panel1.rendered) {
                    App.Panel1.load(options1);
                } else {
                    App.Panel1.on("afterrender", function () {
                        this.load(options1); 
                    });
                }
    
                if (App.Panel2.rendered) {
                    App.Panel2.load(options2);
                } else {
                    App.Panel2.on("afterrender", function () {
                        this.load(options2); 
                    });
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:TabPanel runat="server">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Load content" Handler="load" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:Panel 
                            ID="Panel1" 
                            runat="server" 
                            Title="Tab 1" 
                            Closable="false">
                            <Loader 
                                runat="server"
                                Url="Test.aspx" 
                                Mode="Frame" 
                                AutoLoad="false">
                                <LoadMask ShowMask="True" />
                            </Loader>
                        </ext:Panel>
                        <ext:Panel 
                            ID="Panel2" 
                            runat="server" 
                            Title="Tab 2" 
                            Closable="false">
                            <Loader 
                                runat="server"
                                Url="Test.aspx" 
                                Mode="Frame" 
                                AutoLoad="false">
                                <LoadMask ShowMask="True" />
                            </Loader>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>

Similar Threads

  1. [CLOSED] So many panels and nested panels
    By thchuong in forum 2.x Premium Help
    Replies: 1
    Last Post: Aug 03, 2012, 5:23 AM
  2. Loaders with web services problem
    By Taz in forum 2.x Help
    Replies: 2
    Last Post: Aug 02, 2012, 10:24 AM
  3. Replies: 7
    Last Post: Jan 04, 2012, 9:56 AM
  4. Replies: 3
    Last Post: Oct 17, 2010, 1:22 PM
  5. [CLOSED] DeferredRender in TabPanel with dynamic load of Panels
    By reto.ruemmeli in forum 1.x Premium Help
    Replies: 4
    Last Post: May 21, 2010, 4:02 AM

Tags for this Thread

Posting Permissions