PDA

View Full Version : [CLOSED] Responsive design not updating



Jurke
Mar 12, 2020, 5:34 PM
Hi
I have problem with a toolbar that I want to be vertical when tall and horizontal when wide. But the change does not apply when the screen goes from wide to tall, I have to reload the page for the change to take effect. How do I solve this?




<ext:Toolbar ID="toolbar1" runat="server">

<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:Toolbar Vertical="true" runat="server"></ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:Toolbar Vertical="false" runat="server"></ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
</ResponsiveConfig>


Best regards
Mikael

fabricio.murta
Mar 12, 2020, 5:42 PM
Hello @jurke!

What is this toolbar docked/associated with? Can you provide a little context where you are inserting it?

Looking forward to your follow-up!

Jurke
Mar 13, 2020, 8:35 AM
Hi
Sure, here comes a test case, also the BodyPaddingSummary is not updating when resizing the window.


<%@ Page Language="C#" %>


<html>
<head runat="server">
<script type="text/javascript">
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>


<ext:Panel ID="pnlMain" runat="server" Border="false" Region="Center" OverflowY="Auto" Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="toolbarShop" StyleSpec="background-color: #d3e0ec;" runat="server">
<Items>
<ext:ToolbarSpacer runat="server" Width="15"></ext:ToolbarSpacer>
<ext:TextField runat="server" ID="tfSok" LabelWidth="90" PaddingSpec="5 0 5 0" Cls="" EnableKeyEvents="true" EmptyText="Sök artikel" Width="250">
<Triggers>
<ext:FieldTrigger Icon="Search" />
</Triggers>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:TextField runat="server" Width="330"></ext:TextField>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:TextField runat="server" Width="250"></ext:TextField>
</ResponsiveConfig>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:TextField>
<ext:ComboBox runat="server" ID="cfArtikelgrupp" Editable="false" Mode="Local" Width="250"
TriggerAction="All"
DisplayField="Name"
ValueField="ID">
<Items>
<ext:ListItem Value="Alla" Text="Alla kategorier"></ext:ListItem>
</Items>
<SelectedItems>
<ext:ListItem Value="Alla"></ext:ListItem>
</SelectedItems>
</ext:ComboBox>
<ext:Button runat="server" Text="Kundvagn" ID="btnCart" IconCls="fas fa-shopping-cart" Cls="btn btn-success cart">
</ext:Button>
<ext:ToolbarFill runat="server"></ext:ToolbarFill>
<ext:Label runat="server" ID="lblInloggad" StyleSpec="cursor:pointer" Text="">
<Callouts>
<ext:Callout runat="server" Title="Logga ut" Trigger="Click" Width="200" Html="<a href='' onClick='App.direct.LogOut()' >Klicka här för att logga ut</a>">
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:Callout runat="server" Alignment="BottomLeft"></ext:Callout>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:Callout runat="server" Alignment="LeftTop"></ext:Callout>
</ResponsiveConfig>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Callout>
</Callouts>
</ext:Label>
</Items>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:Toolbar Vertical="true" runat="server"></ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:Toolbar Vertical="false" runat="server"></ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>


</ResponsiveConfig>
</ext:Toolbar>
</TopBar>
<Items>
</Items>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:Panel runat="server" BodyPaddingSummary="0 0 0 0"></ext:Panel>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:Panel runat="server"></ext:Panel>
</ResponsiveConfig>
</ext:ResponsiveRule>


</ResponsiveConfig>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>




Regards
Mikael

fabricio.murta
Mar 13, 2020, 7:50 PM
Hello again, Jurke!

Thanks for providing a context that reproduces the issue. It looks like the problem might be, given the buttons themselves are not resized with window (viewport) changes, due to the layout it has (fixed width/height).

Just by reading thru your code, it seems you should be setting the responsive config to either panels or toolbars, not buttons directly.

You may be able to address the issue just by using something like packing in your toolbar or the flex config, to indicate a button should take a given proportion of the toolbar. Then a toolbar spacer could help sticking them to the size you want depending on the orientation.

I'll try a few things on your sample and come back shortly with code-driven suggestions.

fabricio.murta
Mar 13, 2020, 11:09 PM
Hello again, Jurke!

Thanks for the test case, I was a bit confused by the text fields and other stuff with ResponsiveConfig in your example at first, but then I figured out what you meant.

