PDA

View Full Version : [CLOSED] Pager Issues



CanopiusApplications
Mar 20, 2014, 4:52 PM
Guys

I have you a really strange issue with the pager control which only occurs randomly.
Basically when paging through a grid the application will appear to freeze (as per image) click the pager button again and it comes back to life. The form also gets a double border.

I can't post the code due to it being embedded into an app. The form is in a user control which is loaded in a user control loader.

Ta,
D

CanopiusApplications
Mar 20, 2014, 6:19 PM
I have noticed a common bit of code that exists in the forms that exhibit the problem.

They all have a suspendlayout = true on load and then a suspendlayout = false once finished -- I have removed this code and this seems to have resolved the intermittent problem on the pager.

Will update the thread as I continue the testing.

D

Daniil
Mar 21, 2014, 3:39 AM
Hi CanopiusApplications,

Yes, I also have seen issues while using suspendLayouts and resumeLayouts calls. It might be very hard to fix. Though, hard to say anything concrete without a test case.

CanopiusApplications
Mar 21, 2014, 9:03 AM
Hi Danil

I think removing these has fixed the issue as I have not seen this since removing the code.

App UAT is due to start in the next few days so if I get sometime I might try and knock up something for you guys to look at.

What makes it even more tricky is the fact there was no pattern to its occurrence sometimes it would happen and other times not so even if I managed to reproduce on my machine then no guarantee you would see it. Our tester running IE 11 did not even find the issue at all.

D

CanopiusApplications
Mar 21, 2014, 6:00 PM
Unfortunately this error is still there although far less frequent. I have removed all code that has suspent and resume layouts but no luck so something else is causing.

Danil you said you had seen this before so in those case can you give me a rough idea what was causing it please.

Ta,
Dan

Daniil
Mar 22, 2014, 2:38 PM
Danil you said you had seen this before so in those case can you give me a rough idea what was causing it please.

Well, I said the following:

Yes, I also have seen issues while using suspendLayouts and resumeLayouts calls.
To clarify, I have not seen the same issue, but I have seen one issue using suspendLayouts and resumeLayouts calls:
https://github.com/extnet/Ext.NET/issues/185

If you say that it is reproducible regardless there is a suspendLayout call or not, then it should be not related to it at all. Something is wrong with layouting. Sorry, no concrete ideas.

CanopiusApplications
Mar 24, 2014, 9:08 AM
Yes it would appear that it was not suspend layout that was the cause although the other forms which had the problem now do now seem to have the problem since removing suspend layout.

When I say reproducible by this I mean it still happens, it does not mean there is a set way to force the error -- some times it will happen after clicking the pager 10 times and other time 50 -- it is a really really annoying bug.

Will keep posting as I go.

D

Daniil
Mar 24, 2014, 1:47 PM
Agree, such issues are very frustrating. We hope you will be able to provide us with something to reproduce it.

CanopiusApplications
Mar 26, 2014, 8:38 AM
Hi Danil

I have made some progress with this bug in terms of the application.

The changed the property Shadow=false on all the windows, this has not removed the bug but it has made a huge difference and the bug is only now occasionally seen. In general now the pagers do not cause the app to freeze and perform quite nicely -- they do on occasion perform quite slowly but this only seems to be when the app first starts, once a few windows have been opened and then closed the pagers become very responsive.

Secondly I have also noticed that this bug is only happening on IE10 and does not happen on either IE9 or IE11. The bug does not occur on either Chrome or FF.

As an aside I have also noticed that the grey theme is much darker when run through IE11.

The most disappointing thing is that part of the reason for using the control set was to eliminate the need to worry about browser versions but in this case it seems to be very much linked to browser versions.

Will continue to update the thread as I progress.

Ta,
D

CanopiusApplications
Mar 26, 2014, 10:19 AM
Attached is a new screen shot of the error in the pager. Once the grid is in this state you can click next page and it will come back to life so basically once you get this you can still page although it takes 2 clicks per page. Sometimes happens other times not, very incocsistent as to when the bug appears and no set way to produce it. it appears to be related to painting of the form.

8901

CanopiusApplications
Mar 26, 2014, 1:37 PM
8901[/QUOTE]

