PDA

View Full Version : [CLOSED] Layout auto - rearange



stefanos
Aug 04, 2016, 11:40 AM
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?

fabricio.murta
Aug 05, 2016, 4:53 AM
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 (http://forums.ext.net/showthread.php?61176-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 (http://forums.ext.net/showthread.php?10205-More-Information-Required)
2. Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

stefanos
Aug 05, 2016, 11:23 AM
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 http://examples.ext.net/#/Desktop/Introduction/Overview/)

fabricio.murta
Aug 06, 2016, 6:54 AM
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.