Ext JS - Grid - Fetch Website Information into Tabs - Task Reload

To reload a task periodically is pretty easy. Add the following in the js\grid.js.

Ext.TaskMgr.start({
        run: storeprice.reload,
        scope: storeprice,
        interval: 120000 // 1000 = 1 second
    });

    Ext.TaskMgr.start({
        run: storeah.reload,
        scope: storeah,
        interval: 120000 // 1000 = 1 second
    });

Ext JS - Grid - Fetch Website Information into Tabs - Information Grouping

json\stockprice.php
Create another Json file to fetch stock price from hk.finance.yahoo.com.

<?php
require('../phplib/simple_html_dom.php');

// Create a DOM object
$html = new simple_html_dom();

$codearray = array(
   '0005' => 'Banking', '0011' => 'Banking', '0066' => 'Utility',
   '0368' => 'Resources', '0410' => 'Property', '0669' => 'Misc',
   '0826' => 'Misc', '0939' => 'Banking', '0968' => 'Property', '0998' => 'Banking',
   '1398' => 'Banking', '1893' => 'Resources', '2318' => 'Insurance', '2628' => 'Insurance',
   '2778' => 'Property', '2827' => 'Index', '2880' => 'Utility',
   '3328' => 'Banking', '3377' => 'Property', '3938' => 'Resources',
   '3968' => 'Banking', '3988' => 'Banking', '2366' => 'Misc'
);

// Load HTML from a URL
$domain = 'http://hk.finance.yahoo.com/q?s=';

$resultarr = array();
foreach ( $codearray as $code => $industry ) {
   $url = $domain.$code.'.HK';
   $html->load_file($url);
  
   $coretable = $html->find('div[id=quote-bar-latest]',0);
   $name = $coretable->find('h2',0)->plaintext;
   $price = $coretable->find('div.price',0)->plaintext;
   $sign = $coretable->find('div.price-sign-down',0);
   $pricechangearray = explode(' ', $coretable->find('b',0)->plaintext);
   $pricechangearray[1] = substr($pricechangearray[1], 1, strlen($pricechangearray[1])-3);

   if ($sign) {
           $pricechangearray[0] = '-'.$pricechangearray[0];
           $pricechangearray[1] = '-'.$pricechangearray[1];
   }
   array_push($resultarr,
       array (
           'code' => $code,
           'name' => $name,
           'price' => $price,
           'pricechange' => $pricechangearray[0],
           'pricechangepercentage' => $pricechangearray[1],
           'industry' => $industry
           )
       );
};

// Json_encode - PHP 5.2+ built in function to return the Json object
echo json_encode($resultarr);
?>

js\grid.js - Modify the file and add the following

    // create the data store - Stock Price
    var storeprice = new Ext.data.GroupingStore({
        url: 'json/stockprice.php',
        reader: new Ext.data.JsonReader({
        fields: [
           {name: 'code'},
           {name: 'name'},
           {name: 'price'},
           {name: 'pricechange'},
           {name: 'pricechangepercentage'},           
           {name: 'industry'}
        ]
        }),
        sortInfo:{field: 'code', direction: "ASC"},
        groupField:'industry'
    });

    // create the Grid - Stock Price
    var gridprice = new Ext.grid.GridPanel({
        store: storeprice,
        columns: [
            {id:'code', header: "Stock Code", width: 80, sortable: true, dataIndex: 'code'},
            {header: "Company Name", width: 250, sortable: true, dataIndex: 'name'},
            {header: "Price", width: 50, sortable: true, dataIndex: 'price'},
            {header: "Price Change", width: 80, sortable: true, renderer:  change, dataIndex: 'pricechange'},
            {header: "Price Change %", width: 100, sortable: true, renderer:  pctChange, dataIndex: 'pricechangepercentage'},
            {header: "Industry", width: 100, sortable: true, dataIndex: 'industry'}
        ],
        view: new Ext.grid.GroupingView({
            forceFit:true
        }),
        stripeRows: true,
        collapsible: true,
        title:'Stock Price'
    });

    // Load the store
    storeprice.load();

    // Add the grid for the tab
    tabs.add(gridprice);

Ext JS - Grid - Fetch Website Information into Tabs

Prerequisite:

• Apache + PHP
• PHP Simple HTML Dom Parser - Very good library to parse HTML Dom object like JQuery.
  
• Ext JS

Folder Structure (bold files are we are going to construct):

• js\grid.js
• jslib\ext-all.js
• jslib\adapter\ext\ext-base.js
• json\ah.php
• json\stockprice.php - in subsequent post
  
• phplib\simple_html_dom.php
• resources\css\ext-all.css
• grid.php
  

grid.php - The Grid will render to tabs1

