PDA

View Full Version : Poor Form Layout Performance



kerbo
9 Jan 2013, 3:20 PM
I'm close to completing migration a 3.4 application to 4.1.1 and while the migrated application is not as snappy as 3.4, it is acceptable except for one complex form.

This form is a window with 5 tab panels and approx 35 fields and 7 grids spread across the tabs. In 3.4, the window would open within a sec. In 4.1.1, it takes 4 sec to open an empty form and 5 sec to open a form and load field data from a store. This is on FF. On Chrome, the time is half.

I am looking for options to get the display time back to one sec. Are there different settings I can try that may help? Are there ways to find out where the problem lies? At this point, I don't even know what to try.

friend
10 Jan 2013, 6:41 AM
It sounds like this may have to do with lazy instantiation/xtype usage:

http://docs.sencha.com/ext-js/4-1/#!/guide/components-section-2

If you're actually creating all of the child components used by the form window up front, it's possible that you'll take a big performance hit.

droessner
10 Jan 2013, 7:02 AM
Take a look at http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications.

Specifically, take a look at the suspendLayouts/resumeLayouts section. Depending on how you are creating your components, using these methods might help speed up the build of the form.

You may also want to look into the page analyzer tool.

kerbo
11 Jan 2013, 6:37 AM
Take a look at http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications.

Specifically, take a look at the suspendLayouts/resumeLayouts section. Depending on how you are creating your components, using these methods might help speed up the build of the form.

You may also want to look into the page analyzer tool.

Thanks, this article had good information. My code doesn't have any of the potential pitfalls described in the article however Ext.suspendLayout/resumeLayout did make a difference, although not in ways I expected. Where it helped was with doing a bunch of field setValues (like in the form load). I replaced form load with a my own code and wrapped it with suspend/resume layout and it made it noticeable difference.

But that alone didn't get the speed back. I ended up creating the fields on each tab dynamically the first time a person clicks on a tab. This system got a bit complicated due to field interdependency between tabs, but at least now the window pops up within a second.