ColumnLayout with BoxReorderer

[Master15]

Could anyone help me with a way to get align the fields using the columnwidth and can change the positions using the BoxReorderer?
Because the BoxReorderer works fine with HBox and VBox, but i need a combination of that.

[fabricio.murta]

Hello @Master15!

Can you share a running sample with how far you went with that and what's left to have it working so we can help you on that? We'll gladly help if you provide a code we can actually reproduce what you are saying and know exactly what's missing.

[Master15]

This is a example using Flex, but i need use column, to ajust the width in percentage.
Another question, how i can move one column to another row using boxreorderer, its possible? How i can?

<ext:Window runat="server" Width="550" Height="500" Title="Example">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Defaults>
                <ext:Parameter Name="margin" Value="2" Mode="Raw" />
            </Defaults>
            <Items>
                <ext:Panel runat="server" Frame="true" Flex="1" Title="Row 1">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Defaults>
                        <ext:Parameter Name="margin" Value="2" Mode="Raw" />
                    </Defaults>
                    <Items>
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 1" />
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 2" />
                    </Items>
                    <Plugins>
                        <ext:BoxReorderer runat="server" />
                    </Plugins>
                </ext:Panel>
                <ext:Panel runat="server" Frame="true" Flex="1" Title="Row 2">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Defaults>
                        <ext:Parameter Name="margin" Value="2" Mode="Raw" />
                    </Defaults>
                    <Items>
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 1" />
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 2" />
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 3" />
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 4" />
                    </Items>
                    <Plugins>
                        <ext:BoxReorderer runat="server" />
                    </Plugins>
                </ext:Panel>
                <ext:Panel runat="server" Frame="true" Flex="1" Title="Row 3">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Defaults>
                        <ext:Parameter Name="margin" Value="2" Mode="Raw" />
                    </Defaults>
                    <Items>
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 1" />
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 2" />
                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 3" />
                    </Items>
                    <Plugins>
                        <ext:BoxReorderer runat="server" />
                    </Plugins>
                </ext:Panel>
            </Items>
            <Plugins>
                <ext:BoxReorderer runat="server" />
            </Plugins>
        </ext:Window>

[fabricio.murta]

Hello @Master15!

Wouldn't setting the flex weigh be the same as setting the width? Maybe you don't need to rewrite everything but just distribute the panels' weighs to your liking.

For example, you can use the second batch of panels like this:

                        <ext:Panel runat="server" Frame="true" Flex="1" Title="Column 1" />
                        <ext:Panel runat="server" Frame="true" Flex="3" Title="Column 2" />
                        <ext:Panel runat="server" Frame="true" Flex="2" Title="Column 3" />
                        <ext:Panel runat="server" Frame="true" Flex="4" Title="Column 4" />

That would make 'Column 1' the thinnest, 'Column 3' second thinnest, 'Column 2' the second largest and 'Column 4' the largest. And box-reorderable as you want.

You can convert this in percentage if you are getting widths in percent from code behind. Just that the sum of the flexes is 100% and every individual values represents its percentual. When you have 1, 1, 1, 1, 4 is 100% and each '1' evals to '25%'.

If you have 1 2 3 4, 100% is 10, then 10, 20, 30 and 40% width columns respectively.

Let us know if this still does not do what you need and we get to the column layout which may be more complex to have working as you described.