[CLOSED] Change layout on responsive rule breaks layout

  1. #1

    [CLOSED] Change layout on responsive rule breaks layout

    If you run the following sample on a wide browser everything works as expected


    It also works as expected on a tall browser


    But if you switch from tall to wide and vice versa, layout breaks


    Any ideas to overcome?

    Thanks in advance.

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager Theme="Crisp" runat="server" />
        <ext:Viewport Layout="FitLayout" runat="server">
            <Items>
                <ext:FormPanel Layout="AnchorLayout" runat="server">
                    <ResponsiveConfig>
                        <ext:ResponsiveRule Rule="tall">
                            <Config>
                                <ext:FormPanel Title="Form Panel Tall" runat="server" />
                            </Config>
                        </ext:ResponsiveRule>
                        <ext:ResponsiveRule Rule="wide">
                            <Config>
                                <ext:FormPanel Title="Form Panel Wide" runat="server" />
                            </Config>
                        </ext:ResponsiveRule>
                    </ResponsiveConfig>
                    <Items>
                        <ext:FieldContainer runat="server">
                            <Items>
                                <ext:TextField runat="server" />
                                <ext:TextField runat="server" />
                            </Items>
                            <ResponsiveConfig>
                                <ext:ResponsiveRule Rule="tall">
                                    <Config>
                                        <ext:FieldContainer FieldLabel="Field - Tall" Layout="VBoxLayout" runat="server" />
                                    </Config>
                                </ext:ResponsiveRule>
                                <ext:ResponsiveRule Rule="wide">
                                    <Config>
                                        <ext:FieldContainer FieldLabel="Field - Wide" Layout="HBoxLayout" runat="server" />
                                    </Config>
                                </ext:ResponsiveRule>
                            </ResponsiveConfig>
                        </ext:FieldContainer>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	rp001.png 
Views:	7 
Size:	5.2 KB 
ID:	21351   Click image for larger version. 

Name:	rp002.png 
Views:	6 
Size:	5.0 KB 
ID:	21361   Click image for larger version. 

Name:	rp003.png 
Views:	8 
Size:	5.6 KB 
ID:	21371  
    Last edited by Daniil; Feb 20, 2015 at 1:22 PM. Reason: [CLOSED]
  2. #2
    Hello Raphael!

    To keep the fields in the same line when they fit, and break line when they no longer fit it, just use a fixed ColumnLayout.

    You can use responsive plugin to change anchor, docking or orientation of components.

    In other words, change your line 23 to
    <ext:FieldContainer runat="server" Layout="ColumnLayout">
    And remove the Layout= property from lines 31 and 36.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    It haven't mentioned all reasons but i need to change the layout.

    In other words, change your line 23 to
    <ext:FieldContainer runat="server" Layout="ColumnLayout">
    And remove the Layout= property from lines 31 and 36.
    It's not possible to achieve it by doing that. Please run the following sample.
    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager Theme="Crisp" runat="server" />
        <ext:Viewport Layout="FitLayout" runat="server">
            <Items>
                <ext:FormPanel Layout="AnchorLayout" runat="server">
                    <ResponsiveConfig>
                        <ext:ResponsiveRule Rule="tall">
                            <Config>
                                <ext:FormPanel Title="Form Panel Tall" runat="server" />
                            </Config>
                        </ext:ResponsiveRule>
                        <ext:ResponsiveRule Rule="wide">
                            <Config>
                                <ext:FormPanel Title="Form Panel Wide" runat="server" />
                            </Config>
                        </ext:ResponsiveRule>
                    </ResponsiveConfig>
                    <Items>
                        <ext:FieldContainer Layout="ColumnLayout" runat="server">
                            <Items>
                                <ext:TextField Width="50" runat="server" />
                                <ext:TextField Width="50" runat="server" />
                            </Items>
                            <ResponsiveConfig>
                                <ext:ResponsiveRule Rule="tall">
                                    <Config>
                                        <ext:FieldContainer FieldLabel="Field - Tall" runat="server" />
                                    </Config>
                                </ext:ResponsiveRule>
                                <ext:ResponsiveRule Rule="wide">
                                    <Config>
                                        <ext:FieldContainer FieldLabel="Field - Wide" runat="server" />
                                    </Config>
                                </ext:ResponsiveRule>
                            </ResponsiveConfig>
                        </ext:FieldContainer>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
  4. #4
    Hello, Raphael!

    I believe you will have to re-add the container in order to reconfigure it, then. Maybe using a loader for your fieldContainer.

    The layout of a container cannot be changed on-the-fly, due to its inner workings.

    See this note from sencha API documentation:

    this method cannot be used to change the "type" of layout after the component has been rendered to the DOM. After rendering, this method can only modify the existing layout's configuration properties. The reason for this restriction is that many container layouts insert special wrapping elements into the dom, and the framework does not currently support dynamically changing these elements once rendered.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello everybody,

    Here is a related thread on the Sencha forums.
    http://www.sencha.com/forum/showthread.php?292240

    It is also about no possibility to change a layout on the fly. Though, there is a possibility to configure an existing layout. So, it looks there is a way to switch between VBox and HBox, because it has the same super class. Regards to Phil Guerrant and the well-done ExtJS class system.
    http://www.sencha.com/forum/showthre...=1#post1068098
  6. #6
  7. #7
    Hi,

    Please use Global events
    http://docs.sencha.com/extjs/5.1/5.1...t.GlobalEvents

    In Ext.Net, use GlobalEvents property of ResourceManager
  8. #8
    +10 to you Vladimir. First time i notice ResourceManager's GlobalEvents.

    Once again, thank you all.

    Please mark this thread as closed.

    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var onResponsiveUpdate = function (context) {
                App._fdc.setLayout({ vertical: context.tall });
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager Theme="Crisp" runat="server">
            <GlobalEvents>
                <ResponsiveUpdate Fn="onResponsiveUpdate" />
            </GlobalEvents>
        </ext:ResourceManager>
        <ext:Viewport Layout="FitLayout" runat="server">
            <Items>
                <ext:FormPanel Layout="AnchorLayout" runat="server">
                    <ResponsiveConfig>
                        <ext:ResponsiveRule Rule="tall">
                            <Config>
                                <ext:FormPanel Title="Form Panel Tall" runat="server" />
                            </Config>
                        </ext:ResponsiveRule>
                        <ext:ResponsiveRule Rule="wide">
                            <Config>
                                <ext:FormPanel Title="Form Panel Wide" runat="server" />
                            </Config>
                        </ext:ResponsiveRule>
                    </ResponsiveConfig>
                    <Items>
                        <ext:FieldContainer ID="_fdc" Layout="HBoxLayout" runat="server">
                            <Items>
                                <ext:TextField runat="server" />
                                <ext:TextField runat="server" />
                            </Items>
                        </ext:FieldContainer>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>

Similar Threads

  1. [CLOSED] RendererFormat.Percent breaks layout
    By bbros in forum 3.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 20, 2015, 4:48 AM
  2. Replies: 2
    Last Post: Feb 13, 2015, 10:10 AM
  3. [CLOSED] TreePanel breaks ViewPort layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 29, 2015, 11:14 AM
  4. [CLOSED] SelectBox breaks layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 19, 2015, 11:29 AM
  5. Replies: 0
    Last Post: Sep 17, 2014, 8:05 PM

Tags for this Thread

Posting Permissions