Further to this, once you get the pager in the state shown above and you reach page one with the previous page disabled you can still click on it and this forces the app to freeze completely. It is almost as though the pager losing track of where it is in this case.

Below is the markup for the page.



<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DownloadLogs.ascx.cs" Inherits="Canopius.BrokerRepository.WebUI.UserControls.Repor ts.DownloadLogs" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Window ID="windowDownloadLogs" runat="server" IconCls="Downloads" Title="Download Logs" AutoShow="false" Modal="true" Hidden="true" Width="950"
Height="600" Draggable="true" Resizable="false" Frame="false" Shadow="false">

<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>

<Items>

<ext:Panel ID="pnlInfo" runat="server" Header="false" Height="28" BodyCls="Label" BodyPadding="5" Border="true" MarginSpec="5 5 5 5" >
<Items>
<ext:Label runat="server" id="lblDesc" Text ="On the left the tree displays each download run. Click on a report run to see the status changes and issue log." AnchorHorizontal="100"></ext:Label>
</Items>
</ext:Panel>

<ext:Panel runat="server" ID="pnlContainer" Flex="1" MarginSpec="0 5 5 5" Border="false" BodyCls="PanelBodyStyle" BodyStyle="background-color: #e0e0e0 !important;">

<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>

<Items>

<ext:TreePanel IconCls="Downloads" Title="Downloads" ID="tpDownloads" Width="210" runat="server" UseArrows="true" Animate="false" AnimCollapse="false" Collapsed="false" MarginSpec="0 0 0 0">

<Fields>
<ext:ModelField Name="Type" />
<ext:ModelField Name="RunLogId" />
<ext:ModelField Name="ServiceType" />
</Fields>

<Plugins>
<ext:BufferedRenderer ID="BufferedRenderer1" runat="server" />
</Plugins>

<Listeners>
<ItemDblClick Handler="DisplayStatusChangesAndIssues(record);" />
</Listeners>

<BottomBar>
<ext:Toolbar ID="StatusBar" runat="server" StatusAlign="Left" Height="29">
<Items>
<ext:ToolbarTextItem ID="_SerivceRun" runat="server" Text="Service run" Cls="Service" />
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:ToolbarTextItem ID="_UserRun" runat="server" Text="User run" Cls="User" />
</Items>
</ext:Toolbar>
</BottomBar>

</ext:TreePanel>

<ext:TabPanel runat="server" ID="tbMain" BodyPadding="0" Flex="1" Cls="OverrideTabColor" Border="true" Collapsible="false" MarginSpec="0 0 0 5">

<Items>

<ext:GridPanel runat="server" ID="gpIssues" Header="True" Title ="Issues" Icon="Error" Flex="1" Border="false" MarginSpec="0 0 0 0">

<Store>
<ext:Store ID="IssuesStore" runat="server" PageSize="15" OnSubmitData="IssuesStore_Submit">
<Model>
<ext:Model ID="IssuesModel" runat="server" IDProperty="IssueLogId">
<Fields>
<ext:ModelField Name="BrokerId" Type="Int" />
<ext:ModelField Name="IssueLogId" Type="Int" />
<ext:ModelField Name="BrokerName" Type="String" />
<ext:ModelField Name="BrokerRef" Type="String" />
<ext:ModelField Name="BrokerContactId" Type="int" />
<ext:ModelField Name="ContactFirstName" Type="string"/>
<ext:ModelField Name="ContactLastName" Type="string"/>
<ext:ModelField Name="ContactRef" Type="String"/>
<ext:ModelField Name="Description" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<ColumnModel ID="IssuesColumnModel" runat="server">
<Columns>
<ext:Column ID="IdColumn" runat="server" Hidden="false" DataIndex="IssueLogId" Hideable="false" />
<ext:Column ID="Column3" runat="server" Text="Broker" width="140" DataIndex="BrokerName" />
<ext:Column ID="Column1" runat="server" Text="Broker Reference" Hidden="true" width="140" DataIndex="BrokerRef" />
<ext:Column ID="Column7" runat="server" Text="Contact" width="120">
<Columns>
<ext:Column ID="Column2" runat="server" DataIndex="ContactFirstName" Text="First Name"/>
<ext:Column ID="Column4" runat="server" DataIndex="ContactLastName" Text="Last Name"/>
</Columns>
</ext:Column>
<ext:Column ID="Column8" runat="server" Text="Contact Reference" Hidden="true" width="140" DataIndex="ContactRef" />
<ext:Column ID="Column10" runat="server" Text="Description" width="340" DataIndex="Description" />
</Columns>
</ColumnModel>

