Get Latest Tweet Using ExtJS DataView and PHP

Recently I love twitter, even though I didn’t tweet too often, cause I found many great link from the people that I follow. In this post, I want to create a little twitter client to getting the latest tweets by specific username using ExtJS DataView, cause the app are just getting the tweets the it doesn’t have to authenticate the users, let get straight to the code:

First is the get-tweets.php, is to fecth the latest tweets using Twitter API, you can se on the code below the $username variable is dynamic which means it will be input by users (it will explained on the next step) and this PHP script returned as the XML document.

<?php

$username = $_GET['username'];

$twitterHost = "http://twitter.com/statuses/user_timeline/".$username.".xml?count=10";

$curl = curl_init();

curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($curl, CURLOPT_URL, $twitterHost);

$result = curl_exec($curl);
curl_close($curl);

header('Content-Type: application/xml; charset=ISO-8859-1');

print $result;

?>

And second is the ExtJS code, just put it inside your HTML code (my filename is index.html) and always to include the required ExtJS file (ext-all.css, ext-base.js, and ext-all.js). Because the PHP script returned as XML, so we have to catch with ExtJS XMLReader, and the tweets will be showed after the users insert a twitter username and push the button, so we create FormPanel component to catch the value from the users, here’s the code

<script type="text/javascript">
Ext.onReady(function(){
    var proxyTweets = new Ext.data.HttpProxy({
        url: 'get-tweets.php?username=mashable'
    });

    var strTweets = new Ext.data.Store({
        proxy: proxyTweets,
        reader: new Ext.data.XmlReader({
            record: 'status'
        }, [
            'text'
        ]),
        listeners: {
            'beforeload': function() {
                Ext.getCmp('twitter_username').setDisabled(true);
                Ext.getCmp('btnGetTweets').setDisabled(true);
            },
            'datachanged': function() {
                Ext.getCmp('twitter_username').setDisabled(false);
                Ext.getCmp('btnGetTweets').setDisabled(false);
            }
        }
    });

    var tplTweets = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="tweetbox">{text}</div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );
    var dataTweets = new Ext.DataView({
        autoScroll: true, store: strTweets, tpl: tplTweets,
        autoHeight: false, height: 265,
        multiSelect: true, itemSelector: 'div.thumb-wrap',
        emptyText: 'No tweets to display',
        style: 'border:1px solid #99BBE8;background:#fff;'
    });
    var panelTop = new Ext.FormPanel({
        title: 'Enter Twitter Username', width: 400,
        renderTo: 'top', buttonAlign: 'center',
        labelWidth: 150, fileUpload: true,
        frame: true, style: 'margin: 0 auto;',
        id: 'panelTop',
        items: [{
            xtype: 'textfield',
            emptyText: '',
            fieldLabel: 'Twitter Username',
            buttonText: 'Select a File',
            width: 230,
            id: 'twitter_username'
        }],
        buttons: [{
            id: 'btnGetTweets',
            text: 'Latest Tweets',
            handler: getTweets
        }],
        keys: [{
            key: [Ext.EventObject.ENTER], handler: getTweets
        }]
    });

    function getTweets() {
        var u = Ext.getCmp('twitter_username').getValue();
        proxyTweets.setUrl('get-tweets.php?username=' + u, false);
        strTweets.load();
        Ext.getCmp('panelBottom').setTitle('Latest Tweets From ' + u);
    }

    var panelBottom = new Ext.Panel({
        title: 'Latest Tweets', frame: true, width: 400,
        height: 300, id: 'panelBottom', style: 'margin: 0 auto;',
        renderTo: 'bottom', items: [dataTweets]
    });
});
</script>

And the last is the simple HTML tag to be ExtJS Panel Container

<body>
  <div id="container">
    <div id="top"></div>
    <div id="bottom"></div>
  </div>
</body>

Here is the sample screenshot and like usual you can download the complete code from this post or view the online demo just click the link below the thumb image.

View Demo | Download Source