What's New?

[CLOSED] Layout problem with fieldset

  1. #1
    Jul 21, 2010, 4:43 PM

    [CLOSED] Layout problem with fieldset

    when layout is set with fieldset, a problem occurred.
    last fields of "Title" fieldset is overlapped by other fieldset.

    please refer to the attached file.

    source code is below.

    Thanks in advance.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Activity_New.aspx.cs" Inherits="SCMS.WEB.WEB_SFA_Activity_Activity_New" %>
<%@ 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 runat="server">
<title>제목 없음</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager" runat="server">
</ext:ResourceManager>
 
 
 
<asp:SqlDataSource ID="SqlDataSourcePriority" runat="server" 
ConnectionString="<%$ ConnectionStrings:SCEGDBConnectionString %>"
>
</asp:SqlDataSource>
 
<ext:Store ID="StorePriority" runat="server" DataSourceID="SqlDataSourcePriority">
<Reader>
<ext:JsonReader IDProperty="CODE_ID">
<Fields>
<ext:RecordField Name="CODE_ID"/>
<ext:RecordField Name="CODE_NAME" /> 
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
 
<asp:SqlDataSource ID="SqlDataSourceOpenTo" runat="server" 
ConnectionString="<%$ ConnectionStrings:SCEGDBConnectionString %>"
>
</asp:SqlDataSource>
 
<ext:Store ID="StoreOpenTo" runat="server" DataSourceID="SqlDataSourceOpenTo">
<Reader>
<ext:JsonReader IDProperty="CODE_ID">
<Fields>
<ext:RecordField Name="CODE_ID"/>
<ext:RecordField Name="CODE_NAME" /> 
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
 
<asp:SqlDataSource ID="SqlDataSourceManager" runat="server" 
ConnectionString="<%$ ConnectionStrings:SCEGDBConnectionString %>"
>
</asp:SqlDataSource>
 
<ext:Store ID="StoreManager" runat="server" DataSourceID="SqlDataSourceManager">
<Reader>
<ext:JsonReader IDProperty="CODE_ID">
<Fields>
<ext:RecordField Name="CODE_ID"/>
<ext:RecordField Name="CODE_NAME" /> 
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store> 
<ext:Panel 
ID="Panel2" 
runat="server"
Title="Activity"
PaddingSummary="5px 5px 0"
Frame="true"
>
<Items>
<ext:FieldSet ID="FieldSetHeader" 
runat="server"
CheckboxToggle="false"
Title="Title"
 
Collapsed="false"
LabelWidth="75"
Border="true"
Layout="Form"
Frame ="true"
Collapsible ="false"
ForceLayout="true"
>
<Items>
 
<ext:TextField ID="TxTitle" FieldLabel="Title" runat="server" Width ="450" AllowBlank="false" AnchorHorizontal="80%"></ext:TextField>
<ext:TextField ID="TxIntro" FieldLabel="Introduction" runat="server" Width ="450" AllowBlank="true" AnchorHorizontal="80%"></ext:TextField>
 
<ext:Container ID="ContainerMinor" runat="server" Layout="Column">
<Items>
<ext:Container ID="CtPriority" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
<Items>
<ext:ComboBox ID="CbPriority" runat="server" 
StoreID="StorePriority" 
ValueField="CODE_ID"
DisplayField="CODE_NAME" 
FieldLabel = "Priority" 
>
<CustomConfig>
<ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
<ext:DateField ID="DFStart" runat="server" FieldLabel="From" AnchorHorizontal="80%" Format="yyyy-MM-dd" AltFormats="yyyy-MM-dd"/>
</Items>
</ext:Container>
<ext:Container ID="CtOpenTo" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
<Items>
<ext:ComboBox ID="CbOpenTo" runat="server" 
StoreID="StoreOpenTo" 
ValueField="CODE_ID"
DisplayField="CODE_NAME" 
FieldLabel = "Open To" 
>
<CustomConfig>
<ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
 
<ext:DateField ID="DFFinish" runat="server" FieldLabel="To" AnchorHorizontal="80%" Format="yyyy-MM-dd" AltFormats="yyyy-MM-dd" />
</Items>
</ext:Container>
<ext:Container ID="CtManager" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
<Items>
<ext:ComboBox ID="CbManager" runat="server" 
StoreID="StoreManager" 
ValueField="CODE_ID"
DisplayField="CODE_NAME" 
FieldLabel = "Manager" 
>
<CustomConfig>
<ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
</Items>
</ext:Container>
</Items>
</ext:Container>
 
</Items>
 
</ext:FieldSet>
 
