In a recent article we looked at the Date-Picker control from the world-class EXT-JS JavaScript library. In this article we’re going to be looking at a series of utilities and controls from the library which let you work with live data including the GridPanel, the PagingToolbar and the JsonReader components. These powerful tools can be combined in numerous ways to provide a robust solution to retrieving, formatting and displaying live data.
EXT JS Working With Live Data - Starting the JavaScript (Page 2 of 4 )
The majority of our coding will be done with JavaScript. Let’s look at initializing and invoking our GridPanel, which is what will be used to display the data we’re going to pull from our database. The third script tag in our document is currently empty; within it we can start with the following JavaScript:
The first thing we do is set the location of a local blank image using the BLANK_IMAGE_URL constant. This file is used throughout the library, so if we don’t use a local version, one will be downloaded from the Ext domain, which could worsen the performance of your application.
Following this we use the onReady() method, which allows us to specify an anonymous function that should be executed as soon as the DOM is in a usable state. The rest of our code can now sit happily within this anonymous function.
The Ext-Js GridPanel component, which is the foundation of this example, is similar in structure to a standard HTML table, although that is where the similarities begin and end. GridPanel displays data in a table-like format of rows and columns, but it is presented in an extremely attractive manner and contains a lot of built-in advanced functionality like row selection, zebra striping, column sorting and remote data.
JavaScript 
HTML5 Boilerplate: Working with jQuery and Modernizr
