Ext JS And PHP – Grid Panel Sample

February 11, 2009. Posted by Jorge

Continuing with the theme of my previous post, 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();

    ?>