<Features>
<ext:GridFilters ID="IssuesFilters" runat="server" Local="true">
<Filters>
<ext:StringFilter DataIndex="BrokerName" />
<ext:StringFilter DataIndex="ContactFirstName" />
<ext:StringFilter DataIndex="ContactLastName" />
<ext:StringFilter DataIndex="Description" />
</Filters>
</ext:GridFilters>
</Features>

<BottomBar>
<ext:PagingToolbar ID="IssuesPaging" runat="server" HideRefresh="true">
<Listeners>
<Change Handler="Ext.net.Mask.hide()" />
<BeforeChange Handler="Ext.net.Mask.show({ msg: 'Changing page...', el: 'App.DownloadLogs_pnlContainer'})" />
</Listeners>
</ext:PagingToolbar>
</BottomBar>

</ext:GridPanel>

<ext:GridPanel runat="server" ID="gpStatusChanges" Header="True" Title ="Status Changes" IconCls="StatusChange" Flex="1" Border="false" MarginSpec="0 0 0 0">

<Store>
<ext:Store ID="StatusChangeStore" runat="server" PageSize="15" OnSubmitData="StatusChangeStore_Submit">
<Model>
<ext:Model ID="ContactModel" runat="server" IDProperty="UpdateLogId">
<Fields>
<ext:ModelField Name="UpdateLogId" Type="int" />
<ext:ModelField Name="BrokerId" Type="int" />
<ext:ModelField Name="BrokerName" Type ="String" />
<ext:ModelField Name="BrokerRef" type="string"/>
<ext:ModelField Name="Description" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<ColumnModel ID="StatusChangeColumnModel" runat="server">
<Columns>
<ext:Column ID="Column5" runat="server" Text="Broker" width="200" DataIndex="BrokerName" />
<ext:Column ID="Column9" runat="server" Text="Broker Reference" Hidden="true" width="140" DataIndex="BrokerRef" />
<ext:Column ID="Column6" runat="server" Text="Description" width="350" DataIndex="Description" />
</Columns>
</ColumnModel>

<Features>
<ext:GridFilters ID="StatusChangeFilters" runat="server" Local="true">
<Filters>
<ext:StringFilter DataIndex="BrokerName" />
<ext:StringFilter DataIndex="Description" />
</Filters>
</ext:GridFilters>
</Features>

<BottomBar>
<ext:PagingToolbar ID="StatusChangePaging" runat="server" HideRefresh="true">
<Listeners>
<Change Handler="Ext.net.Mask.hide()" />
<BeforeChange Handler="Ext.net.Mask.show({ msg: 'Changing page...', el: 'App.DownloadLogs_pnlContainer'})" />
</Listeners>
</ext:PagingToolbar>
</BottomBar>

</ext:GridPanel>

</Items>
</ext:TabPanel>

</Items>

</ext:Panel>

</Items>

</ext:Window>

CanopiusApplications
Mar 26, 2014, 5:38 PM
Hi Danil

Ok I have produced a sample you can run that produces the issue. What I have done with the sample is to try and keep everything as close as possible to how the user control is loaded as I suspect I might be doing something wrong here.

In order to reproduce.

1. Run the project.
2. Click on reports menu option.
3. Click on download logs.
4. Use the pager -- when you click through the pager slowly you should see the whole screen grey out (this is the bug).

You should also be able to get the whole app to freeze by reaching the end of the pager, then going back to page one and the double click a few times on the disabled navigation buttons.

Note this only seems to happen in IE 10.

Ok problem is I can't upload the zip file containing the project, where can I send this to?


D

CanopiusApplications
Mar 26, 2014, 5:45 PM
Just emailed the zip to support @ ext.

D

CanopiusApplications
Mar 27, 2014, 8:24 AM
Here is a link to the zip as per instruction from GM.

