[CLOSED] Reponsive Form

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Reponsive Form

    Hi folks, i would like to know whether it is possible to implement a responsive form.

    On the following example i use HBox to make fields stay side by side, as shown below:
    <ext:ResourceManager runat="server" SeparateUIStyles="false" Theme="Gray" />
    <ext:Window ID="Window1" runat="server" Title="Window" Width="600" Height="250" Layout="FitLayout"
        AutoDataBind="true">
        <Items>
            <ext:FormPanel ID="FormPanel1" runat="server" Title="Form Panel" Layout="HBoxLayout">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="StretchMax" />
                </LayoutConfig>
                <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
                <Defaults>
                    <ext:Parameter Name="Border" Value="false" />
                    <ext:Parameter Name="Flex" Value="1" />
                    <ext:Parameter Name="Layout" Value="anchor" />
                </Defaults>
                <Items>
                    <ext:Panel ID="Panel1" runat="server">
                        <Items>
                            <ext:TextField ID="TextField1" MinWidth="100" runat="server" FieldLabel="First Name"
                                AnchorHorizontal="-5" Name="first" />
                            <ext:TextField ID="TextField2" MinWidth="100" runat="server" FieldLabel="Company"
                                AnchorHorizontal="-5" Name="company" />
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel2" runat="server">
                        <Items>
                            <ext:TextField ID="TextField3" MinWidth="100" runat="server" FieldLabel="Last Name" AnchorHorizontal="100%"
                                Name="last" />
                            <ext:TextField ID="TextField4" MinWidth="100" runat="server" FieldLabel="Email" AnchorHorizontal="100%"
                                Name="email" Vtype="email" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Window>


    But when it is resized to an specified size, i would like that it act like a VBox, as shown below:



    I took a look on the following thread http://forums.ext.net/showthread.php...n-with-ext-net but i was not able to achieve it.

    Thanks in advance.
    Attached Thumbnails ext001.png   ext002.png  
    Last edited by Daniil; Jan 21, 2015 at 1:57 PM. Reason: [CLOSED]
  2. #2
    Hi Raphael,

    Unfortunately, there is no such the functionality built-in in Ext.NET v2. It is coming with v3. Though, maybe not it beta, but further.

    As for Ext.NET v2, I guess you might try to follow this suggestion:
    http://www.sencha.com/forum/showthre...l=1#post535661
  3. #3
    Thank you Daniil. Please keep me posted about any update :)
  4. #4
    This will be possible with Ext.NET v3.
    http://dev.sencha.com/ext/5.0.1/exam...app/index.html
  5. #5
    This functionality is awesome since it enables us to change application layout, specially when end-user is using a mobile. Having this functionality and Crisp Touch theme will let us to push forward :)
    Last edited by RCN; Oct 22, 2014 at 12:46 PM.
  6. #6
    Daniil, take a look on the following example: http://dev.sencha.com/ext/5.0.1/exam...ard/index.html

    The menu is set to "compact" mode when the window is resized. Fully responsive :)
  7. #7
    Yes, that is excellent functionality!

    Before migrating from v2 to v3 do not forget to look at the breaking changes document:)
  8. #8
    I will start to migrate the app at the moment that the v3 beta is available. I will keep you posted about any issue that i eventually find and don't worry, i will read the bc doc :)
  9. #9
    The ResponsiveConfig support has been added for v3 in SVN, the revision #6167.

    The example's location is "Miscellaneous/Responsive/Basic/".

    It will go to the next v3.0 release which should appear quite soon.
  10. #10
    Awesome Daniil :)
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: Dec 19, 2013, 2:16 PM
  2. Replies: 4
    Last Post: Aug 13, 2012, 1:24 PM
  3. Replies: 5
    Last Post: May 11, 2012, 5:56 PM
  4. Replies: 2
    Last Post: Aug 29, 2011, 4:53 PM
  5. Replies: 1
    Last Post: Aug 02, 2011, 1:59 PM

Posting Permissions