[CLOSED] Layout auto - rearange

  1. #1

    [CLOSED] Layout auto - rearange

    Hi,

    I was looking into the Desktop feature that is really neat, but I came across a problem. I need to create a window that holds a lot of fields that are grouped inside fieldsets that results in having a really long page. And when the user resizes this window, it still remains a really long page that has lots of empty space.
    I tried a variety of layouts, but I could not find one that would at least re-arrange the fieldsets to be one next to the other once the width of the window would permit it.
    In other words, if the width of the window can fit 2 fieldsets, they should be one next to the other, otherwise, one below the other.

    Is there a feature I could use to do this?
  2. #2
    Hello @stefanos!

    Please provide a simplified code sample demonstrating how to reproduce the scenario.

    The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.

    Tips for creating simplified code samples

    If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.

    When posting your code samples in the forums, please paste that sample within [CODE] tags. The [CODE] tags will add formatting and syntax highlighting to your sample.

    The following two forum posts provide many excellent tips for posting in the forums:

    1. More Information Required
    2. Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
  3. #3
    In the following code, the "AutoLayout" value of the Layout property of the Window is where my question lies, and instead of 6 textfields, in my case I have arround 20 in each fieldset. When you resize the window, the fieldsets stay one below the other, when I would like them to go one next to the other as soon as the width can fit them both.
    <ext:DesktopModuleProxy runat="server">
        <Module ModuleID="create-study">
            <Shortcut Name="Window1" IconCls="x-grid-shortcut" SortIndex="1" />
            <Launcher Text="Window1" Icon="Table"  />
            <Window>
                <ext:Window runat="server" Icon="Table" 
                    Width="740" Height="780" Layout="AutoLayout"               
                    Resizable="true" Title="Window1" AutoScroll="true">
                    <Items>
    <ext:FieldSet runat="server" AutoScroll="true" Width="450" ID="Fieldset1" Title="Fieldset1" Collapsible="true" Margin="5">
     <Items>
    <ext:TextField runat="server" ID="TextField1" FieldLabel="TextField1"  Width="400" LabelWidth="150" ReadOnly="true" />
    <ext:TextField runat="server" ID="TextField2" FieldLabel="TextField2"  Width="400" LabelWidth="150" MaxLength="50" />
    <ext:TextArea  runat="server" ID="TextArea3"  FieldLabel="TextArea3"   Width="400" LabelWidth="150" MaxLength="3999" Height="50" />
    <ext:TextField runat="server" ID="TextField4" FieldLabel="TextField4"  Width="400" LabelWidth="150" MaxLength="50"/>
    <ext:TextField runat="server" ID="TextField5" FieldLabel="TextField5"  Width="400" LabelWidth="150" MaxLength="50"/>
    <ext:TextField runat="server" ID="TextField6" FieldLabel="TextField6"  Width="400" LabelWidth="150" MaxLength="50"/>
     </Items>
    </ext:FieldSet>
     <ext:FieldSet runat="server" AutoScroll="true" Width="450" ID="Fieldset1" Title="Fieldset1" Collapsible="true" Margin="5">
     <Items>
    <ext:TextField runat="server" ID="TextField7" FieldLabel="TextField1"  Width="400" LabelWidth="150" ReadOnly="true" />
    <ext:TextField runat="server" ID="TextField8" FieldLabel="TextField2"  Width="400" LabelWidth="150" MaxLength="50" />
    <ext:TextArea  runat="server" ID="TextArea9"  FieldLabel="TextArea3"   Width="400" LabelWidth="150" MaxLength="3999" Height="50" />
    <ext:TextField runat="server" ID="TextField10" FieldLabel="TextField4"  Width="400" LabelWidth="150" MaxLength="50"/>
    <ext:TextField runat="server" ID="TextField11" FieldLabel="TextField5"  Width="400" LabelWidth="150" MaxLength="50"/>
    <ext:TextField runat="server" ID="TextField12" FieldLabel="TextField6"  Width="400" LabelWidth="150" MaxLength="50"/>
     </Items>
    </ext:FieldSet>
                    </Items>
                 </ext:Window>
            </Window>
        </Module>
    </ext:DesktopModuleProxy>
    This code goes in a control page that is refered to from a module inside the desktop page
    (see how in https://examples4.ext.net/#/Desktop/...tion/Overview/)
  4. #4
    Hello @stefanos!

    Remove the Layout="AutoLayout" from the window (it is auto by default if not specified anyway) and add StyleSpec="float: left" to each of yours fieldsets. This should get you started.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Auto width/height not working for my layout
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 26, 2012, 10:10 PM
  2. [CLOSED] Auto scroll DisplayField. Problem with layout
    By krzak in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 28, 2011, 1:14 PM
  3. Replies: 3
    Last Post: Nov 22, 2010, 2:32 PM
  4. [CLOSED] [1.0] How to auto layout the controls in a tab
    By juane66 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 18, 2010, 9:24 PM
  5. Column Layout auto width problem in IE
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Jan 05, 2009, 10:59 AM

Tags for this Thread

Posting Permissions