https://www.dropbox.com/s/08b3fzaai93inom/Pager%20Bug.zip

D

CanopiusApplications
Mar 27, 2014, 10:14 AM
Ok further progress.

Currently the structure of default.aspx is


<form>
<viewport></viewport>
<usercontrolloader>

Now if I move the user control loader outside of the form tags then the bug disappears, the problem with this is that the the fields in the user controls are no longer posted back to the server.

So the problem appears to be related to having ext windows in user controls inside a viewport.

D

CanopiusApplications
Mar 27, 2014, 10:54 AM
Ok I think I have now found the root cause and that is the fact the ext:windows inside the user controls are Modal=true.
Setting modal=false and there is no longer a problem.

CanopiusApplications
Mar 27, 2014, 11:13 AM
A quick search on modality & viewports has revealed this

http://forums.ext.net/showthread.php?19972&p=86602&viewfull=1#post86602

I am seeing the same thing using IE (not run in compat mode).

I do have a path to glory using the fix on manually masking the viewport although I can't say I am a fan of this solution at all. I have tested this out and it seems to work ok.

D

CanopiusApplications
Mar 27, 2014, 3:37 PM
Finally after what is a PB on a single bug fix I have finally got rid of it. The root cause was indeed having user controls that contained modal windows inside a viewport. Another solution would have been to move the user controls outside the form tag but that presented problems on postback.

To fix the issue in the application I needed to do 2 things.

1. Set modal = false -- this sorted it 95% of the time.
2. Set shadow = false -- for some reason this also produced the bug but only on rare occasions once modal was false.

Then in order to get get the forms to behave in a modal way I used Danils suggestion.



<%--Manually mask the underlying default as modal has issue with the pager and IE10--%>
<Listeners>
<Hide Handler="Ext.fly('default').unmask();" />
<Show Handler="Ext.fly('default').mask();" />
</Listeners>


I have left the code sample up which shows the issue.

D

Daniil
Mar 28, 2014, 12:25 AM
Thank you for all the investigation.


A quick search on modality & viewports has revealed this

http://forums.ext.net/showthread.php?19972&p=86602&viewfull=1#post86602


Well, this exact problem should be in IE7 only...

As for IE10 it behaves really weird there.

I tried this:

<ext:PagingToolbar ID="IssuesPaging" runat="server" >
<Listeners>
<Change Handler="console.log('Change'); Ext.net.Mask.hide()" />
<BeforeChange Handler="console.log('BeforeChange'); Ext.net.Mask.show({ msg: 'Changing page...', el: 'App.DownloadLogs_gpIssues'});" />
</Listeners>
</ext:PagingToolbar>

When a mask hangs, I don't see "BeforeChange" and "Change" on the console. And the current page (of PagingToolbar) is actually not changed. Also it looks masked, but actually it is not masked. For example, the buttons are clickable. Does it behave in the same way for you?

I feel there might be a problem in IE10 JavaScript engine or/and in rendering system. I have no good ideas how to deal with that.

CanopiusApplications
Mar 28, 2014, 9:14 AM
Hi D

Yeah I am seeing the same. As you say the pager appears to page but does not actually page, the buttons appear disabled but are not -- then it seems to "freeze" the grid when probably it is one of the masks just overlayed on the grid etc.

The problem with this one is the way the issue manifests versus the solution and hence it took me about 3 days on and off to get to the bottom of it (partly because it was so inconsistent as to when it appeared).

Not entirely sure why Shadow also plays a part but if it is jscript rendering then my guess is that the div for shadow does not get its zorder set or something like this. In my demo I am not sure if you can replicate the issue when shadow is true but certainly happens in my full blown application.

Either way I am happy enough with my fix and happy to confirm it seems to have removed the bug completely (fingers crossed as I have thought many times over the last few days that the error was repaired).

I can also confirm this issue does not occur in IE9 or IE11 so seems specific to IE10. Chrome etc are also fine.

D

Daniil
Mar 28, 2014, 5:05 PM
Either way I am happy enough with my fix and happy to confirm it seems to have removed the bug completely (fingers crossed as I have thought many times over the last few days that the error was repaired).

Nice to hear. At this point, I would not do anything on this issue since it is a very-very specific case. Though, I'll keep it in mind.