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

Memcached - Distributed Memory Object Cache System

Memcached is a high performance, distributed memory object caching system. This caching system running primarily in Linux/Unix and there are various port in Windows, Mac OS X and Solaris.

Setting up the memcached in windows is easy, download the Win32 binary and put it somewhere. Fire the following commands:

memcached.exe -d install
/* Install the memcached as windows service */

memcached.exe -d start -m 512
/* Start the memcached instance with maximum memory 512M */

Configuring PHP using the Memcached:

1. Download php_memcache.dll in Google as pecl4win.php.net was down in 2008.
2. Copy the php_memcache.dll to \ext
3. Edit the php.ini to include the line
   
extension=php_memcache.dll


4. Restart Apache

Test the memcache is working through the following code.

<?php
$memcache = new Memcache;
$memcache->addServer("localhost",11211); /* Default Port */
$memcache->addServer("localhost", 22333); /* Comment this out if you are not starting multiple incidence */

print "Server's version: " . $memcache->getVersion() . "<br />\n";

$tmp_object = new stdClass;
$tmp_object->str_attr = "test";
$tmp_object->int_attr = 123;

$memcache->set("key",$tmp_object,false,10);
echo "Store data in the cache (data will expire in 10 seconds)<br />\n";

echo "Data from the cache:<br />\n";
var_dump($memcache->get("key"));
?>

Read the PHP Memcache Menu

There is another key-value pair cache called Redis. Will talk more in other posts.

xChm - Another Linux CHM Reader

xCHM is a cross-platform GUI front-end to chmlib, with borrowed bits from Pabs' chmdeco project.

Originally written for UNIX systems (Linux, *BSD, Solaris), xCHM has been since ported to Mac OS X and Windows.

xCHM can show the content tree if one is available, print pages, change font face and size, remember bookmarks, display a searchable index, and search for words in the current page and the whole book.

xCHM is a freeware under GPL.





More screenshots here.

Apache + PHP (Windows) Step-By-Step

1. Download the 2.2.11 windows binary from Apache
2. Run to install Apache. Assuming you are installed to C:\Program Files\Apache Software Foundation\Apache2.2
3. Download the PHP windows binary (Zip Package) from PHP.net
   
4. Unzip the package and put everything inside c:\php
5. Copy c:\php\php.ini-recommended to c:\php\php.ini
6. Assume your web root folder is C:\WebRoot
7. Edit the php.ini


doc_root = "C:\WebRoot"



upload_max_files = 10M /* Modify the maximum upload file size to 10 megabytes, default 2 M */

uncomment the following line for using MySQL or other lines for other database

extension=php_mysql.dll
extension=php_mysqli.dll



8. Edit the Apache conf\http.conf

• Change the DocumentRoot to your webroot
• Change the <Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs"> to <Directory "C:/WebRoot">
• Change the Deny from all to Allow from all
• Add the following line to conf\http.conf
  
  # Configure the path for php.ini
  PHPIniDir "C:/php"
  LoadModule php5_module "C:/php/php5apache2_2.dll"