I have been designing a practical example that will incorporate as many different features as possible, for teaching all of the ways that ExtJS works and also provide a useful tool for learning a little bit about the stock market.

Some of the obvious major features that we will be taking a look at ‘under the hood’ of this application, include YQL, Yahoo’s Query Language that serves as the stock information look up, obviously some PHP and JSON connections including just how all of that fits together to give you a simple user log in and portfolio storage system, several ExtJS components like tab panels, external content rendered into popup windows, paging, polling and some basic charting.

Don’t worry if all of this seems a bit much after deconstructing this example I am sure that you will not only understand how a simple web application such as this one works, you will also be able to build one.

Before starting your Ext masterpiece think about how you may want to layout your application, for some inspiration you can check out the different layouts available in the extjs framework by looking here ( http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html ).

The Stock Game Layout an Ext tab panel, with a managed i frame panel, and a grid.

You may have noticed that there is a lot of information coming back about the selected row in the top grid, and since this is a relatively small site, you might be wondering how this application was able to gain such data on the fly for any stock traded on any market? The answer lies in using YQL to scrape the financial data from the Yahoo Finance website. You will see that the data presented in the lower panel in the screen shot above looks much like the data in this screen shot for the same stock on the same day.

Yahoo Finance GILD Stock Lookup

I could use the managed iframe extension (http://www.sencha.com/learn/Extension:ManagedIframe) to get the identical site to load into say a pop-up window such as the one that is linked to the stock ticker in the top grid, however, that poses the following problems, you will get a JavaScript error like the one below:

This is what happens when you try to load external content into an ExtJs panel

To get around this annoying cross domain content problem fire up the YQL console and give the following query a try

SELECT * FROM html WHERE url="http://finance.yahoo.com/q?s=f" AND xpath="//div[@class='yfi_quote_summary']"

Before coding your PHP page that will contain the output that we can see in the console we have to understand how we got here in the first place, right? You will have to determine what content you are after, and only you can make the call on whether that content is copyrighted or not, one you see a table, paragraph, tag, something that you would like to access just fire up Firebug and find out the name, id, etc of the tag that contains the data and the URL. Plug the URL in here:

url="http://finance.yahoo.com/q?s=f"

and the tag and class / id in here

xpath="//div[@class='yfi_quote_summary']"

now press the button and watch your data come back to you in the form of formatted XML.

A simple PHP page that would handle the data return and formatting would be:

<style>
  
  .yfitp table{ font-size:12px; width:100%}
  .yfitp tr{ font-size:12px;}
  .yfitp td{ font-size:12px; border-bottom:1px solid #3F567D }
  .yfi_quote_summary{
    font-family:arial, Helvetica, sans-serif;
    font-size:10pt;
    display:block;
    width:45%;
    float:left;
    margin:5px;
    padding:5px;
  }
  #yfi_headlines{
     font-family:arial, Helvetica, sans-serif;
    font-size:10pt;
    display:block;
    width:45%;
    float:left;
    margin:5px;
    padding:5px;
  }
  .display_links{display:none;}
  .chart{
    display:block;
    float:left;
    width:45%;
    margin:5px;
    padding:5px;
  }
  .chart a{text-decoration:none; border:none;}
  img{border:none;}
  .ft{display:none;}
  diagnostics{display:none;}
</style>
<?php
$ticker = $_REQUEST['ticker'];
  $BASE_URL = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3D" . $ticker . "%22%20AND%20xpath%3D%22%2F%2Fdiv%5B%40class%3D'yfi_quote_summary'%5D%22&diagnostics=true";
  
  
    // Make call with cURL
    $session = curl_init($BASE_URL);
    curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
    $data = curl_exec($session);
   
   echo $data;
   
  $BASE_URL = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3D" . $ticker . "%22%20AND%20xpath%3D%22%2F%2Fdiv%5B%40class%3D'chart'%5D%22&diagnostics=true";
    $session = curl_init($BASE_URL);
    curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
    $data = curl_exec($session);
  
   echo $data;
  
  
  $BASE_URL = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3D" . $ticker . "%22%20AND%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'yfi_headlines'%5D%22&diagnostics=true";
    $session = curl_init($BASE_URL);
    curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
    $data = curl_exec($session);
    $pattern = "/<(a¦img)([^>]+)>/i";
    $replacement = "<\\1 target=\"_blank\"\\2>";
    $new_str = preg_replace($pattern,$replacement,str_replace('target="_blank"','',$data));
  
   echo $new_str;
  
?>

You can see the code working (work in progress) above by clicking on the Stock game tab.