What's New?

[CLOSED] RowLayout Not Rendering Correctly When Some Rows Are Not Visible

  1. #1
    Jan 10, 2012, 7:41 PM

    [CLOSED] RowLayout Not Rendering Correctly When Some Rows Are Not Visible

    I have a page where I have a series of forms that layout vertically. Each FormPanel is contained by a LayoutRow within a RowLayout. The issue is that the last few rows do not render properly when you have to scroll to see them (They are not visible when the page first loads).
    Can you show me how to make this work. Is there another way I should do this. Since each form should validate itself and not the others, I thought I could create several forms. This would be similar to the ValidationGroup functionality within asp.net WebForms.

    Here is my sample:
    <%@ Page Language="C#" %>
 
<!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>Testing</title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray">
    </ext:ResourceManager>
    <ext:Panel ID="pnlExport" runat="server" Title="Export Data" Border="false" Icon="ArrowOut" Padding="0" AutoScroll="true">
        <Items>
            <ext:RowLayout ID="RowLayout1" runat="server">
                <Rows>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm1" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Border="false" Padding="5" Title="eScrip New Members" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:ComboBox runat="server" ID="ddlMonth1" FieldLabel="Month" AllowBlank="false" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="January" Value="1" />
                                        <ext:ListItem Text="February" Value="2" />
                                        <ext:ListItem Text="March" Value="3" />
                                        <ext:ListItem Text="April" Value="4" />
                                        <ext:ListItem Text="May" Value="5" />
                                        <ext:ListItem Text="June" Value="6" />
                                        <ext:ListItem Text="July" Value="7" />
                                        <ext:ListItem Text="August" Value="8" />
                                        <ext:ListItem Text="September" Value="9" />
                                        <ext:ListItem Text="October" Value="10" />
                                        <ext:ListItem Text="November" Value="11" />
                                        <ext:ListItem Text="December" Value="12" />
                                    </Items>
                                </ext:ComboBox>
                                <ext:ComboBox runat="server" ID="ddlYear1" AllowBlank="false" FieldLabel="Year" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="2011" Value="2011" />
                                        <ext:ListItem Text="2012" Value="2012" />
                                    </Items>
                                </ext:ComboBox>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo1" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm2" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="eScrip Rx Usage" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:ComboBox runat="server" ID="ddlMonth2" FieldLabel="Month" AllowBlank="false" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="January" Value="1" />
                                        <ext:ListItem Text="February" Value="2" />
                                        <ext:ListItem Text="March" Value="3" />
                                        <ext:ListItem Text="April" Value="4" />
                                        <ext:ListItem Text="May" Value="5" />
                                        <ext:ListItem Text="June" Value="6" />
                                        <ext:ListItem Text="July" Value="7" />
                                        <ext:ListItem Text="August" Value="8" />
                                        <ext:ListItem Text="September" Value="9" />
                                        <ext:ListItem Text="October" Value="10" />
                                        <ext:ListItem Text="November" Value="11" />
                                        <ext:ListItem Text="December" Value="12" />
                                    </Items>
                                </ext:ComboBox>
                                <ext:ComboBox runat="server" ID="ddlYear2" AllowBlank="false" FieldLabel="Year" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="2011" Value="2011" />
                                        <ext:ListItem Text="2012" Value="2012" />
                                    </Items>
                                </ext:ComboBox>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo2" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm3" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="Eligibility" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:ComboBox ID="ddlGroup_Eligibility" runat="server" FieldLabel="Group" AllowBlank="false">
                                    <Items>
                                        <ext:ListItem Text="Group1" Value="1" />
                                        <ext:ListItem Text="Group2" Value="2" />
                                    </Items>
                                </ext:ComboBox>
                                <ext:ComboBox runat="server" ID="ddlMonth_Eligibility" FieldLabel="Month" AllowBlank="false" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="January" Value="1" />
                                        <ext:ListItem Text="February" Value="2" />
                                        <ext:ListItem Text="March" Value="3" />
                                        <ext:ListItem Text="April" Value="4" />
                                        <ext:ListItem Text="May" Value="5" />
                                        <ext:ListItem Text="June" Value="6" />
                                        <ext:ListItem Text="July" Value="7" />
                                        <ext:ListItem Text="August" Value="8" />
                                        <ext:ListItem Text="September" Value="9" />
                                        <ext:ListItem Text="October" Value="10" />
                                        <ext:ListItem Text="November" Value="11" />
                                        <ext:ListItem Text="December" Value="12" />
                                    </Items>
                                </ext:ComboBox>
                                <ext:ComboBox runat="server" ID="ddlYear_Eligibility" AllowBlank="false" FieldLabel="Year" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="2011" Value="2011" />
                                        <ext:ListItem Text="2012" Value="2012" />
                                    </Items>
                                </ext:ComboBox>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo3" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm4" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="Access Full File (45001059)" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Buttons>
                                <ext:Button ID="btnGo4" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm5" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="Access Daily File (45001059)" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:DateField ID="dfDay_AccessDaily" runat="server" FieldLabel="Day" AllowBlank="false">
                                </ext:DateField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo5" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm6" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="Careington Full File" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Buttons>
                                <ext:Button ID="btnGo6" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm7" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="Careington Daily Update File" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:DateField ID="dfDay_CareingtonDaily" runat="server" FieldLabel="Day" AllowBlank="false">
                                </ext:DateField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo7" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm8" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="HealthAdvocate Monthly Update File" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:ComboBox runat="server" ID="ddlMonth_HealthAdvocateMonthly" FieldLabel="Month" AllowBlank="false" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="January" Value="1" />
                                        <ext:ListItem Text="February" Value="2" />
                                        <ext:ListItem Text="March" Value="3" />
                                        <ext:ListItem Text="April" Value="4" />
                                        <ext:ListItem Text="May" Value="5" />
                                        <ext:ListItem Text="June" Value="6" />
                                        <ext:ListItem Text="July" Value="7" />
                                        <ext:ListItem Text="August" Value="8" />
                                        <ext:ListItem Text="September" Value="9" />
                                        <ext:ListItem Text="October" Value="10" />
                                        <ext:ListItem Text="November" Value="11" />
                                        <ext:ListItem Text="December" Value="12" />
                                    </Items>
                                </ext:ComboBox>
                                <ext:ComboBox runat="server" ID="ddlYear_HealthAdvocateMonthly" AllowBlank="false" FieldLabel="Year" TypeAhead="true" Editable="true" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="2011" Value="2011" />
                                        <ext:ListItem Text="2012" Value="2012" />
                                    </Items>
                                </ext:ComboBox>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo8" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                    <ext:LayoutRow>
                        <ext:FormPanel ID="pnlForm9" runat="server" Layout="FormLayout" Frame="true" ButtonAlign="Left" Padding="5" Border="false" Title="Type 12 File" Margins="5" AutoHeight="true">
                            <Defaults>
                                <ext:Parameter Name="msgTarget" Value="side" Mode="Value">
                                </ext:Parameter>
                            </Defaults>
                            <Items>
                                <ext:ComboBox ID="cboCompany" runat="server" FieldLabel="Company" AllowBlank="false">
                                    <Items>
                                        <ext:ListItem Text="Company1" Value="1" />
                                        <ext:ListItem Text="Company2" Value="2" />
                                    </Items>
                                </ext:ComboBox>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnGo9" runat="server" Text="GO" AutoPostBack="true">
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </ext:LayoutRow>
                </Rows>
            </ext:RowLayout>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
    Last edited by Daniil; Jan 11, 2012 at 7:27 AM. Reason: [CLOSED]
  2. #2
    Jan 10, 2012, 8:10 PM
    HI,

    Maybe it would be better to use the VBoxLayout, or even do not configure a Layout, which will then use the default Auto layout.

    As well, you should move your code over to use the .Layout="VBoxLayout" property, instead of inner Layout controls, such as <ext:VBoxLayout>. The Layout control have been removed from Ext.NET v2, and now only the .Layout property is supported.

    Hope this helps.
    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
    Jan 10, 2012, 8:21 PM
    Hi,

    I should clarify that the RowLayout and VBoxLayout requires a height of its container (fixed .Height or came from a layout manager of its container).

    Also RowLayout requires RowHeight or Height to be set up for its items,
    VBoxLayout requires Flex or Height to be set up for its items.

    And I agree with Geoffrey that you should not configure any layout.

    I've checked the following thing appears to be rendered correctly.

    Example
    <ext:Panel runat="server">
    <Items>
        <%--FormPanels--%>
    </Items>
</ext:Panel>
  4. #4
    Jan 10, 2012, 9:10 PM

    Very Good

    That seemed to do the trick. Thanks!

Similar Threads

  1. Tooltip CSS not rendering correctly
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Oct 24, 2011, 6:36 PM
  2. [CLOSED] Dynamic controls are not rendering correctly
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 16, 2011, 9:05 PM
  3. [CLOSED] How can I do this RowLayout with centered rows
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 23, 2010, 6:19 PM
  4. [CLOSED] TreeGrid not rendering correctly after nodes/columns change
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 07, 2010, 6:52 PM
  5. [CLOSED] Rows in RowLayout seem to be cut off in IE 7
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Sep 12, 2009, 1:16 PM

Posting Permissions