Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

ExtJS And PHP: Grid Panel Sample

February 12, 2009 2 Comments

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.

Tagged With: ExtJS Tutorial 2 Comments

Comments

  1. Mucahid says

    July 25, 2013 at 6:31 PM

    Turning to the database records. However, do not store the object records

    Reply
  2. Varadhi says

    April 19, 2014 at 1:45 AM

    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.

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2019 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in