<html>
<head>
<meta equiv="content-type" content="text/html; charset=utf-8">
<title>Information</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="jslib/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="jslib/ext-all.js"></script>
<script type="text/javascript" src="js/grid.js"></script>

</head>
<body>
<div id="tabs1"></div>
</body>
</html>

json\ah.php
Json - Javascript Object Notation
Ext JS has JSon data store so Json can be easily included.

<?php
require('../phplib/simple_html_dom.php');

// Create a DOM object
$html = new simple_html_dom();

// Load HTML from a URL - In this case is a page from AAStocks
$html->load_file('http://www.aastocks.com/apps/web/content/ah.aspx?aalanguage=chi');

// Define which stocks you want to get
$arr = array(
'000300.HK', '000317.HK', '000358.HK', '000386.HK', '000390.HK', '000763.HK', '000874.HK', '000914.HK',
'001088.HK', '001186.HK', '001766.HK', '002600.HK', '002727.HK',
'000939.HK', '001398.HK', '003328.HK', '002628.HK', '002318.HK', '003968.HK', '003988.HK', '000998.HK'
);

// Array to store the result
$resultarr = array();

// Loop through all the table rows that you want
foreach ($html->find('tr') as $tr)
{
 $name=$tr->find('a', 0);
 $code=trim($name->innertext);

 if (in_array($code, $arr)){
   array_push($resultarr,
       array(
           'company' => $tr->find('td', 0)->innertext,
           'hkstockcode' => $tr->find('td', 1)->children(0)->innertext,
           'shstockcode' => $tr->find('td', 2)->children(0)->innertext,
           'hkprice' => $tr->find('td', 3)->children(0)->innertext,
           'shprice' => $tr->find('td', 6)->children(0)->innertext,
           'diff' => $tr->find('td', 9)->children(0)->innertext)
   );
 }
};

// Json_encode - PHP 5.2+ built in function to return the Json object
echo json_encode($resultarr);
?>

js\grid.js

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// example of custom renderer function
function change(val){
   if(val > 0){
       return '<span >' + val + '</span>';
   }else if(val < 0){
       return '<span >' + val + '</span>';
   }
   return val;
}

// example of custom renderer function
function pctChange(val){
   if(val > 0){
       return '<span >' + val + '%</span>';
   }else if(val < 0){
       return '<span >' + val + '%</span>';
   }
   return val;
}

// create the data store - AH Stock
var storeah = new Ext.data.JsonStore({
   url: 'json/ah.php',
   fields: [
      {name: 'company'},
      {name: 'hkstockcode'},
      {name: 'shstockcode'},
      {name: 'hkprice', type: 'float'},
      {name: 'shprice', type: 'float'},                
      {name: 'diff', type: 'float'}
   ],
});

// create the Grid - AH Stock
var gridah = new Ext.grid.GridPanel({
   store: storeah,
   columns: [
       {id:'company',header: "Company Name", width: 160, sortable: true, dataIndex: 'company'},
       {header: "Stock Code (HK)", width: 100, sortable: true, dataIndex: 'hkstockcode'},
       {header: "Stock Code (SH)", width: 100, sortable: true, dataIndex: 'shstockcode'},
       {header: "HK Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'hkprice'},
       {header: "SH Price",width: 85, sortable: true, renderer: 'usMoney',    dataIndex: 'shprice'},
       {header: "Difference", width: 85, sortable: true, renderer:  pctChange, dataIndex: 'diff'}
   ],
   stripeRows: true,
   autoExpandColumn: 'company',
   height:350,
   width:600,
   title:'AH Stock'
});

// Load the store
storeah.load();

// Define the tab
var tabs = new Ext.TabPanel({
   renderTo: 'tabs1',
   height:600,
   width:800,
   activeTab: 0,
   frame:true,
   autoScroll: true
});

// Add the grid in the tab
tabs.add(gridah);
// Set which tab as the active tab
tabs.setActiveTab(gridah);
});

Ext JS - Introduction

Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

• High performance, customizable UI widgets
• Well designed and extensible Component model
• An intuitive, easy to use API
• Commercial and Open Source licenses available

Ext JS supports all major web browsers including:

• Internet Explorer 6+
• FireFox 1.5+ (PC, Mac)
• Safari 3+
• Opera 9+ (PC, Mac)

Rank #3 with 8% market share according to the Javascript Framwork Survey.

Easy to use, comprehensive examples, impressive layout, easy to extend, ...

Download

Javascript Framework Survey

As expected, JQuery tops the market share. But please wait and see if ExtJS will dominate in future.
JQuery: 42%
Prototype: 18%
ExtJS: 8%

ExtJS is not that easy to use but really powerful.

Ref: Kyle Hayes' Javascript Framework Survey

Will have some posts on ExtJS to show how easy to build a real life website.