PDA

View Full Version : [CLOSED] Reponsive Form



RCN
Oct 21, 2014, 7:44 PM
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>


http://forums.ext.net/attachment.php?attachmentid=15711&stc=1

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

http://forums.ext.net/attachment.php?attachmentid=15721&stc=1

I took a look on the following thread http://forums.ext.net/showthread.php?25132-CLOSED-how-I-can-implement-responsive-design-in-a-web-application-with-ext-net but i was not able to achieve it.

Thanks in advance.

Daniil
Oct 22, 2014, 5:36 AM
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/showthread.php?114922&p=535661&viewfull=1#post535661

RCN
Oct 22, 2014, 12:21 PM
Thank you Daniil. Please keep me posted about any update :)

Daniil
Oct 22, 2014, 12:27 PM
This will be possible with Ext.NET v3.
http://dev.sencha.com/ext/5.0.1/examples/responsive-app/index.html

RCN
Oct 22, 2014, 12:42 PM
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 :)

RCN
Oct 22, 2014, 1:17 PM
Daniil, take a look on the following example: http://dev.sencha.com/ext/5.0.1/examples/executive-dashboard/index.html

The menu is set to "compact" mode when the window is resized. Fully responsive :)

Daniil
Oct 22, 2014, 1:26 PM
Yes, that is excellent functionality!

Before migrating from v2 to v3 do not forget to look at the breaking changes document:)

RCN
Oct 22, 2014, 1:35 PM
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 :)

Daniil
Nov 19, 2014, 11:06 AM
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.

RCN
Nov 19, 2014, 11:11 AM
Awesome Daniil :)

RaphaelSaldanha
Jan 05, 2015, 5:38 PM
Daniil, i am trying implement a responsive form as described on post #1 but unfortunately with no success.

I tried to reduce the scenario to bare minumum, but again with no success.

On the example, form's title changes as expected, but changing form's LabelAlign (Lines 15 and 22) has no visible effect.

Is it possible to set just "first-level" object properties or i missed something?

Thanks in advance.



<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport Layout="FitLayout" runat="server">
<Items>
<ext:FormPanel Title="Form Panel" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<Config>
<ext:FormPanel Title="Form Panel Tall" runat="server">
<FieldDefaults LabelAlign="Top" />
</ext:FormPanel>
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<Config>
<ext:FormPanel Title="Form Panel Wide" runat="server">
<FieldDefaults LabelAlign="Left" />
</ext:FormPanel>
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
<Items>
<ext:Panel runat="server">
<Items>
<ext:TextField FieldLabel="Field 1" runat="server" />
<ext:TextField FieldLabel="Field 2" runat="server" />
</Items>
</ext:Panel>
<ext:Panel runat="server">
<Items>
<ext:TextField FieldLabel="Field 3" runat="server" />
<ext:TextField FieldLabel="Field 4" runat="server" />
</Items>
</ext:Panel>
</Items>
</ext:FormPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Jan 16, 2015, 9:13 AM
Hi Raphael,

Apologize for the delay in answering.

First of all, I have committed something in the revision #6252 (trunk) to get your example runnable with ScriptMode="Debug". "Runnable" doesn't mean working as you need.

Now about the ResponsiveConfig functionality.

It works through setters of properties.

For example, the Title option works through:

App.FormPanel1.setTitle("new title");

Unfortunately, there is no a setter for FieldDefaults, i.e. no this method:

App.FormPanel1.setFieldDefaults({...});

I tried this ResponsiveConfig for a TextField itself:

<ext:TextField ID="TextField1" FieldLabel="Field 1" runat="server">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<Config>
<ext:TextField runat="server" LabelAlign="Top" />
</Config>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<Config>
<ext:TextField runat="server" LabelAlign="Left" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:TextField>

It turned out that a TextField has no a setLabelAlign method.

Once you implement such a method you should get it working.

See also
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.mixin.Responsive-cfg-responsiveConfig


For a config to participate as a responsiveConfig it must have a "setter" method. In the above example, a "setRegion" method must exist.

Hope this helps.