Skip to Content
Author's profile photo Former Member

Infinite Sencha Lists

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 !

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.