We have decided to use ExtJS for one of our large application’s web-remake and we will have to generate screens/forms where we will have to render about thousand or more controls either in complete editable grid of in forms.
So may I know what is the best approach in doing so?
I have tried generating about thousand controls and it takes about more than 6 seconds on client-side and that too is going to be dependent on Client configuration about which I am positive that it will be at-least dual-core system most of the time.
But more than 6 seconds on localhost is like 10 seconds over the Internet so I am worried, I still have a choice of mixing normal html form/controls when there is high load but then it will miss the ExtJS touch (combo/number controls etc.), so any help or if you had similar experience do share.
Will XTemplate be faster in above case? I am still new to ExtJS so do share best practices if you know/used.
The best approach is not to do it this way. Creating thousands of controls will need huge amounts of memory, no matter how you do it. As you noticed, this makes an application extremely slow.
The solution is to keep the elements on the server and use some form of paging to create only the elements that the user can actually see.
Paging can be explicit (“Load next 10 rows”) or implicit by firing an event when the scrollbar hits the right/bottom end and loading more rows.
Usually, you can even hide this from users. Always load a whole row (hiding elements in the same row which aren’t visible because the browser window is too narrow usually doesn’t help much).
On the server, you will know how many rows you have. Load the first 20 rows and display them. Find the height of the rows (ideally, they should be all the same height) and create an empty DIV below the 20 rows which expands the scrolled view. This makes it appear as if all the rows are there (user sees correct scrollbar which doesn’t jump while scrolling).
As soon as that empty div comes into view, load more rows and shrink it.