Create Spy With ExtCore

July 6th, 2010 by aditia rahman / No Comments  

     

This post is a sort post describing how to create simple spy, if you don’t know what the spy yet, check the digg spy, that is very cool infographic to displaying updated content from it users, but when this post is created digg using flash technology to pooling data from the server, but this post using extcore to pooling data from the server, and the code is not really have big different from my previus post, I just create single file and include one js file (it’s the extcore.js file of course), that file i called “index.php”, now here we go.

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.

demo_superdit_com_extcore_spy

DOWNLOAD | VIEW DEMO

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment