[CLOSED] form layout with composite field problem

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] form layout with composite field problem

    Hii, I have some composite field inside form layout and I found my page was not correct. Here is my markup

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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>Test</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ScriptManager" runat="server" >
           
        </ext:ResourceManager>
        
        <ext:Viewport ID="Viewport1" runat="server" Layout="Center">
            <Items>
                <ext:Panel ID="Panel1" runat="server" AutoScroll="true" Layout="Center" Border="true">
                    <Items>
                        <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" BodyBorder="false"
                            EnableTabScroll="true" Plain="true">
                            <Items>
                                <ext:Panel ID="Panel4" runat="server" Title="Tab1" BodyStyle="padding: 6px;"
                                    Layout="Fit" Border="true">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar1" runat="server">
                                            <Items>
                                                <ext:ComboBox ID="cmbJP" runat="server" EmptyText="Select One"
                                                    ForceSelection="true" Width="300px" FieldLabel="Select One" Editable="false"
                                                    AnchorHorizontal="100%">
                                                    <Items>
                                                        <ext:ListItem Text="Item1" Value="Item1" />
                                                        <ext:ListItem Text="Item2" Value="Item2" />
                                                    </Items>
                                                    <SelectedItem Value="Item1" />
                                                </ext:ComboBox>
                                                
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <Content>
                                        <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                                            <Columns>
                                                <ext:LayoutColumn ColumnWidth="0.5">
                                                    <ext:Panel runat="server" ID="panel8" BodyStyle="padding: 5px" Layout="Form" AnchorHorizontal="100%">
                                                        <Items>
                                                            <ext:CompositeField ID="c1" runat="server" FieldLabel="C1">
                                                                <Items>
                                                                    <ext:TextField ID="num1" runat="server" MaxLength="6" EmptyText="Number" MaskRe="[0-9]"
                                                                        Flex="1" />
                                                                    <ext:Label ID="slash301" runat="server" Text="/" />
                                                                    <ext:TextField ID="yea1" runat="server" MaxLength="4" Width="75" EmptyText="Year"
                                                                        MaskRe="[0-9]" />
                                                                    <ext:DateField ID="dat1" runat="server" EmptyText="Date" Format="dd/MM/yyyy" />
                                                                </Items>
                                                            </ext:CompositeField>
                                                            <ext:CompositeField ID="c2" runat="server" FieldLabel="C2">
                                                                <Items>
                                                                    <ext:TextField ID="num2" runat="server" MaxLength="6" EmptyText="Number" MaskRe="[0-9]"
                                                                        Flex="1" />
                                                                    <ext:Label ID="slash2" runat="server" Text="/" />
                                                                    <ext:TextField ID="yea2" runat="server" MaxLength="4" Width="75" EmptyText="Year"
                                                                        MaskRe="[0-9]" />
                                                                    <ext:DateField ID="dat2" runat="server" EmptyText="Date" Format="dd/MM/yyyy" />
                                                                </Items>
                                                            </ext:CompositeField>
                                                            <ext:CompositeField ID="c3" runat="server" FieldLabel="C3">
                                                                <Items>
                                                                    <ext:TextField ID="num3" runat="server" MaxLength="6" EmptyText="Number" MaskRe="[0-9]"
                                                                        Flex="1" />
                                                                    <ext:Label ID="slash3" runat="server" Text="/" />
                                                                    <ext:TextField ID="yea3" runat="server" MaxLength="4" Width="75" EmptyText="Year"
                                                                        MaskRe="[0-9]" />
                                                                    <ext:DateField ID="dat3" runat="server" EmptyText="Date" Format="dd/MM/yyyy" />
                                                                </Items>
                                                            </ext:CompositeField>
                                                        </Items>
                                                    </ext:Panel>
                                                </ext:LayoutColumn>
                                                <ext:LayoutColumn ColumnWidth="0.5">
                                                    <ext:Panel runat="server" ID="panel9">
                                                    </ext:Panel>
                                                </ext:LayoutColumn>
                                            </Columns>
                                        </ext:ColumnLayout>
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="panel2" runat="server" Title="Tab2" BodyStyle="padding: 6px;"
                                    Layout="Fit">
                                    <Content>
                                    </Content>
                                </ext:Panel>
                            </Items>
                        </ext:TabPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    
    
    </body>
    </html>
    Last edited by geoffrey.mcgill; Aug 30, 2010 at 10:14 PM. Reason: please use [CODE] tags, [CLOSED]
  2. #2
    At least it happen on ie, not on chrome
  3. #3
    Hi dev,

    What exactly should be looking at here. What is the expected behaviour, and what are you seeing?
    Geoffrey McGill
    Founder
  4. #4
    The last composite field is floating to the top of its container as you can see from the attachment
    Attached Thumbnails Click image for larger version. 

Name:	layoutform.jpg 
Views:	264 
Size:	43.9 KB 
ID:	1512  
  5. #5
    Hi dev,

    Can you confirm if you are using the latest source from the SVN server? When I run your code it appears to render correctly in IE, Chrome and Firefox.
    Geoffrey McGill
    Founder
  6. #6
    I just downloade latest version from svn but still do not solve my problem.. I observed that the problem appear at the first time the page loaded or refreshed. if I click a combo box, tab panel, or resize my browser then my page get correct. I'm using IE 7
  7. #7
    Hello!

    I cannot reproduce the issue. But I tested it in IE7 mode of IE8.
    So...Please try this workaround.
    Add the following listener to the Viewport control.

    Example
    <ext:Viewport ID="Viewport1" runat="server" Layout="Center">
        <Listeners>
            <AfterRender Handler="this.syncSize()" />
        </Listeners>
    </ext:Viewport>
    If it doesn't make sense please try to apply it to a container that is rendered incorrect.

    If it doesn't make sense also please try this:
    <Listeners>
        <AfterRender Handler="this.doLayout()"/>
    </Listeners>
  8. #8
    Neither doLayout() nor syncSize() is working..
  9. #9
    Hi!

    Please try this code in other browsers on your machine such as FF, Chrome, etc.
    Does the issue appears?
  10. #10
    It works fine on chrome and ff, I haven't found a machine with ie 8 in my office so I can't do a small test on it
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Composite Field Layout issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 12, 2015, 2:22 PM
  2. [CLOSED] Field and FieldContainer layout exception in form
    By cleve in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 13, 2012, 2:04 PM
  3. Replies: 1
    Last Post: Oct 07, 2011, 8:34 AM
  4. Replies: 2
    Last Post: Sep 22, 2011, 11:46 AM
  5. [CLOSED] Problem with Composite Field
    By tansu in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 22, 2011, 4:06 PM

Posting Permissions