EXT JS Passing Live Data

Your database and the example table will already need to be set up with the correct fields and data types. The following commands at the MySQL Command Line Interface (CLI) can be used to achieve this:

CREATE DATABASE shop;

USE shop;

CREATE TABLE products (title VARCHAR(40), image VARCHAR(40), inStock ENUM(‘y’, ‘n’), price DECIMAL(5,2), category VARCHAR(20), manufacturer VARCHAR(20));

Each command should go on its own line, and the enter key should be pressed after each line. We define each of the fields in the table, mostly using standard characters of differing lengths (VARCHAR). We also define the inStock field using ENUM, which is synonymous for a Boolean value, and the DECIMAL type, which gives more accurate financial rounding. With this type we specify the total number of figures with the first integer and the number of decimal places with the second.

Unless you happen to have a table stuffed full of product information, you’re going to need to add the data used in this example to your database. You could do this manually, but as we’re using approximately 40 products for this example, that could take some time. I’ve created a text file which can be used to add the required data to the database automatically, which should be included with the code download for this tutorial. All you need to do to use this file is run the following command in the MySQL CLI:

LOAD DATA LOCAL INFILE 'c:/pathTo/stockList.txt' INTO TABLE products LINES TERMINATED BY '\r\n';

Now that we have the data in our database and have the PHP file ready to pass the data back to our JsonStore, the GridPanel should be populated when the page is opened, as in the following screen shot: