From Learn About the Ext JavaScript Library

Summary

This tutorial is intended for those for whom the words 'ColumnModel' or 'DataStore' sound japanese. It walks through the very basics of building of an Ext grid that has a PHP / SQL backend. There are numerous articles and forum threads on this subject. Yet, after much pain of building my own workable grid, and seeing the amount of newbie threads still addressing this area of Ext, I decided to take some time and give a little contribution to those tutorials.

Feedback

Remember that this tutorial is for newbies only. Please give me some feedback in this thread so that I can improve it with time!

Screenshots

Here is a screenshot of the grid that we will build :

If you are watching these images and saying to yourself, breathless : 'wow... this is amazing...', then this tutorial is definetely for you!

Table of Contents

Part 1  : Introduction to this tutorial (this page)
Part 2  : Setting up your PHP / SQL backend.
Part 3  : Basic listing
Part 4  : Editing the grid
Part 5  : Adding an entry
Part 6  : Deleting an entry
Part 7  : Custom CSS for grid
Part 8  : Searching the grid
Part 9  : Adding a PageCount division to your bottom bar
Part 10 : Adding a QuickSearch component
Part 11 : Printing the grid
Part 12 : Adding a ContextMenu

At the end of each part, you will find an updated tutorial code that you can download.

Part 2 : Setting up your PHP / SQL backend