What's New?

FormPanel problem in tabs with layout colums

Page 1 of 2 12 LastLast
  1. #1
    Sep 07, 2009, 6:36 PM

    FormPanel problem in tabs with layout colums

    Hi,

    I have a trouble with a Column Layout and a tab panel inside a column. The form inside the non-visible tabs doesn't filling the formlayout. The form in the visible tab is OK, but the forms in the non-visible, the fields are short.

    What is the problem?. Thanks

    Below the example code.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <ext:Panel ID="pnClientes" runat="server" Height="800" Title="Page" Icon="Group" Frame="true" >     
        <Body>
            <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="false" FitHeight="true"  >
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.7">
                        <ext:Panel ID="Panel1" runat="server" Border="false" BodyStyle="padding-right:5px;" >
                        <Body>
                        <ext:Panel runat="server" Border="false" Height="300" Title="Block" >
                        <Body>Some Content!</Body>
                        </ext:Panel>
                        </Body>             
                        </ext:Panel>                    
                    </ext:LayoutColumn>
                    <ext:LayoutColumn ColumnWidth="0.3" >
                    <ext:Panel ID="Panel2" runat="server" Border="false" >
                    <Body>
                    <ext:FitLayout ID="FitLayout3" runat="server">
                    <ext:TabPanel ID="TabPanel1" runat="server" LayoutOnTabChange="true">
                    <tabs>
                    <ext:Tab ID="tab1" runat="server" Title="Tab 1" Icon="Pencil"  >
                    <Body>
                    <ext:FormPanel ID="FormPanel1" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout1" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="textbox1" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="textbox2" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="textbox3" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="combo1" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                    <ext:FormPanel ID="FormPanel2" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout2" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField6" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField7" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField8" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox4" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>                                                          
                    </Body>
                    </ext:Tab>
                    <ext:Tab ID="tab2" runat="server" Title="Tab 2" Icon="Star" >
                    <Body>
                     <ext:FormPanel ID="FormPanel3" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout3" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField2" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField3" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox1" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                    <ext:FormPanel ID="FormPanel4" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout4" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField4" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField5" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField9" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox2" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>                                                          
                    </Body>
                    </ext:Tab>

                    </tabs>
                    </ext:TabPanel>
                    
                    </ext:FitLayout>
                    </Body>
                    </ext:Panel>
                    
                    </ext:LayoutColumn>
                    
                </Columns>
            </ext:ColumnLayout>
        </Body>
    </ext:Panel>
    </form>
</body>
</html>
  2. #2
    Sep 07, 2009, 6:46 PM

    RE: FormPanel problem in tabs with layout colums

    Hi,

    You need to place FormPanel's inside ContainerLayout
  3. #3
    Sep 07, 2009, 7:29 PM

    RE: FormPanel problem in tabs with layout colums

    vladimir (9/7/2009)Hi,

    You need to place FormPanel's inside ContainerLayout
    Thank Vladsh, I try to put the formPanel's inside a ContainerLayout, but the page shows in blank. The Error console show this error:

    Error: invalid label
    Source File: http://localhost:4586/web/Test.aspx
    Líne: 24, column: 10
    Source Code:
    rmPanel2",xtype:"form",layout:"form",anchorSize:{i sFormField:false},itemCls:"",items:[{id:"TextField4",xtype:"textfield",fieldLabel:"Tex t1",anchor:"100%"},{id:"TextField5",xtype:"textfie ld",fieldLabel:"Text2",anchor:"100%"},{id:"TextFie ld6",xtype:"textfie
    This is the new code

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="administracion_Test" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <ext:Panel ID="pnClientes" runat="server" Height="800" Title="Page" Icon="Group" Frame="true" >     
        <Body>
            <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="false" FitHeight="true"  >
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.7">
                        <ext:Panel ID="Panel1" runat="server" Border="false" BodyStyle="padding-right:5px;" >
                        <Body>
                        <ext:Panel runat="server" Border="false" Height="300" Title="Block" >
                        <Body>Some Content!</Body>
                        </ext:Panel>
                        </Body>             
                        </ext:Panel>                    
                    </ext:LayoutColumn>
                    <ext:LayoutColumn ColumnWidth="0.3" >
                    <ext:Panel ID="Panel2" runat="server" Border="false" >
                    <Body>
                    <ext:FitLayout ID="FitLayout3" runat="server">
                    <ext:TabPanel ID="TabPanel1" runat="server" LayoutOnTabChange="true">
                    <tabs>
                    <ext:Tab ID="tab1" runat="server" Title="Tab 1" Icon="Pencil"  >
                    <Body>
                    <ext:ContainerLayout runat="server">
                    <ext:FormPanel ID="FormPanel1" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout1" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="textbox1" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="textbox2" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="textbox3" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="combo1" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                    </ext:ContainerLayout>
                    <ext:ContainerLayout ID="ContainerLayout2" runat="server">      
                    <ext:FormPanel ID="FormPanel2" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout2" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField4" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField5" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField6" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox2" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                    </ext:ContainerLayout>
                                                     
                    </Body>
                    </ext:Tab>
                    <ext:Tab ID="tab2" runat="server" Title="Tab 2" Icon="Star" >
                    <Body>
                    <ext:ContainerLayout ID="ContainerLayout1" runat="server">
                     <ext:FormPanel ID="FormPanel3" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout3" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField2" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField3" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox1" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                    </ext:ContainerLayout>
                    <ext:ContainerLayout ID="ContainerLayout3" runat="server">
                     <ext:FormPanel ID="FormPanel4" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout4" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField7" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField8" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField9" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox3" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                    </ext:ContainerLayout>
 
                    </Body>
                    </ext:Tab>

                    </tabs>
                    </ext:TabPanel>
                    
                    </ext:FitLayout>
                    </Body>
                    </ext:Panel>
                    
                    </ext:LayoutColumn>
                    
                </Columns>
            </ext:ColumnLayout>
        </Body>
    </ext:Panel>
    </form>