<ext:FieldSet ID="FieldSetContent" 
runat="server"
CheckboxToggle="false"
Title="Content"
AutoHeight="true"
Collapsed="false"
LabelWidth="75"
Border="true"
Layout="Form"
Collapsible ="false"
>
<Items>
<ext:Panel ID="PanelActivity" runat="server" Frame="false" Border="false" Height="250" Title="Content" Layout="fit">
<Items>
<ext:HtmlEditor ID="HtmlEditor" runat="server" AutoPostBack="false">
<Plugins> 
<ext:GenericPlugin ID="HtmlUX" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Word" 
Path="../../../resources/jscript/Ext.ux.HtmlEditor.Plugins-0.2-all.js" /> 
<ext:GenericPlugin ID="GenericPlugin1" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Table"/>
<ext:GenericPlugin ID="GenericPlugin2" runat="server" InstanceName="Ext.ux.form.HtmlEditor.SpecialCharacters"/> 
</Plugins> 
</ext:HtmlEditor>
</Items>
 
</ext:Panel>
</Items>
</ext:FieldSet>
 
<ext:FieldSet ID="FieldSetFile" 
runat="server"
CheckboxToggle="false"
Title="File"
AutoHeight="true"
Collapsed="false"
LabelWidth="75"
Border="true"
Layout="Form"
Collapsible ="false"
>
<Items>
<ext:LinkButton ID="btnEditFileDown" runat="server" Icon="ScriptSave" CommandName="FileDown" >
</ext:LinkButton> 
 
<ext:LinkButton ID="btnDeleteFileDown" runat="server" Icon="Cancel" Text="Delete" CommandName="FileDownDelete" >
 
</ext:LinkButton> 
<ext:DisplayField ID="FileNameUploaded" runat="server" Hidden="true"></ext:DisplayField>
<ext:DisplayField ID="NoticeSeqID" runat="server" Hidden="true"></ext:DisplayField>
<ext:DisplayField ID="FileSeqIDUploaded" runat="server" Hidden="true"></ext:DisplayField>
 
<ext:FileUploadField ID="FileUpload" runat="server" FieldLabel="Attach File" Icon="Attach" AnchorHorizontal="100%" />
</Items>
</ext:FieldSet>
 
</Items> 
</ext:Panel> 
</form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: layout.png  Views: 198  Size: 10.8 KB  ID: 1396  
    Last edited by geoffrey.mcgill; Jul 21, 2010 at 5:33 PM. Reason: please use [code] tags
  2. #2
    Jul 21, 2010, 5:38 PM
    Hi skyone,

    When I run your code sample an Exception is thrown. Is all that code required to reproduce the problem?
    Last edited by geoffrey.mcgill; Jul 21, 2010 at 7:01 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
    Jul 22, 2010, 6:55 AM

    ok~~~~~~~~~~~~~~~~~~~~~~~~

    i don't think you need full functional code.
    but.. if you need...

    i can guess the combo box in fieldset cause the problem.

    <%@ 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">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager" runat="server">
</ext:ResourceManager>
 
 
 
<ext:Panel 
ID="Panel2" 
runat="server"
Title="Activity"
PaddingSummary="5px 5px 0"
Frame="true"
>
<Items>
<ext:FieldSet ID="FieldSetHeader" 
runat="server"
CheckboxToggle="false"
Title="Title"
 
Collapsed="false"
LabelWidth="75"
Border="true"
Layout="Form"
Frame ="true"
Collapsible ="false"
ForceLayout="true"
>
<Items>
 
<ext:TextField ID="TxTitle" FieldLabel="Title" runat="server" Width ="450" AllowBlank="false" AnchorHorizontal="80%"></ext:TextField>
<ext:TextField ID="TxIntro" FieldLabel="Introduction" runat="server" Width ="450" AllowBlank="true" AnchorHorizontal="80%"></ext:TextField>
 
<ext:Container ID="ContainerMinor" runat="server" Layout="Column">
<Items>
<ext:Container ID="CtPriority" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
<Items>
<ext:ComboBox ID="CbManager" runat="server" 
FieldLabel = "Manager" 
>
<Items>
<ext:ListItem Text="aaa" />
<ext:ListItem Text="bbb" />
<ext:ListItem Text="ccc" />
</Items>
<CustomConfig>
<ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
<ext:DateField ID="DFStart" runat="server" FieldLabel="From" AnchorHorizontal="80%" Format="yyyy-MM-dd" AltFormats="yyyy-MM-dd"/>
</Items>
</ext:Container>
<ext:Container ID="CtOpenTo" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
<Items>
 
 
<ext:DateField ID="DFFinish" runat="server" FieldLabel="To" AnchorHorizontal="80%" Format="yyyy-MM-dd" AltFormats="yyyy-MM-dd" />
</Items>
</ext:Container>
<ext:Container ID="CtManager" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
<Items>
 
</Items>
</ext:Container>
</Items>
</ext:Container>
 
</Items>
 
</ext:FieldSet>
 
<ext:FieldSet ID="FieldSetContent" 
runat="server"
CheckboxToggle="false"
Title="Content"
AutoHeight="true"
Collapsed="false"
LabelWidth="75"
Border="true"
Layout="Form"
Collapsible ="false"
>
<Items>
<ext:Panel ID="PanelActivity" runat="server" Frame="false" Border="true" Height="250" Title="Content" Layout="fit">
<Items>
<ext:HtmlEditor ID="HtmlEditor" runat="server" AutoPostBack="false">
<Plugins> 
<ext:GenericPlugin ID="HtmlUX" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Word" 
Path="../../../resources/jscript/Ext.ux.HtmlEditor.Plugins-0.2-all.js" /> 
<ext:GenericPlugin ID="GenericPlugin1" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Table"/>
<ext:GenericPlugin ID="GenericPlugin2" runat="server" InstanceName="Ext.ux.form.HtmlEditor.SpecialCharacters"/> 
</Plugins> 
</ext:HtmlEditor>
</Items>
 
</ext:Panel>
</Items>
</ext:FieldSet>
 
<ext:FieldSet ID="FieldSetFile" 
runat="server"
CheckboxToggle="false"
Title="File"
AutoHeight="true"
Collapsed="false"
LabelWidth="75"
Border="true"
Layout="Form"
Collapsible ="false"
>
<Items>
<ext:LinkButton ID="btnEditFileDown" runat="server" Icon="ScriptSave" CommandName="FileDown" >
</ext:LinkButton> 
<ext:LinkButton ID="btnDeleteFileDown" runat="server" Icon="Cancel" Text="Delete" CommandName="FileDownDelete" >
</ext:LinkButton> 
<ext:DisplayField ID="FileNameUploaded" runat="server" Hidden="true"></ext:DisplayField>
<ext:DisplayField ID="NoticeSeqID" runat="server" Hidden="true"></ext:DisplayField>
<ext:DisplayField ID="FileSeqIDUploaded" runat="server" Hidden="true"></ext:DisplayField>
<ext:FileUploadField ID="FileUpload" runat="server" FieldLabel="Attach File" Icon="Attach" AnchorHorizontal="100%" />
</Items>
</ext:FieldSet>
 
</Items> 
</ext:Panel> 
</form>
</body>
</html>
  4. #4
    Jul 23, 2010, 10:47 AM
    Hi,

    Your sample gives reproduces another problem. The fields (in the ContainerMinor) are not visible.
    You have to provide fixed height for ContainerMinor or add the following LayoutConfig to the ContainerMinor
    <LayoutConfig>
     <ext:ColumnLayoutConfig FitHeight="false" />
