From Learn About the Ext JavaScript Library

First of all, I want to give big ups for the developers of ExtJS. I've discoverd ExtJS just recently and I was really impressed and started to play around with the components especially with the Grid component. In the past I've had my share of Javascript frameworks/libs but ExtJS was really an eyeopener.

Also what I like about ExtJS is that it's almost similar like Adobe Flex (wich I also like).

I've also set up a forum topic here: http://extjs.com/forum/showthread.php?t=26990

Contents 1 Project files 2 Object, objects, objects 3 1) Formfield 4 2) Datastore 5 3) Grid 6 4) Serverside script

Project files

I've set up a working example on my server : http://www.leihitu.nl/ext-2.0.1/examples/tutorial_final/

If you want I have also got the final example to download at:

http://www.leihitu.nl/ext-2.0.1/examples/tutorial_final/tutorial_files.zip

I've setup the folder structure just like the /ext-2.0.1/examples you get when you download the ExtJS files. Just drop the folder tutorial_final in your /examples/ folder. Also drop the connection.php and JSON.php in the /example/ folder.

Make sure you edit connection.php and /tutorial_final/search.php with your mysql details

Object, objects, objects

The goal of this tutorial is to make a page where you can look up some people. The user will type in the name in a inputfield and as the user is typing the name, the search results will be displayed in a grid.

In order to do this you need to understand how the objects interact with each other. First a diagram to illustrate:

So some explanation

1) Formfield

The formfield is where the user types in the name. On each stroke, the input will be given to the datastore.

2) Datastore

For those who uses Adobe Flex, they will see a familiar concept. Datastore basically holds the connection to your server-side script/xml/array data. The Datastore also has a reader. The reader maps the incoming data from your datasource (server-side script/xml/array) to objects so other components can access these objects.

3) Grid

The grid component basically just binds itself to the Datastore, meaning every time the Datastore receives new data and is rendered through the reader, the grid just updates itself (Adobe Flex anyone?). The grid wil get the data from the reader, but the grid will decide which fields will be exposed to the visitor. For example, the reader can have the following fields: FIELD_1, FIELD_2, FIELD_3, but the grid just shows FIELD_1 and FIELD_2.

4) Serverside script

When the formfield passes data to the Datastore, the Datastore performs a HTTP GET or POST (depending on what you want) to your server-side script. The server-side script then queries the database and results are returned to the Datastore. Before the server-side returns the results, it converts the data to JSON data. When the Datastore has received the JSON data, it will pass it to the reader and the Datastore has new data so all the components that are bound to the Datastore will be updated.

That's basically your livesearch flow ;-).

Ok , let's start this journey - let's create the HTML and JS file:

http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-2