Put this PHP code on the top of the file :

<?php

$data = array(
    0 => array('post' => 'Hot News Title 0')
);

for ($i=1; $i<=20; $i++) {
    $tmp_data = array(
        $i => array('post' => 'Hot News Title ' . $i)
    );
    $data = array_merge($data, $tmp_data);
}

if (isset($_GET['act'])) {
    if (array_key_exists($_GET['dataindex'], $data)) {
        $i = $_GET['dataindex'];
        $html = '<div class="data d'.$i.' o'.$i.'">';
        $html .= $data[$i]['post'].'</div>';
        echo $html;
    }
    exit;
}

?>

The PHP code above is to create temporary data and store it inside array, and the array got a number index, so we can easily to locate the data that we want to collect, the conditional “if” statement is to getting data from array and pull it to client, and if the data has reached the maximal limit, the script just response with empty text, and here below the used extcore for create a spy.

<script type="text/javascript">
Ext.onReady(function() {

var get_i = 8;
var hideindex = 0;
var task = {
    run: function(){
        Ext.Ajax.request( {
            url: 'index.php?act=getdata&dataindex=' + get_i,
            method: 'post',
            success: function(o) {
                if (o.responseText != '') {
                    Ext.fly('box').insertHtml('afterBegin',
                        o.responseText);
                    Ext.select('.d'+get_i).highlight("ffff99", {
                        attr: 'background-color', duration: 1
                    });
                    Ext.select('.d'+hideindex).addClass('none');
                    var pe2 = get_i - 2;
                    var pe3 = get_i - 3;
                    var pe4 = get_i - 4;
                    var pe5 = get_i - 5;
                    var pe6 = get_i - 6;
                    var pe7 = get_i - 7;

                    Ext.select('.d'+pe2).replaceClass('o'+pe2, 'o5');
                    Ext.select('.d'+pe3).replaceClass('o'+pe3, 'o4');
                    Ext.select('.d'+pe4).replaceClass('o'+pe4, 'o3');
                    Ext.select('.d'+pe5).replaceClass('o'+pe5, 'o2');
                    Ext.select('.d'+pe6).replaceClass('o'+pe6, 'o1');
                    Ext.select('.d'+pe7).replaceClass('o'+pe7, 'o0');
                    get_i++;
                    hideindex++;
                } else {
                    var fdiv = '<div class="data end">';
                        fdiv = fdiv + 'Data Exhausted, Thanks &nbsp;';
                        fdiv = fdiv + '<a href="javascript:';
                        fdiv = fdiv + 'window.location.reload()">';
                        fdiv = fdiv + 'Refresh !</a>';
                        fdiv = fdiv + '</div>';
                    Ext.fly('box').insertHtml('afterBegin', fdiv);
                    runner.stop(task);
                }
            }
        });
    },
    interval: 1000 // 1 second
}

var runner = new Ext.util.TaskRunner();

Ext.fly('startLink').on('click', function() {
    var innerLink = document.getElementById('startLink').innerHTML;
    if (innerLink == 'Start') {
        runner.start(task);
        document.getElementById('startLink').innerHTML = 'Stop';
        document.getElementById('text').innerHTML = 'Stop';
    } else {
        runner.stop(task);
        document.getElementById('startLink').innerHTML = 'Start';
        document.getElementById('text').innerHTML = 'Start';
    }
});

});
</script>

The main function to create spy in extcore is TaskRunner, as you can see, the interval is set to one second, which mean every second the client script is accessing the server script (in this code using Ext.Ajax.request) and I made the TaskRunner only will run if users clicked start link. The last thing is the html code put it inside the body tag, well this is for initial state.

<div id="head">
	To <span id="text">Start</span> Spy, Click &rarr;
	<a href="javascript:" id="startLink">Start</a>
</div>
<div id="box">
<?php for($i=7; $i>=0; $i--) { ?>
    <div class="data d<?php echo $i; ?> o<?php echo $i; ?>">
        <?php echo $data[$i]['post']; ?>
    </div>
<?php } ?>
</div>

And for the styling i'm use css opacity that you can see on the downloadable source code or you can try it online demo.

DOWNLOAD | VIEW DEMO

