What's New?

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

  1. #1
    Jul 20, 2012, 2:05 PM

    [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: 90  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
    Jul 20, 2012, 2:29 PM
    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
    Jul 20, 2012, 3:35 PM
    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
    Jul 20, 2012, 4:50 PM
    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. DropDownField on TabPanel with inactive index on PageLoad does not set the Text.
    By huzzy143 in forum 1.x Help
    Replies: 1
    Last Post: Jul 30, 2011, 3:59 PM
  2. Fckeditor in Ext.Net controls - shows javascript error
    By vs.mukesh in forum 1.x Help
    Replies: 3
    Last Post: Mar 28, 2011, 11:15 AM
  3. How to add Listeners to the controls at runtime with js
    By wxmayifei in forum 1.x Help
    Replies: 2
    Last Post: Dec 07, 2010, 7:25 AM
  4. User controls and component ID conflicts.
    By bas in forum 1.x Help
    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