[CLOSED] TabPanel component in 'DocumentReady' within 'Listeners' for ResourceManager, second Tab controls shows up on PageLoad

  1. #1

    [CLOSED] TabPanel component in 'DocumentReady' within 'Listeners' for ResourceManager, second Tab controls shows up on PageLoad

    ONLY on PageLoad the controls for the second Tab show up, after that it seems to behave fine...

    Image Below.

    Click image for larger version. 

Name:	DocumentReady issue.JPG 
Views:	61 
Size:	9.2 KB 
ID:	4516

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            var txtBox = new TextBox();
    
            this.PlaceHolder1.Controls.Add(txtBox);
    
            txtBox.ID = "textBox1";
            txtBox.Width = Unit.Pixel(50);
        }
    
    </script>
    <!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>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
            <Listeners>
                <DocumentReady Handler="#{TabPanel1}.add(#{Panel1});  #{TabPanel1}.add(#{Panel2}); #{TabPanel1}.setActiveTab(0);" />
            </Listeners>
        </ext:ResourceManager>
        <br />
        <ext:TabPanel ID="TabPanel1" runat="server" Width="200" Height="100" />
        <ext:Panel runat="server" ID="Panel1" Title="Title1">
            <Content>
                <ext:Label Text="label1" ID="label1" runat="server" />
            </Content>
        </ext:Panel>
        <ext:Panel runat="server" ID="Panel2" Title="Title2">
            <Content>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
                <ext:Label Text="label2" ID="label2" runat="server" />
            </Content>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 25, 2012 at 12:59 AM. Reason: [CLOSED]
  2. #2
    Hi,

    To fix please set up
    DeferredRender="false"
    for the TabPanel.

    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender

    But I would prefer to put these tabs into the TabPanel on server side. Though I do not know the initial requirement.
  3. #3
    That works thanks.

    I have tried out your recommendation and it works great in my sample as below about adding the TabPanel items in the codebehind

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var txtBox = new TextBox();
    
                this.PlaceHolder1.Controls.Add(txtBox);
    
                txtBox.ID = "textBox1";
                txtBox.Width = Unit.Pixel(50);
    
                TabPanel1.Add(FormPanel1);
                TabPanel1.Add(Panel1);
                TabPanel1.SetActiveTab(0);
            }
        }
    
    </script>
    <!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>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <br />
        <ext:TabPanel ID="TabPanel1" runat="server" Width="200" Height="100" DeferredRender="false" />
        <ext:FormPanel runat="server" ID="FormPanel1" Title="Title1">
            <Content>
                <ext:Label Text="label 1" ID="label1" runat="server" />
            </Content>
        </ext:FormPanel>
        <ext:Panel runat="server" ID="Panel1" Title="Title2">
            <Content>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
                <ext:Label Text="label 2" ID="label2" runat="server" />
            </Content>
        </ext:Panel>
        </form>
    </body>
    </html>
    But when I implement it is my actually application in the same way, it get the error below:
    Error: An item with the same key has already been added.

    So I decided to leave it in 'DocumentReady' for now.

    Will the preformance be better if it was in the codebehind ??

    You can mark this as close after you respond to the question above.

    Quote Originally Posted by Daniil View Post
    Hi,

    To fix please set up
    DeferredRender="false"
    for the TabPanel.

    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender

    But I would prefer to put these tabs into the TabPanel on server side. Though I do not know the initial requirement.
  4. #4
    Quote Originally Posted by Fahd View Post
    But when I implement it is my actually application in the same way, it get the error below:
    Error: An item with the same key has already been added.
    Can't you add these tabs into the TabPanel directly in the markup? Is there the same exception?

    Quote Originally Posted by Fahd View Post
    Will the preformance be better if it was in the codebehind ??
    I think, yes. The JavaScript actions looks excess in your sample.

Similar Threads

  1. Replies: 1
    Last Post: Jul 30, 2011, 3:59 PM
  2. Replies: 3
    Last Post: Mar 28, 2011, 11:15 AM
  3. Replies: 2
    Last Post: Dec 07, 2010, 7:25 AM
  4. Replies: 6
    Last Post: Sep 23, 2009, 12:36 PM
  5. [CLOSED] How to Add Controls in a Row dynamicaly on PageLoad?
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 09, 2009, 12:33 PM

Tags for this Thread

Posting Permissions