PDA

View Full Version : [CLOSED] Browser issue with migrated code


rgraham
Apr 22, 2020, 5:33 PM
Hi Fabricio (?),

We have code on a button that works in Chrome, but not in the new Edge (the one that is mostly Chrome with a skin on it)


<ext:Button runat="server" Text="Custom Views" ID="btnCustomViews" Icon="Cog">
<Menu>
<ext:Menu runat="server" ShowSeparator="false">
<Items>
<ext:MenuItem ID="btnCreateCustomView" runat="server" Text="Create View">
<Listeners>
<Click Handler="createCustomViews(); #{mode}.setValue('add'); #{winCustomViews}.show();" />
</Listeners>

This calls this item:

<ext:Window
ID="winCustomViews"
runat="server"
Frame="true"
Title="Define Custom Views2"
Width="520"
Height="300"
Modal="true"
Hidden="true"
Layout="Fit"
Maximizable="true">
<Loader AutoLoad="true" Url="~/WebUI/Purchasing/CustomViews.aspx" Mode="Frame" runat="server" ReloadOnEvent="true" TriggerEvent="show">
<LoadMask ShowMask="true" />
<Params>
<ext:Parameter Name="viewId" Value="#{viewId}.getValue()" Mode="Raw" />
<ext:Parameter Name="viewText" Value="#{viewText}.getValue()" Mode="Raw" />
<ext:Parameter Name="Meta" Value="#{txtJSON}.getValue()" Mode="Raw" />
<ext:Parameter Name="GConfig" Value="Ext.encode(App.mrpActionGrid.getState())" Mode="Raw" />
<ext:Parameter Name="FilterConfig" Value="Ext.encode(App.mrpActionGrid.filterHeader.getValue ())" Mode="Raw" />
<%-- <ext:Parameter Name="FilterConfig" Value="#{FilterConfig}.getValue()" Mode="Raw" />--%>
<ext:Parameter Name="mode" Value="#{mode}.getValue()" Mode="Raw" />
</Params>
</Loader>

</ext:Window>

Which contains this markup:


html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

</head>
<body>
<form id="form1" runat="server">
<div>


<ext:ResourceManager runat="server"></ext:ResourceManager>

<ext:UserControlLoader Path="~/WebUI/Controls/CustomViews.ascx" runat="server">

</ext:UserControlLoader>


</div>
</form>
</body>
</html>

which is supposed to load this control:


<ext:Panel
runat="server"
Layout="FitLayout"
Width="500"
Height="250">
<Items>
<ext:FormPanel
ID="fpanelCustomView"
runat="server"
Title="Details"
BodyPadding="5"
ButtonAlign="Right"
Layout="Column">
<Items>

<ext:FieldContainer
runat="server"
Layout="HBoxLayout" ID="FieldContainer3">
<FieldDefaults LabelAlign="Right" LabelWidth="100" />
<Items>

<ext:ComboBox runat="server" ID="txtType" Name="Type" FieldLabel="Type" MarginSpec="15 0 0 5" Text="Application" Width="300" Hidden="true">
<Items>
<ext:ListItem Text="Action" Value="1" />
<ext:ListItem Text="Application" Value="2" />
</Items>
</ext:ComboBox>

</Items>
</ext:FieldContainer>

...<snip>
<Click Fn="closeViewsWindow" />
</Listeners>
</ext:Button>
</Buttons>

</ext:FormPanel>
</Items>
<Listeners>
<AfterLayout Fn="OnLookupLoad" />
</Listeners>
</ext:Panel>

And this (horrible kludge) of code works fine in new Chrome (remember I am embroiled in a massive EXT 2.5.3 -> Ext 5 migration)

But in Edge, it only shows the outer ID="winCustomViews" segment, the ascx control is nowhere to be seen and there are no errors in the console.

In that first piece of code there is this line:

<Click Handler="createCustomViews(); #{mode}.setValue('add'); #{winCustomViews}.show();" />

Is that line still valid EXT markup? I can't find a relevant example on the examples site showing this method of loading subcontent at multiple levels while also passing parameters. Usually when something like this misbehaves there is some kind of error shown in the console window.

Can you provide any guidance? This is suddenly more important than my other issues as we plan on upgrading our users to the new version of our site running on Edge, while leaving them with Chrome 61 running our old site to fall back on while we work out any kinks in the new version.

Thank you for any help!

Bob Graham
rgraham
Apr 22, 2020, 6:50 PM
A little clarity found, if I comment out the Params as below in the Ext.Window:


