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);