Tutorial:PropertyGrid with JsonStore (Legacy)
This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.
From Sencha - Learn
| Summary: How to use a PropertyGrid with a JsonStore |
| Author: Ry Racherbaumer |
| Published: 10/16/2008 |
| Ext Version: 2.2 |
Languages:  English Chinese
|
It took me a while to figure this out after going through several forum posts, so I'm sharing it with everyone.
Setting up the HTML
Copy the following into an HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Ext.PropertyGrid with JsonStore</title> <link type="text/css" rel="stylesheet" media="all" href="lib/ext-2.2/resources/css/ext-all.css" /> <script type="text/javascript" src="lib/ext-2.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="lib/ext-2.2/ext-all-debug.js"></script> </head> <body> <div id="grid-ct"></div> </body> </html>
Very simple page, with a single element for our PropertyGrid to be rendered to. Now let's setup the JavaScript...
Setting up JavaScript
Copy the following into a script tag, or an external (.js) file.
Ext.onReady(function(){ var propertyGrid = new Ext.grid.PropertyGrid({ title: 'Properties Grid', id: 'propGrid', autoHeight: true, width: 300, renderTo: 'grid-ct', source: {} //initialize source config object }); var propertyStore = new Ext.data.JsonStore({ autoLoad: true, //autoload the data url: 'getproperties.php', root: 'props', fields: ['First name', 'Last name', 'E-mail'], listeners: { load: { fn: function(store, records, options){ // get the property grid component var propGrid = Ext.getCmp('propGrid'); // make sure the property grid exists if (propGrid) { // populate the property grid with store data propGrid.setSource(store.getAt(0).data); } } } } }); });
When Ext is ready for action, the script creates the PropertyGrid as well as the JsonStore to supply the data. You'll recognize this PropertyGrid code from the Complex Layout example. It's exactly the same except for the source config object and an id. In this example, the source config object is not initially set.
The JsonStore is set to autoload its data and it has a 'load' listener to populate the PropertyGrid after the data has been loaded. There are many ways to load the data from the JsonStore, but this seems to be the easiest.
Now that you have the JavaScript setup, let's setup the back-end...
Setting up the back-end
In order for the data to be read correctly, it needs to be in the right format.
Here's an example of the JSON output that is needed for this example to work:
{"props":[
{
"First name":"John",
"Last name":"Smith",
"E-mail":"jsmith@smith.com"
}
]}
As you can see, a single object of properties is present within an array. Usually, there would be multiple records here for things such as a GridPanel. But, the PropertyGrid only has one record of properties.
That should be it. Once the page loads, the store should load its data and populate the PropertyGrid if your back-end is setup properly. This example can easily be adapted to work with any store.