Ext JS - Learning Center

Tutorial:PropertyGrid with JsonStore

From Learn About the Ext JavaScript Library

Revision as of 01:57, 24 July 2009 by Cyroc (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Summary: How to use a PropertyGrid with a JsonStore
Author: Ry Racherbaumer
Published: 10/16/2008
Ext Version: 2.2
Languages: en.png Englishcn.png 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.

Retrieved from "http://www.extjs.com/learn/Tutorial:PropertyGrid_with_JsonStore"