I have been designing a word game application using Ext-JS 4.0.7. It involves a gameboard (Ext.container.Container) with a 15 by 15 grid of squares (Ext.container.Container) using a table layout. Each square may contain a single letter tile (Ext.Component). Everything worked great. Performance was snappy. Then a couple days ago I decided to run my application using 4.1.0. What a big disappointment. It took about 10 secs to load the game when it used to take less than a second.
After reading the Optimizing Ext JS 4.1-based Applications blog post I began to investigate why it runs so slow under 4.1.0. I used the Page-Analyzer (very useful) that comes with 4.1.0 and it helped me identify a few issues. When the application launches, I have to dynamically build the gameboard from the current game state. I iterated over the gameboard state and added letter tiles to the squares that need them. The Page-Analyzer indicated that a layout occurred every time I added a new tile. So I called Ext.suspendLayouts before I started adding tiles and then called Ext.resumeLayouts after adding all the tiles. But then the tiles didn't render. Somewhere I read that the doLayout and doComponentLayout methods were replaced by updateLayout method. So after the Ext.resumeLayouts method call I called updateLayout on the gameboard component (an Ext.container.Container) and the tiles started rendering. Suspending and resuming layouts helped quite a bit with performance. Instead of taking 10 seconds to load the game (about 1 second per tile) it took about 1 second. The Page-Analyzer verified that I no longer had a layout per tile being added. I thought cool but it is still not as snappy as 4.0.7. So I investigated further. I was using CSS to set the height and width of the squares and tiles. The Page-Analyzer was indicating that each squares' and tiles' height and width was being calculated. I then decided to see what would happen if I configured the square component and the tile component with explicit height and width configurations while removing the CSS height and widths. That improved performance 4 times. It was taking about 600 ms to render the gameboard. Now it takes about 150 ms. The Page-Analyzer indicated that each squares' and tiles' height and width was configured (as opposed to calculated).
- Use the Page-Analyzer to help determine where multiple layouts are occurring so you can add Ext.suspendLayouts and Ext.resumeLayouts. (You may still need to call updateLayout on the container you added components to.)
- Using configured component heights and widths may also help improve performance.
I believe the intention was to eliminate the need to all methods like doLayout, doComponentLayout, and updateLayout. Do you know why I still had to call updateLayout after Ext.resumeLayouts? Do you suggest anything else to get the tile components to render?
I couldn't find documentation on the Ext.suspendLayouts, Ext.resumeLayouts, and Ext.container.Container#updateLayout methods in the API documentation. I only know of them because of the blogs posts.
Thanks Ext-JS development team. Keep up the good work.