Wednesday, July 16th, 2008

Live Scrolling via Ext’s LiveDataPanel Widget

Category: Sencha

Many developers really like the live scrolling functionality popularized by DZone. As you scroll down the page, a XHR call is made which pulls back data and instantly refreshes and allows you to continue to scroll down almost endlessly. Aaron Conran has built a widget for the Ext JS library which provides this functionality in an easy-to-use user extension:

A LiveDataPanel can enhance your site by deferring the load of additional content until the user is ready to see it. Markup will never be generated unless it’s needed and therefore the browsers DOM will have a smaller footprint. It’s important to remember to use this component where approriate, because it will load every record into memory and render that record’s markup to the browser. By building upon Ext’s foundation classes, we were able to create a useful component without having to do a lot of the lower level work.


The extension is easy to call and very configurable. The demo code looks like this:


  1. // Creating the panel is easy
  2. var p = new Ext.ux.LiveDataPanel({
  3.     frame: true,
  4.     title: 'Latest Blog Entries',
  5.     height: 400,
  6.     width: 590,
  7.     itemSelector: '.entry',
  8.     tpl: Ext.XTemplate.from('tplBlog'),
  9.     store: myStore
  10. });
  11. p.render('entry-list');

Posted by Rey Bango at 7:00 am
Comment here

4.5 rating from 77 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.