Load Content Scroll Using EXT Core and PHP

Extcore is one the Extjs product, but the company name now called sencha, read this why extjs changes their name. If you using full stack Extjs source the Extcore must be included in the source, in this post I want to show how to load content while window scroll from the server using Extcore, this feature maybe useful when users want to see more data than visible on the screen maybe like facebook wall, actually this post is similar to another post i found, but using jquery (they are in 9lessons.info and webresourcesdepot.com), in this example i’m just using one file and the data is hardcoded from array

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