<ext:Window
ID="winCustomViews"
runat="server"
Frame="true"
Title="Define Custom Views"
Width="520"
Height="300"
Modal="true"
Hidden="true"
Layout="Fit"
Maximizable="true">
<Loader AutoLoad="true" Url="~/WebUI/Purchasing/CustomViews.aspx" Mode="Frame" runat="server" ReloadOnEvent="true" TriggerEvent="show">
<LoadMask ShowMask="true" />
<%--<Params>
<ext:Parameter Name="viewId" Value="#{viewId}.getValue()" Mode="Raw" />
<ext:Parameter Name="viewText" Value="#{viewText}.getValue()" Mode="Raw" />
<ext:Parameter Name="Meta" Value="#{txtJSON}.getValue()" Mode="Raw" />
<ext:Parameter Name="GConfig" Value="Ext.encode(App.mrpActionGrid.getState())" Mode="Raw" />
<ext:Parameter Name="FilterConfig" Value="Ext.encode(App.mrpActionGrid.filterHeader.getValue ())" Mode="Raw" />
<ext:Parameter Name="FilterConfig" Value="#{FilterConfig}.getValue()" Mode="Raw" />
<ext:Parameter Name="mode" Value="#{mode}.getValue()" Mode="Raw" />
</Params>--%>
</Loader>

</ext:Window>


Then the page appears properly, so there is something amiss in the way these parameters are being passed. Strange that it doesn't show anything in the console or the sources panels
fabricio.murta
Apr 22, 2020, 7:38 PM
Hello Bob!

I have a fresh update on Windows yet my Chrome client says



Microsoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18362


And I don't really have this chrome-based MS-Edge installation available to test. Are you getting this using some kind of "insider" program, or just another publicly available source to install that MS-Edge version?

A few "blind shots" would be:

- If you comment just the params using Ext.encode() (or adjust them to use a constant string, neutralizing the use of that method), does it change anything?
- The evaluation order may be different in the new Edge version so it could be evaluating code before the components are built; you would get console error messages in Edge if that's the case (something like "reference to null").
- Did you try drawing a page with a bare window with just that loader and params and it breaks? I believe you have some clues to reduce the problem here.

Hope this helps!
rgraham
Apr 22, 2020, 7:56 PM
Hi Fabricio,

You have the same version of Edge as I do. You can tell it's just Google Chrome by going full-screen, then bringing the mouse cursor to the top edge. If you see an "X" button slide down from the top center of the screen, you are using Microsoft's lightly skinned version of Chrome. (The actual Microsoft version of Edge, now retired, would slide down the whole top edge of the browser with tabs, plus min/restore/close buttons.)

The line that is breaking things is:
<ext:Parameter Name="mode" Value="#{mode}.getValue()" Mode="Raw" />

This is simply passing a string value 'add' or 'update', and this value is surviving to the client, I see it in the iFrame: "mode=add" (without the quotes).

I have tried changing the passing mode from Raw to Value, but this isn't helping.

I'm looking at the code on the client side of the ascx control, but it seems to fail before reaching that.

All is working if I leave out that parameter, except that it defaults to 'update' if you don't successfully pass the 'add' value.

I'll try to get back to you with more, but I'm heading to lunch and I don't know what time your day ends.

I used to live in Sao Paulo as an 11 year old child back in the 60's. Where are you?

Thanks, Bob
fabricio.murta
Apr 22, 2020, 8:38 PM
Hello again, Bob!

According to this article, we are still using old Edge under Edge engine (EdgeHTML?): How to start using the new Microsoft Edge browser for Windows 10 (https://www.windowscentral.com/how-get-started-microsoft-edge-chromium). See the difference in the settings window before and after upgrading.

Maybe what you see coincides with Chrome's and that's just what it is, a coincidence?

Anyway, we are working on the very same Edge version. This is a good step for the issue we have at hand. We would be able to provide a better insight on it if we could reproduce in our side; let us know if you are able to compile the scenario to reproduce the issue in a test case.

May the component with ID="mode" not be rendered in Edge for some reason? I couldn't render that component in my head as well (couldn't find references to it among the code snippets). Now why it works in Chrome would be another mystery.


I used to live in Sao Paulo as an 11 year old child back in the 60's. Where are you?

I am located in Minas Gerais state, Belo Horizonte city (state's capital); lived a couple years in São Paulo state, great place to live.
rgraham
Apr 23, 2020, 5:25 PM
Hi Fabricio,

I solved the problem by passing the mode=add query string parameter through localStorage instead.

I also noticed that the same value (gridState) was being passed TWICE, but only one instance was being used, which made the whole query string twice as big (and I mean BIG). Perhaps Edge has issues with the size of the query string that Chrome doesn't have.

Now back to the twice loading issue when loading these custom views.

I will go back to that thread and add more clarity on what I have discovered.

Thank you for your help, and I apologize that I couldn't give you enough ammunition to give me a perfect response, that was not your fault obviously.

Bob Graham
fabricio.murta
Apr 23, 2020, 6:42 PM
Hello Bob!

Thanks for your feedback, and glad you could find a way to satisfactorily solve the issue you had. Guess I should close this thread for now then, right?
rgraham
Apr 23, 2020, 6:54 PM
Yes, it appears the issue wasn't related to anything internal in EXT that could be identified, so this thread will not really be helpful to anyone else, unless the queryString complexity in Edge is an issue that others might stumble upon.

Thanks for your help!