Wednesday, April 29, 2009

Ext JS - Grid - Fetch Website Information into Tabs

Prerequisite:
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);
});

No comments:

Post a Comment