Need help implementing Infinite AJAX scroll

Hello,

I am using the live search grid example as given on - http://dev.sencha.com/deploy/ext-4.1...arch-grid.html

How do I implement an Infinite AJAX scrollbar with page size of 10 (scrollbar similar to facebook scroll) on this grid.

Any help would be appreciated.

Thank you.

Did you already take a look at this? http://docs.sencha.com/ext-js/4-1/#!...th-filter.html

Have you tried implementing anything so far, or are you just seeking guidance as to where to start? If the former, please post some code.

Here is the code that I am using.

Code:

---


Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', 'ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.tip.QuickTipManager',
    'Ext.ux.LiveSearchGridPanel'
]);

Ext.onReady(function() {   
    Ext.QuickTips.init();
       
    // sample static data for the store
    var myData = [
        ['3m Co',                              71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                          29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['AT&T Inc.',                          31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
        ['Citigroup, Inc.',                    49.37, 0.02,  0.04,  '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
        ['Hewlett-Packard Co.',                36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
        ['Intel Corporation',                  19.88, 0.31,  1.58,  '9/1 12:00am'],
        ['International Business Machines',    81.41, 0.44,  0.54,  '9/1 12:00am'],
        ['Johnson & Johnson',                  64.72, 0.06,  0.09,  '9/1 12:00am'],
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
        ['McDonald\'s Corporation',            36.76, 0.86,  2.40,  '9/1 12:00am'],
        ['Merck & Co., Inc.',                  40.96, 0.41,  1.01,  '9/1 12:00am'],
        ['Microsoft Corporation',              25.84, 0.14,  0.54,  '9/1 12:00am'],
        ['Pfizer Inc',                          27.96, 0.4,  1.45,  '9/1 12:00am'],
        ['The Coca-Cola Company',              45.07, 0.26,  0.58,  '9/1 12:00am'],
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
        ['United Technologies Corporation',    63.26, 0.55,  0.88,  '9/1 12:00am'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',              45.45, 0.73,  1.63,  '9/1 12:00am']
    ];

    /**
    * Custom function used for column renderer
    * @param {Object} val
    */
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
    * Custom function used for column renderer
    * @param {Object} val
    */
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }       
   
   
    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
          {name: 'company'},
          {name: 'price',      type: 'float'},
          {name: 'change',    type: 'float'},
          {name: 'pctChange',  type: 'float'},
          {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });
   
    // create the Grid, see Ext.
    Ext.create('Ext.ux.LiveSearchGridPanel', {
        store: store,
        columnLines: true,
        columns: [
            {
                text    : 'Company',
                flex    : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text    : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text    : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change',
                renderer: change
            },
            {
                text    : '% Change',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange',
                renderer: pctChange
            },
            {
                text    : 'Last Updated',
                width    : 85,
                sortable : true,
                dataIndex: 'lastChange'
            }
        ],
        height: 350,
        width: 600,
        title: 'Live Search Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });
});

---

I have already gone through the API.

What I am trying to do is create a listener which fires on scroll event (for eg, after 80% scroll down on a page).

Since I am new to Extjs, kindly guide me as to where and how I should be creating such an event.

An example of the scroll concept can be found here : http://isotope.metafizzy.co/demos/infinite-scroll.html

Thank you.