X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/guides/direct_grid_pt1/README.md diff --git a/docs/guides/direct_grid_pt1/README.md b/docs/guides/direct_grid_pt1/README.md new file mode 100644 index 00000000..21737a07 --- /dev/null +++ b/docs/guides/direct_grid_pt1/README.md @@ -0,0 +1,445 @@ +Mapping a Grid to a MySQL table using Direct and PHP Part 1 +=========================================================== + +I. Introduction +--------------- +In this tutorial we will be looking at how to build a table, or 'grid', that receives its data from a MySQL database. It's aimed at people who have some familiarity with JavaScript, PHP and MySQL but are new to the Ext JS framework. By the end of the tutorial, we'll have a grid component that looks like this: + +{@img grid-full.png The finished product} + +II. Getting Started +------------------- +### 1.1 Requirements + +You will need: + +* A server with PHP (5.3+) and MySQL (4.1.3+) installed +* A browser compatible with Ext JS 4 +* A text editor + +### 1.2 What is Ext Grid? +A grid in Ext JS is "essentially a supercharged ``" to quote [its documentation](#!/api/Ext.grid.Panel). It allows you to manipulate data by sorting and filtering, and to fetch new data in, so it's much more dynamic than your run-of-the-mill table. As you can imagine, this allows you to do some pretty cool things. + +### 1.3 What is Ext Direct? +Ext Direct provides a way to communicate between the browser and server using less code than traditional methods (i.e. PHP) to actually _do_ stuff with your data. + +### 1.4 What's the Benefit of Doing This? +There are a number of benefits to using Ext Direct to handle your data: + + - It's platform agnostic, so it doesn't matter whether you're using PHP, Java or C\# to serve the data. + - You can serve _as much_ data as you want, with no negative client-side impacts. + - It has [3 types of 'providers'](#!/api/Ext.direct.Manager), that communicate with the server in different ways, we will be using the `RemotingProvider`. + - It can bundle your AJAX requests into a single request (by default, all those sent in the first 10ms) and so the server only has to send back one response. + +Now that we've all been persuaded, lets get to building it. + +III. Setting Up +--------------- +Following the best practices for an Ext application highlighted in the [getting started guide](#/guide/getting_started), we can set up a skeleton directory structure with an index.html file and a blank JavaScript file called grid.js. + +index.html + + + + + + List of Velociraptor Owners + + + + + + + + + + + +Because we're using the HTML5 document type we're allowed to omit the type in a script tag. It assumes that all `