The BodyPaddingSummary config is a proxy (alias, shortcut you name it) to BodyPadding (https://docs.sencha.com/extjs/7.1.0/classic/Ext.panel.Panel.html#cfg-bodyPadding). Use it instead with responsive rules to get any effect.

The Toolbar's Vertical setting (https://docs.sencha.com/extjs/7.1.0/classic/Ext.toolbar.Toolbar.html#cfg-vertical) is almost fine, except it does not implement a setter, if you look at its client-side documentation we just linked here.

According to the documentation about Ext.mixin.Responsive.responsiveConfig (https://docs.sencha.com/extjs/7.1.0/classic/Ext.mixin.Responsive.html#cfg-responsiveConfig) (it is way down in the description, so I will transcribe it here):


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

So, anything not implmenting client-side setter method (having a corresponding set<config_name_here>() method) won't participate in the role of responsive updates.

Furthermore, we could instead just switch the toolbar's layout from VBoxLayout to HBoxLayout. They stand for, respectively vertical and horizontal box layouts, as the names suggest. Unfortunately again, switching whole layouts, at least between these two, is broken since at least Ext.NET 3 (Ext JS 5) (https://www.sencha.com/forum/showthread.php?299328-layout-crashes-on-toolbar-responsive-plugin-configuration). It seems a design trait must have prevented this from being fixed.

Unfortunately, at the moment there's no quick way around the toolbar issue. I'll have to put a little more thought to it to find an alternative to attain this layout change on resize. In fact, even calling the toolbar's setLayout() method to switch between vertical and horizontal layouts triggers the same issue. "Emulating" the toolbar through a "docked panel" (same visual effect, other, "barer", component), didn't work either.

Jurke
Mar 18, 2020, 8:54 AM
Hi
To bad the toolbar position is not working, let me know if you manage to find something to make it work.
Thanks for you input!

Regards
Mikael

fabricio.murta
Mar 18, 2020, 8:23 PM
Hello Jurke!

Sorry for the delay, but we really didn't find a way yet to attain the same objective. The attempt's we've been doing result in the same layout issue so, for now we have no means to implement this approach.

In other words, responsive config does not support the scenario involving toolbars or layout changes in docked items in a container.

We are not still out of alternatives, if we find a way to properly simulate your scenario (or in hopes it could be acceptable), we'll share it here.

fabricio.murta
Mar 18, 2020, 8:43 PM
Hello again, @Jurke!

I just found a way to attain your layout by defining two toolbars. I will show just the key parts of the code (for brevity) let us know if it does not work for you.

Basically, you will build two toolbars, as said above, one vertical, docked to the left, and another as usual, horizontal, docked to the top.



<TopBar>
<ext:Toolbar runat="server" />
<Items>(...)</Items>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:Toolbar runat="server" Hidden="true">
</ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:Toolbar runat="server" Hidden="false">
</ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Toolbar>
</TopBar>
<LeftBar>
<ext:Toolbar runat="server" Vertical="true" />
<Items>(...)</Items>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="tall">
<ResponsiveConfig>
<ext:Toolbar runat="server" Hidden="false">
</ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
<ext:ResponsiveRule Rule="wide">
<ResponsiveConfig>
<ext:Toolbar runat="server" Hidden="true">
</ext:Toolbar>
</ResponsiveConfig>
</ext:ResponsiveRule>
</ResponsiveConfig>
</ext:Toolbar>
</LeftBar>


So, instead of updating the full toolbar layout and docking it elsewhere, the two toolbars are always there and are just hidden and shown according to the viewport dimensions.

You can promote code reusage by creating a custom/web control, or via code behind, and then drawing the settings you want given a parameter you pass to the web control (to make buttons narrower and toolbar vertical in left bar, and wider horizontal in top bar), or drawing them accordingly from code behind.

Keep in mind if you follow the code behind approach, you should create new instances of components for each toolbar, else they will be rendered in just one. You can define both toolbars in ASPX and reference their IDs to populate the items. The inner items then won't need responsive rules, as they will be static. This should also allow faster layout updates at the price of more memory for the two toolbars potentially rendered to the page.

Hope this helps!

Jurke
Mar 19, 2020, 10:25 AM
Hi
Thank you for finding a solution.
But if I use a left bar then I can't fit my content on a phone. When I set Vertical="true" for the ToolBar the items in it are stacked on top of each other, but the toolbar is still in the top. This is what I want to achieve, maybe its not possible.

Regards
Mikael

fabricio.murta
Mar 19, 2020, 5:23 PM
Hello again, Mikael!

Don't worry, just add both toolbars to the <TopBar> block and that's it.

What? You're getting an exception? Of course, the TopBar and LeftBar are just convenience blocks, equivalent to:



<DockedItems>
<ext:Toolbar runat="server" Dock="Top" />
<ext:Toolbar runat="server" Dock="Left" />
</DockedItems>


So they just accept a single component within, by design. Just set both toolbars inside the same <DockedItems> block, and both with Dock="Top"; then you should get the behavior you described.

Hope this helps!

Jurke
Mar 23, 2020, 9:23 AM
Hi
This works, thanks for you input!

Regards
Mikael

fabricio.murta
Mar 23, 2020, 8:34 PM
Glad it worked, and thanks for the feedback!