</body>
</html>
  4. #4
    Sep 07, 2009, 7:31 PM

    RE: FormPanel problem in tabs with layout colums

    Hi,

    Both FormPanels in single ContainerLayout
  5. #5
    Sep 07, 2009, 7:40 PM

    RE: FormPanel problem in tabs with layout colums

    Thank Vladsh, it works!. But I have a question.


    Always I need to include the controls inside a tab in a contanierLayout?


    Thanks in advance
  6. #6
    Sep 07, 2009, 8:17 PM

    RE: FormPanel problem in tabs with layout colums

    Now I have another trouble,

    The ContentLayout works fine with the FormPanel's, but when I try to put a FormPanel inside other Panel, newly appear the form field size error.

    I'm only put a panel with FormGroup property in true

    Below the code

    
                    <ext:Panel ID="Panel3" runat="server" Title="Test Form Group" FormGroup="true" Frame="true">
                    <Body>
                     <ext:FormPanel ID="FormPanel3" runat="server"  BodyStyle="padding:5px;" Frame="true">
                            <Body>
                            <ext:FormLayout ID="FormLayout3" runat="server">
                                   <ext:Anchor Horizontal="100%">                                    
                                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Text1" />                                                                                
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField2" runat="server" FieldLabel="Text2"  />
                                   </ext:Anchor>

                                   <ext:Anchor Horizontal="100%">
                                        <ext:TextField ID="TextField3" runat="server" FieldLabel="Text3"  />
                                   </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                   <ext:ComboBox 
                                        ID="ComboBox1" 
                                        runat="server" 
                                        Editable="true" 
                                        TypeAhead="true" 
                                        Mode="Local"
                                        ForceSelection="true"
                                        TriggerAction="All" 
                                        EmptyText ="Choose an Item" 
                                        Select&#111;nfocus="true"
                                        FieldLabel="Items" 
                                        AllowBlank="false" >
                                        <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="1" />
                                        <ext:ListItem Text="Item 4" Value="2" />                                        
                                        </Items>
                                   </ext:ComboBox>
                                   </ext:Anchor>
                                    </ext:FormLayout>
                        
                        
                        </body>
                    </ext:FormPanel>
                     </body>
                     </ext:Panel>
  7. #7
    Sep 08, 2009, 6:42 AM

    RE: FormPanel problem in tabs with layout colums

    Hi,

    Use FitLayout
    <ext:Panel ID="Panel3" runat="server" Title="Test Form Group" FormGroup="true"...
        <Body>
              <ext:FitLayout...
                 <ext:FormPanel ID="FormPanel3"
  8. #8
    Sep 08, 2009, 12:46 PM

    RE: FormPanel problem in tabs with layout colums

    Thanks vladsh, sorry I don't know about layout.

    I'm put the FormPanel inside FitLayout, and now have other problem, the form is showed short, i need to set a fixed height on Panel or in FormPanel, but is better the original behavior, the automatic height.

    When I use a FixLayout, is necessary put fixed height and width?


    Thanks
  9. #9
    Sep 08, 2009, 12:52 PM

    RE: FormPanel problem in tabs with layout colums

    Hi,

    Yes, you need provide fixed size for container which contains FitLayout
  10. #10
    Sep 08, 2009, 1:18 PM

    RE: FormPanel problem in tabs with layout colums

    Thank Vladsh, it's works fine!
Page 1 of 2 12 LastLast

Similar Threads

  1. FormPanel + GridPanel Layout Incorrect
    By jonasscalar in forum 2.x Help
    Replies: 5
    Last Post: Mar 27, 2012, 3:04 PM
  2. FormPanel column layout Error in IE!
    By qq899817 in forum 1.x Help
    Replies: 2
    Last Post: Apr 13, 2011, 4:24 PM
  3. [CLOSED] FormPanel composite fields not accessible whose items span multiple tabs in tabpanel
    By michelledmello in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 06, 2010, 8:51 AM
  4. formpanel looses layout!!!
    By Kamal in forum 1.x Help
    Replies: 2
    Last Post: Jan 07, 2010, 4:32 AM
  5. Assciate a CheckboxSelectionModel to a colums in Gridview
    By matmani in forum 1.x Help
    Replies: 0
    Last Post: Jan 09, 2009, 5:18 PM

Posting Permissions