So lets start, here’s the php code

<?php

$data = array(
    0 => array('post' => 'Post Number 0')
);

for ($i=1; $i<=50; $i++) {
    $tmp_data = array(
        $i => array('post' => 'Post Number ' . $i)
    );
    $data = array_merge($data, $tmp_data);
}

// get next 10 row data,
if (isset($_GET['act'])) {
    $start = ($_GET['page'] * 10) + 1;
    $finish = $start + 10;
    if ($finish <= count($data)) {
        echo '<div class="data newhead">Loaded Data &darr;</div>';
        for ($i=$start; $i<$finish; $i++) {
            echo '<div class="data">'.$data[$i]['post'].'</div>';
        }
    } else {
        echo 'stop';
    }
    exit;
}

?>

In the php code the data created with array format, the conditional “if” statement called when the new data need to be loaded (it fetch 10 row data/load), and another conditional “if” inside the first statement is to check whether the max row data have been reached, then if max row have been reached there’s no need to output the data. Now the javascript using Extcore, like usual include the Extcore first

<script type="text/javascript" src="extcore/ext-core.js"></script>
<script type="text/javascript">
/* code from :

http://james.padolsey.com/javascript/get-document-height-cross-browser/

*/
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight,
            D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight,
            D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight,
            D.documentElement.clientHeight)
    );
}
var page = 1;
var onLoad = false;
Ext.onReady(function() {
    Ext.fly(window).on("scroll", function() {
        var scrollY;
        var winHeight;
        var docHeight;
        if (!Ext.isIE) {
            scrollY = Ext.fly(window).dom.scrollY;
            winHeight = Ext.fly(window).dom.innerHeight;
        } else {
            scrollY = document.documentElement.clientHeight;
            winHeight = document.documentElement.scrollTop;
        }
        docHeight = getDocHeight();
        if (docHeight <= scrollY + winHeight) {

            Ext.Ajax.on('beforerequest', function(){
                Ext.fly('loading').setVisible(true);
                onLoad = true;
            });
            Ext.Ajax.on('requestcomplete', function() {
                Ext.fly('loading').setVisible(false);
                onLoad = false;
            });

            if (!onLoad) {
                Ext.Ajax.request({
                    url: 'main.php?act=getData&page='+page,
                    method: 'post',
                    success: function(o) {
                        if (o.responseText != 'stop') {
                            Ext.fly('boxdata').insertHtml('beforeEnd', o.responseText);
                            page = page + 1;
                        } else {
                            html = '<div class="data newhead">No More Data !</div>';
                            Ext.fly('boxdata').insertHtml('beforeEnd', html);
                        }
                    }
                });
            }
        }
        return false;
    });
});
</script>

The first function in code above is to get the value of document height thanks to james.padolsey.com for this function cause the function to get this value is difference in IE, Opera, but Firefox and Webkit browser is almost the same. In Extcore I didn’t find the function to get this value, so also for the window height and window scroll height, maybe this is why jquery better than Extcore (don’t compare jquery with the full stack Extjs, this is absolutely different). So Extcore function that I use is to trigger event, ajax request and append new html element. Now this is the CSS code to make it a bit pretty

<style type="text/css">
    * { font-size: 24px; }

    div {
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #000;
    }

    .head {
        padding: 10px;
        background: #333;
        color: #fff;
    }
    .head a {
        color: #ddd;
    }
    .data {
        background: #f3f3f3;
    }
    .newhead {
        background: #d3d3d3;
    }
    #loading {
        display: none;
        background: #fff;
        border: none;
        font-size: 62px;
    }
</style>

And the last is the html code

<body>
    <div class="head">
        This is example for load scroll using Extcore
    </div>
    <div id="boxdata">
        <?php for($i=0; $i<=10; $i++) { ?>
        <div class="data">
            <?php echo $data[$i]['post']; ?>
        </div>
        <?php } ?>
    </div>
    <div id="loading">
        <img src="img/27.gif" alt="loading"/>
        &nbsp;
        Please Wait...
    </div>
</body

Yup that’s all hope this useful for you and you can download all the code example or view the live demo

DOWNLOAD SOURCE

VIEW DEMO