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:
//set local blank image
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
//define function to be executed when page loaded
Ext.onReady(function() {
//rest of code to go in here…
});
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.
Next: Defining the DataStore >>
More JavaScript Articles
More By Dan Wellman
