EXT JS Working With Live Data
(Page 1 of 4 )
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.
We’ll be using a mixed bag of subjects throughout this article, including basic HTML and CSS, JavaScript, PHP, JSON and MySQL. Don’t worry if you’re new to some or all of these technologies, as everything will be explained in full. The only requirement is access to a web server with PHP and MySQL installed and configured. If you don’t have access to this setup, you can read one of my articles on setting it up (see my Windows XP or Windows Vista Apache setup guides).
Getting Started
The files that we make over the course of this tutorial will need to be saved within the content-serving directory of your web server. To keep the source files for this example separate from any other projects on which you’re working, it’s probably best to create a new directory within your web server’s root. Call this folder extjs-site.
You’ll need a copy of the EXT-JS library for this example to work, of course. It can be downloaded from the download page of the Ext website. Once downloaded, unpack the library to the extjs-site folder in your server root. This will create a folder called ext-currentVersion which for simplicity can be renamed to just ext.
Let’s make a start with the HTML for this example, which will be minimal as most of the elements with which we’ll end up will be added automatically by EXT-JS. In a new page in your text editor, add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EXT JS DataStore and Grid Example</title>
</head>
<body>
<div id="productGrid"></div>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
//code to go here…
</script>
</body>
</html>
Save this asgridExample.html. A very simple page, I’m sure you’ll agree. We have the usual DOCTYPE in place to prevent quirks mode. To optimize file download times (to the visitor's computer), stylesheets should be the first files to be downloaded following the document, so the first thing we do is link to the main EXT stylesheet, which provides the default styling for all of the library components.
The body of our page contains just an empty div element, which will act as the container for our data grid. Its content will be added by the script later on. The last items in the body are the script tags we’re going to be using; the first of these links to the base EXT source file, which creates the Ext namespace and provides other essential services. Following this is the source file for the components themselves. All components are controlled using this file, so we can make use of all of the library’s functionality.
Next: Starting the JavaScript >>
More JavaScript Articles
More By Dan Wellman
