ExtJS and JSON in concert

I have to rely on Javascript to assist me in my work as Security and Portal Architect for quite a while now. Back then before I came across frameworks such as WATIR/Ruby, Javascript has been the tool of choice along with Perl to deliver the critical Security deliverables end-to-end.

So, it is no surprise that nowadays I stay hectic by working with and catching up with what the leading Javascript frameworks are all about. For today, I am going to focus on ExtJS Grid Panel, Column Model and how with JSON, it enables the interactive display of Server-side data.

Requirements

1) Web Server--I am using XAMPP for my development server and I am going to rely on PHP to supply the data that the ExtJS datastore needs

2) ExtJS --download it from the official www.extjs.com website, in this case I am using the 3.0 version

3) text editor - Eclipse IDE but Emacs or Vim would be just fine

Data

The data would be coming in the JSON format from the Server-side. If you are new to JSON, you can do a bit exploration with what JSON is all about. But, if you are familiar with XML, then you should have no problems with the following example:

in authors.php create the following function ==>

function GetAuthors() {

$authors = "{'authors':[";

$authors .= "{'id':'1', 'title':'Walden','author':'Thoreau','descr':'Walden is the garden of Eden from the author perspective','type':'book'},";

$authors .= "{'id':'2', 'title':'Ramayana','author':'Rsi Walmiki','descr':'The greatest story about divine faith and resolute devotion','type':'book'},";

$authors .= "{'id':'3', 'title':'Mahabarata', 'author':'Rsi Vyasa','descr':'one of the two major Sanskrit epic of India','type':'book'}";

$authors .= "]}";

return $authors;

}

echo GetAuthors();

?>

Notice that each "Author", or perhaps more suitably each "Book" entry, has the following attributes: id, title, author, descr, and type.

Those attributes are the ones that you have to work with and specify in the ExtJS JSONStore.

Web Page

The Javascript section of the Web page will contain the following code snippets:

Pay attention to the section where the JSON Datastore points to the authors.php, the Server-side script that we talked about earlier

var store = new Ext.data.JsonStore({

url: 'authors.php',

root: 'authors',

fields: ['id', 'title','author','descr','type']

});

And now for the result in action ==>