Using the PropertyGrid class

The PropertyGrid class is a grid implementation similar to the property grids so commonly used in different IDEs. Each row in the property grid represents a property of some object. In this example, each row represents a property of a movie from a movies list:

How to do it...

1. 1. Create a data store for the property grid:

   var moviesStore = new Ext.data.JsonStore({
   url: 'grid-property-grid.php',
   root: 'movies',
   totalProperty: 'count',
   baseParams: { action: 'movies' },
   fields: [{ name: 'film_id' },
   { name: 'title' },
   { name: 'rating' },
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float' },
   { name: 'last_rented', type:'date'}]
   });
   

2. 2. Define the property grid:

   Ext.onReady(function() {
   var movieGrid = new Ext.grid.PropertyGrid({
   title: 'Properties Grid',
   autoHeight: true,
   width: 300,
   renderTo: Ext.getBody()
   });
   

3. 3. A handler for the store's load event will set the first record as the source for the property grid:

   moviesStore.on('load', function(store, records...