If you have worked with the Sencha Touch framework in the past you may be aware of the poor performance of Lists which are required to display more than , say ,  100 list items in them (which is fairly common). If your handset does not hang during the testing process , you will find that it is near impossible to scroll through such lists .

The mobile app that I am working on – PC Plus – handled large lists using phonegap plugins that allow you to use native views in your app if the need may arise.

This was obviously a cumbersome process because you may have had to replicate the same working logic for any requirement on the different devices( iOS , android , BB ) with different implementations – multiplying the time it would take to do the same work compared to if you could simply use web views ( one of the big advantages in hybrid mobile app development ).

However , sencha is back into the game with the ‘infinite’ config property for its lists.

In the <2.2x Sencha Touch Frameworks , all list items would be rendered into the DOM at the same time , and depending on the number + complexity of the list items as well as the mobile phone + native web view in question – performance would suffer .

With infinite lists though only as many list items are held in the DOM as necessary to fill the height of the visible part of the list along with a few out of visibility items (for smooth scrolling) . As you scroll , other list items are loaded into the DOM / loaded list items are removed from the DOM .  You can configure the number of items to be held in the DOM at a time with the “bufferSize” property of lists .  Even with 500+ list items , scrolling and performance is silky smooth .

So yeah , thanks Sencha – but you should have come up with this one and a half years ago !

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply