Welcome to part two of the EXT-JS live data tutorial. In part one we created the underlying page and added the code to create the JsonStore, ColumnModel and GridPanel. Our GridPanel, however, currently has no data, so the first thing we’re going to do in this part of the tutorial is add the PHP code that will pass this data back to the JsonStore.
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: