Continuing with the theme of a previous article, here is another ExtJS and PHP sample. This time my PHP page will be serving data to populate a grid panel.
Like the combo box in the previous post, the grid is going to display a list of categories sent from the webpage. This is the grid panel’s definition:
var grid = new Ext.grid.GridPanel({
store: categoriesStore,
columns: [
{ id: 'id', header: "Id", width: 20, sortable: true, dataIndex: 'id' },
{ id:'name', header: "Category Name", width: 75, sortable: true, dataIndex: 'name' }
],
stripeRows: true,
autoExpandColumn: 'name',
height: 350,
width: 600,
title: 'Categories'
});
grid.render('grid-example');
The JSON representation of the categories data will have the following form:
{'categories':
[{'id':'1', 'name':'Category 1'},
{'id':'2', 'name':'Category 2'},
{'id':'3', 'name':'Category 3'},
{'id':'4', 'name':'Category 4'},
{'id':'5', 'name':'Category 5'},
{'id':'6', 'name':'Category 6'}]
}
The categoriesStore data store points to the PHP page where I will retrieve the categories information from a MySQL database:
var categoriesStore = new Ext.data.JsonStore({
url: 'categories.php',
root: 'categories',
fields: ['id', 'name']
});
And this is the PHP page:
<?php
function GetCategories() {
$query = "SELECT * FROM `categories`";
$categories = array("categories" => array());
$conn = OpenDbConnection();
$result = mysql_query($query);
$num = mysql_numrows($result);
$i = 0;
while ($row = mysql_fetch_assoc($result)) {
$categories["categories"][$i] = $row;
$i++;
}
CloseDbConnection($conn);
return json_encode($categories);
}
echo GetCategories();
?>
Where to find more information
Additional information about the topics covered by this post can be found in the ExtJS tutorials page and the PHP documentation.
Turning to the database records. However, do not store the object records
Nice and simple article. I have just started to learn using ExtJS and I am a PHP programmer. I want to use ExtJS with PHP and this article was a good starter for me. Thank you.