</LayoutConfig>
    Here is modified sample
    <%@ 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager" runat="server">
    </ext:ResourceManager>
    <ext:Store ID="StorePriority" runat="server" >
        <Reader>
            <ext:JsonReader IDProperty="CODE_ID">
                <Fields>
                    <ext:RecordField Name="CODE_ID" />
                    <ext:RecordField Name="CODE_NAME" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    
    <ext:Store ID="StoreOpenTo" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="CODE_ID">
                <Fields>
                    <ext:RecordField Name="CODE_ID" />
                    <ext:RecordField Name="CODE_NAME" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    
    <ext:Store ID="StoreManager" runat="server" >
        <Reader>
            <ext:JsonReader IDProperty="CODE_ID">
                <Fields>
                    <ext:RecordField Name="CODE_ID" />
                    <ext:RecordField Name="CODE_NAME" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Panel ID="Panel2" runat="server" Title="Activity" PaddingSummary="5px 5px 0"
        Frame="true">
        <Items>
            <ext:FieldSet ID="FieldSetHeader" runat="server" CheckboxToggle="false" Title="Title"
                Collapsed="false" LabelWidth="75" Border="true" Layout="Form" Frame="true" Collapsible="false"
                ForceLayout="true">
                <Items>
                    <ext:TextField ID="TxTitle" FieldLabel="Title" runat="server" Width="450" AllowBlank="false"
                        AnchorHorizontal="80%">
                    </ext:TextField>
                    <ext:TextField ID="TxIntro" FieldLabel="Introduction" runat="server" Width="450"
                        AllowBlank="true" AnchorHorizontal="80%">
                    </ext:TextField>
                    <ext:Container ID="ContainerMinor" runat="server" Layout="Column">                        
                        <LayoutConfig>
                            <ext:ColumnLayoutConfig FitHeight="false" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container ID="CtPriority" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
                                <Items>
                                    <ext:ComboBox ID="CbPriority" runat="server" StoreID="StorePriority" ValueField="CODE_ID"
                                        DisplayField="CODE_NAME" FieldLabel="Priority">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
                                        </CustomConfig>
                                    </ext:ComboBox>
                                    <ext:DateField ID="DFStart" runat="server" FieldLabel="From" AnchorHorizontal="80%"
                                        Format="yyyy-MM-dd" AltFormats="yyyy-MM-dd" />
                                </Items>
                            </ext:Container>
                            <ext:Container ID="CtOpenTo" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
                                <Items>
                                    <ext:ComboBox ID="CbOpenTo" runat="server" StoreID="StoreOpenTo" ValueField="CODE_ID"
                                        DisplayField="CODE_NAME" FieldLabel="Open To">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
                                        </CustomConfig>
                                    </ext:ComboBox>
                                    <ext:DateField ID="DFFinish" runat="server" FieldLabel="To" AnchorHorizontal="80%"
                                        Format="yyyy-MM-dd" AltFormats="yyyy-MM-dd" />
                                </Items>
                            </ext:Container>
                            <ext:Container ID="CtManager" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".33">
                                <Items>
                                    <ext:ComboBox ID="CbManager" runat="server" StoreID="StoreManager" ValueField="CODE_ID"
                                        DisplayField="CODE_NAME" FieldLabel="Manager">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
                                        </CustomConfig>
                                    </ext:ComboBox>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                </Items>
            </ext:FieldSet>
            <ext:FieldSet ID="FieldSetContent" runat="server" CheckboxToggle="false" Title="Content"
                AutoHeight="true" Collapsed="false" LabelWidth="75" Border="true" Layout="Form"
                Collapsible="false">
                <Items>
                    <ext:Panel ID="PanelActivity" runat="server" Frame="false" Border="false" Height="250"
                        Title="Content" Layout="fit">
                        <Items>
                            <ext:HtmlEditor ID="HtmlEditor" runat="server" AutoPostBack="false">
                                
                            </ext:HtmlEditor>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:FieldSet>
            <ext:FieldSet ID="FieldSetFile" runat="server" CheckboxToggle="false" Title="File"
                AutoHeight="true" Collapsed="false" LabelWidth="75" Border="true" Layout="Form"
                Collapsible="false">
                <Items>
                    <ext:LinkButton ID="btnEditFileDown" runat="server" Icon="ScriptSave" CommandName="FileDown">
                    </ext:LinkButton>
                    <ext:LinkButton ID="btnDeleteFileDown" runat="server" Icon="Cancel" Text="Delete"
                        CommandName="FileDownDelete">
                    </ext:LinkButton>
                    <ext:DisplayField ID="FileNameUploaded" runat="server" Hidden="true">
                    </ext:DisplayField>
                    <ext:DisplayField ID="NoticeSeqID" runat="server" Hidden="true">
                    </ext:DisplayField>
                    <ext:DisplayField ID="FileSeqIDUploaded" runat="server" Hidden="true">
                    </ext:DisplayField>
                    <ext:FileUploadField ID="FileUpload" runat="server" FieldLabel="Attach File" Icon="Attach"
                        AnchorHorizontal="100%" />
                </Items>
            </ext:FieldSet>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  5. #5
    Jul 23, 2010, 2:31 PM

    Great~!!!!

    Quote Originally Posted by vladimir View Post
    Hi,

    Your sample gives reproduces another problem. The fields (in the ContainerMinor) are not visible.
    You have to provide fixed height for ContainerMinor or add the following LayoutConfig to the ContainerMinor
    Thank you so~~ much from the bottom of my heart.
    It works really well.

Similar Threads

  1. [CLOSED] [1.3] Fieldset layout
    By softmachine2011 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 07, 2012, 2:36 PM
  2. [CLOSED] Layout Frustration: Dynamic HBox inside fieldset
    By jwf in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 20, 2012, 8:40 PM
  3. [CLOSED] checkbox layout mess in FieldSet
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 19, 2011, 12:41 PM
  4. HtmlEditor with label in fieldset layout bug
    By PetrSnobelt in forum 1.x Help
    Replies: 2
    Last Post: Jun 24, 2011, 10:50 AM
  5. Broken layout: Spinner in fieldset
    By PetrSnobelt in forum 1.x Help
    Replies: 1
    Last Post: Jun 13, 2011, 4:30 PM

Posting Permissions