ExtJS performance on large forms
Yesterday I encountered a show stopper in an applilcation with close to 400 fields. I've put up a sample application here:
It takes about 15 seconds to render this form. The actual performance in my application is even worse, more close to 30s, probably because the form is embedded in a tab panel inside a view port or maybe the page just has more elements.
The page loads fine if I set the property deferredRender to true of course. Lazy render is the key to get performance from such forms.
Unfortunately I cannot use that solution as I have to load data into this form. And that means all fields have to be rendered.
Does this mean that ExtJS is useless for forms over 50 elements or so? I hope not.
I think the clue to improve the load time of forms like this would be if I could load data in this form without having to turn deferredRender to false. As soon as a tab is rendered, the data is loaded into it. So somehow a reference to the data is being held, and used when the tab is displayed. Does anyone have code for this or suggestions to go about this?
I think faster rendering would probably be harder to fix than adding smarter loading. I profiled the rendering and about 50% of the times was taken up by three functions: addClass (called 4,000 times), byAttribute (called 64- times) and getStyle (called over 8100 times).
Any clues and tips really appreciated because at this point we have to abandon ExtJS for the project unfortunately.