Hybrid View

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    7
    Vote Rating
    0
    sidds.moona is on a distinguished road

      0  

    Default Unanswered: Need help implementing Infinite AJAX scroll

    Unanswered: 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.

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    31
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    7
    Vote Rating
    0
    sidds.moona is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread