What's New?

[CLOSED] Items not rendering in collapsed tab panel

  1. #1
    Aug 18, 2010, 7:59 PM

    [CLOSED] Items not rendering in collapsed tab panel

    I have a series of ascx controls that I need to render within a tab panel which is a collapsible. (they need to be ascx controls as the are reused elsewhere).

    I have two issues:

    When the panel is initialized as collapsed, the control doesn't render when it is expaneded.
    I can't get the controls to render properly on change of tab.

    I have tried all sorts of combinations of AutoLayout, LayoutOnTabChange="true", DefeerredRender="false" etc.

    Test page:

    <%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<%@ Register Src="TestControl1.ascx" TagPrefix="test" TagName="TestControl1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="Header1">
    <title>Title goes here</title>
</head>
</head>
<body>
     <form id="MainForm" runat="server" method="post">
        <ext:ResourceManager ID="ExtManager" runat="server" />

        <ext:Viewport runat="server" ID="Viewport1" >
            <Items>
                <ext:BorderLayout runat="server" ID="EditorPanel">
                    <Center>
                        <ext:Panel ID="PageEditorPanel" runat="server" AutoScroll="true">
                            <Content>
                                Something goes here
                            </Content>
                        </ext:Panel>
                    </Center>
                    <South>                                    
                        <ext:TabPanel ID="ItemAttributesPanel" runat="server" Collapsible="true" Collapsed="true" LayoutOnTabChange="true">
                            <Items>
                                <ext:Panel ID="Tab1" runat="server" Title="Tab 1" Height="200">
                                    <Content>
                                        <test:TestControl1 ID="TestControl1" runat="server"/>
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="Tab2" runat="server" Title="Tab 2" Height="200">
                                    <Content>
                                        <test:TestControl1 ID="TestControl2" runat="server"/>
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="Tab3" runat="server" Title="Tab 3" Height="200">
                                    <Content>
                                        <test:TestControl1 ID="TestControl3" runat="server" />
                                    </Content>
                                </ext:Panel>
                            </Items>
                        </ext:TabPanel>
                    </South>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    TestControl1.ascx:

    <%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:FormPanel runat="server" ID="PageAttributesForm" AutoHeight="true" Layout="hbox" Padding="5">
    <Items>
        <ext:Panel ID="Column1" runat="server" LabelAlign="Left" Layout="Form" Flex="1" AutoHeight="true" Border="false">
            <Items>
                <ext:TextField runat="server" FieldLabel="Field 1" ID="Field1" AnchorHorizontal="95%" ></ext:TextField>
            </Items>
        </ext:Panel>
        <ext:Panel ID="Column2" runat="server" LabelAlign="Left" Layout="Form" Flex="1" AutoHeight="true" Border="false">
            <Items>
                <ext:TextField runat="server" FieldLabel="Field 2" ID="Field2" AnchorHorizontal="95%" ></ext:TextField>
            </Items>
        </ext:Panel>
    </Items>
</ext:FormPanel>
    Last edited by geoffrey.mcgill; Aug 19, 2010 at 6:25 PM. Reason: [CLOSED]
  2. #2
    Aug 18, 2010, 8:09 PM
    Two things to try...

    1. Wrap the <ext:FormPanel> in the .ascx inside an <ext:FitLayout> component.

    2. Add the following Expand listener to the TabPanel...

    Example

    <Expand Handler="this.doLayout();" />
    Hope this helps.
    Last edited by geoffrey.mcgill; Aug 18, 2010 at 8:24 PM.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Aug 18, 2010, 8:15 PM
    Hi,

    1. Please wrap user control code by layout and remove AutoHeight
    <%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:FitLayout runat="server">
    <Items>
        <ext:FormPanel runat="server" ID="PageAttributesForm" Layout="hbox" Padding="5">
            <Items>
                <ext:Panel ID="Column1" runat="server" LabelAlign="Left" Layout="Form" Flex="1" AutoHeight="true"
                    Border="false">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="Field 1" ID="Field1" AnchorHorizontal="95%">
                        </ext:TextField>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Column2" runat="server" LabelAlign="Left" Layout="Form" Flex="1" AutoHeight="true"
                    Border="false">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="Field 2" ID="Field2" AnchorHorizontal="95%">
                        </ext:TextField>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
    </Items>
</ext:FitLayout>
    2. Add the following listener to the TabPanel
    <AfterRender Handler="this.on('expand', this.doLayout, this, {single:true});" />
  4. #4
    Aug 18, 2010, 8:27 PM
    We discovered an issue with the TabPanel Listener/DirectEvent inheritance. They were inheriting from Container instead of Panel.

    The fix has been committed to SVN.

    The <Expand> Listener should now be available and the <Expand Hander="this.doLayout();" /> option provided above should now work.

    Sorry if this caused any confusion.
    Last edited by geoffrey.mcgill; Aug 19, 2010 at 6:24 PM.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Aug 19, 2010, 8:39 PM
    Thanks guys, that worked a treat - I was scratching my head on that one for a while.

Similar Threads

  1. [CLOSED] Incorrect Rendering of Child controls when parent user control is loaded in collapsed state
    By Shanti in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 15, 2010, 5:33 AM
  2. [CLOSED] [1.0] Items of MenuPanel are not rendered if Menupanel is collapsed
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 02, 2009, 12:31 PM
  3. [CLOSED] GridPanel columns rendering in Collapsed panel
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 02, 2009, 11:50 AM
  4. How to set ext:panel 's Collapsed proprty to false upon loading of ext:Panel?
    By Rizwan-Ali in forum 1.x Help
    Replies: 0
    Last Post: May 27, 2009, 6:50 AM
  5. Problem with Lazy or delay rendering Items
    By r_honey in forum 1.x Help
    Replies: 1
    Last Post: Mar 09, 2009, 9:16 AM

Posting Permissions