[CLOSED] form layout with composite field problem

**dev** · Aug 25, 2010, 3:31 AM

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>

**dev** · Aug 25, 2010, 4:31 AM

At least it happen on ie, not on chrome

**geoffrey.mcgill** · Aug 25, 2010, 4:46 AM

Hi dev,

What exactly should be looking at here. What is the expected behaviour, and what are you seeing?

**dev** · Aug 25, 2010, 6:10 AM

The last composite field is floating to the top of its container as you can see from the attachment

**geoffrey.mcgill** · Aug 25, 2010, 6:16 AM

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.

**dev** · Aug 26, 2010, 3:49 AM

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

**Daniil** · Aug 26, 2010, 11:29 AM

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>

**dev** · Aug 26, 2010, 11:59 PM

Neither doLayout() nor syncSize() is working..

**Daniil** · Aug 27, 2010, 1:47 PM

Hi!

Please try this code in other browsers on your machine such as FF, Chrome, etc.
Does the issue appears?

**dev** · Aug 27, 2010, 10:29 PM

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

Thread: [CLOSED] form layout with composite field problem

Thread Tools

Search Thread

Display

[CLOSED] form layout with composite field problem

Similar Threads

[CLOSED] Composite Field Layout issue

[CLOSED] Field and FieldContainer layout exception in form

[CLOSED] Composite field - textarea - grow...composite field isn't growing...

[CLOSED] Hiding 1 Field in a Composite Field inside a collapsed Panel causes the entire Composite to Hide

[CLOSED] Problem with Composite Field

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] form layout with composite field problem

[CLOSED] form layout with composite field problem

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us