Home arrow JavaScript arrow EXT JS Passing Live Data

EXT JS Passing Live Data

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.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 12
July 27, 2009
  1. · EXT JS Passing Live Data
  2. · MySQL
  3. · Adding Additional Configuration Properties
  4. · Working More Closely with the Back End

print this article

EXT JS Passing Live Data
(Page 1 of 4 )

For reference, PHP is not the only server-side language that could be used to accomplish this task, but Iíve chosen it because itís free, powerful and easy to use. Alternatives include Java and ASP.NET, among others.

Some PHP

In a new file in your text editor, then, add the following code:


// set content-type header

header('Content-type: application/json');

// connection information

$host = "localhost";

$user = "root";

$password = "yourPasswordHere";

$database = "shop";


//make connection

$server = mysql_connect($host, $user, $password) or die("Could not connect");

$connection = mysql_select_db($database, $server) or die("Could not select database");


//build query

$query = "SELECT * FROM products";

//query databse

$result = myql_query($query);


//create json data structure

$startJsonObject = "{ products: [";

$endJsonObject = "]}";


//build json object with stuff from db

for ($x = 0; $x < mysql_num_rows($result); $x++) {

$row = mysql_fetch_assoc($result);

$data.= "{title:'".$row['title']."',image:'".$row['image']."',inStock:'".$row['inStock']."',price:'".$row['price']."',category:'".$row['category']."',manufacturer:'".$row['manufacturer']."'},";


//remove comma from final object in array

$noFinalComma = substr_replace($data, "", -1);


//output complete json object

echo $startJsonObject . $noFinalComma . $endJsonObject;

//close server connection




Save this as productSearch.php. The first thing we do in this file is set the content-type header to application/json. Next we define the information needed to access the MySQL database, which consists of the host and usernames, and the password and database name.

Following this we attempt to connect and try to select the specified database. If this is possible, we then select all of the data in the database. So far, all of this is pretty standard stuff, but it soon starts to get interesting.

We want our JSON object to have a specific structure, as it must match the structure of the object that our JsonStore is expecting. We first define the beginning and end of the JSON object as strings. We then use the information contained in our query (which will be a series of rows containing our data, again very much like an associate array). For each row in the query results we add a new item to our JSON array, using text to specify the opening and closing curly braces and the object properties, and using references to our data as the property values.

The next part of the code isnít strictly necessary, but I always prefer to be as tidy as possible. Because each item within our JSON array will be exactly the same, the last item will be followed by a comma separator, even though it doesnít actually require one. To tidy things up we can easily remove it using the substr PHP function.

Now that we have all of the data within our JSON object, we can build the object using the start and end strings and the data from the database. This is passed back to the client using a simple echo, but because we set the content type header to JSON it will be recognized and treated as a JSON object instead of a simple string. We then close the database connection, as we have the data we need. You should note that PHP5 has functions for building JSON objects built in to it. Iíve chosen to use strings in this example because itís probably the quickest and simplest way to get the object in the structure that we want.

Next: MySQL >>

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials