PDA

View Full Version : [CLOSED] 2.x Performance Issues with Layouts



jchau
Feb 13, 2013, 10:50 PM
Is there a list of what function calls will cause a layout? Or why if I have a panel with tools, showing and hiding tools will cause the panel AND its parent to perform a layout? If the parent contains 50 other panels, that will cause another 50 panels to perform a layout. Calling Ext.SuspendLayouts and Ext.ResumeLayouts is NOT the silver bullet. I feel like I am wrapping all my code in that. Is there a way to stop layout from bubbling up? In this case, there's no reason why showing or hiding tools should cause a layout to bubble to its parent.

*begin rant*
It has been more than 2 months since we started the upgrade from 1.x to 2.x, and we are still battling performance issues. We are seriously considering moving to another javascript UI library because we fear ExtJS will only get slower from major version to major version. From a business standpoint, we invested huge amount of money (manpower and time) to "upgrade" our product, only to deliver an inferior user experience to our clients. Sencha has no clear roadmaps of what they plan to do with performance. A simple search on their forum will yield numerous unanswered posts about performance. I know Ext.NET is at the mercy of ExtJS development, but if you have insight on Sencha's commitment to ExtJS and performance, we would love to hear about it.
*end rant*

Baidaly
Feb 13, 2013, 11:58 PM
Hello!

Unfortunately, there is no information about full list of functions but we are looking for this information.

geoffrey.mcgill
Feb 14, 2013, 12:38 AM
Which version of Ext.NET are you working with? /trunk?

Performance and Layout issues have been difficult to narrow down to their root cause(s). We also understand these issues are difficult to create simplified reproducible samples for.

Would you be interested in a remote desktop debugging session? A short session where you could give me a quick demo of the problems and run through some testing. Maybe I can suggest some performance improvements.

If you're interested, please email me (geoff@object.net) directly and we can schedule a time.

Daniil
Feb 14, 2013, 4:26 AM
Hello,


why if I have a panel with tools, showing and hiding tools will cause the panel AND its parent to perform a layout?

Well, the ExtJS layout principles are well explained here by Jamie Avins.
http://docs.sencha.com/ext-js/4-1/#!/video/17917111

Briefly, resizing a child can mean that its parent should be relayouted.

In your case hiding a tool can potentially cause shrinking the width. A tool notify its parent - a header container, a header notifies its container - an underlying panel, etc.

Agree, this is not excellent in this case. Generally, hiding a tool should not cause relayouting of the entire application. Maybe, this is something to report to Sencha. Though, probably, it is not easy to implement some generic way to determine a parent must be relayouted after some change on its child or not without other performance overhead.

But Ext.suspendLayouts() and Ext.resumeLayouts() can help in this case. If you feel something action should not relayout anything, call resumeLayouts() without the "true" parameter (which cases a flush of queued layouts).

Please take a look at the following example. Hiding a tool causes relayouting of the Panel and Container without the suspendLayouts() and resumeLayouts() call.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var hideTool = function () {
Ext.suspendLayouts();
App.Button1.up('panel').child('header').child("tool[type='collapse-top']").hide();
Ext.resumeLayouts(); // without "true" parameter
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Container runat="server">
<Items>
<ext:Panel runat="server" Collapsible="true">
<Items>
<ext:Button ID="Button1" runat="server" Text="Hide Tool" Handler="hideTool" />
</Items>
<Listeners>
<AfterLayout Handler="console.log('Panel AfterLayout');" />
</Listeners>
</ext:Panel>
</Items>
<Listeners>
<AfterLayout Handler="console.log('Container AfterLayout');" />
</Listeners>
</ext:Container>
</Items>
<Listeners>
<AfterLayout Handler="console.log('Viewport AfterLayout');" />
</Listeners>
</ext:Viewport>
</body>
</html>


There is an interesting thing. If remove Layout="FitLayout" of the Viewport, then hiding the tool causes its relayouting as well. So, it looks to be an issue with the default auto layout. I am going to report to Sencha. I hope they, at least, will clarify this behavior.

Daniil
Feb 14, 2013, 4:44 AM
I reported.
http://www.sencha.com/forum/showthread.php?256428

Daniil
Feb 14, 2013, 5:26 AM
Evan just answered:
http://www.sencha.com/forum/showthread.php?256428&p=938598&viewfull=1#post938598


This is something we've been investigating internally, it's very difficult to do so in a generic manner, but it's something we're looking to improve over time.

jchau
Feb 14, 2013, 4:09 PM
Evan just answered:
http://www.sencha.com/forum/showthread.php?256428&p=938598&viewfull=1#post938598

That's great. We look forward to the enhancement they will make for Layout controls.

jchau
Feb 14, 2013, 4:13 PM
Hello,


But Ext.suspendLayouts() and Ext.resumeLayouts() can help in this case. If you feel something action should not relayout anything, call resumeLayouts() with the "true" parameter (which cases a flush of queued layouts).



I thought calling resumeLayouts(true) will perform the queued layouts which is opposite of what you are implying...I always have to call resumeLayouts(true). If I don't pass true, I usually get UI visual errors.

Daniil
Feb 14, 2013, 5:04 PM
Hello,


But Ext.suspendLayouts() and Ext.resumeLayouts() can help in this case. If you feel something action should not relayout anything, call resumeLayouts() with the "true" parameter (which cases a flush of queued layouts).



I thought calling resumeLayouts(true) will perform the queued layouts which is opposite of what you are implying...I always have to call resumeLayouts(true). If I don't pass true, I usually get UI visual errors.

Sorry, I mistyped. I meant "without" instead of "with".

Sure, if relayouting is really required, then you should pass "true".

I mean cases when relayouting is not required, e.g. your case with hiding a tool.