Yesterday, I was helping someone figure out how to add a custom, complex editor for use in a ExtJS Property Grid.

The Anatomy of a Property Grid

For some context, a Property Grid is like an editable grid, but instead of editing rows of data, you use a grid like interface to edit the properties of a single object. Think of it like the interface you’d use when defining database properties in SSMS…

By default, the Property Grid has several editors for simple types like strings, dates, booleans and numbers. Better yet, ExtJS will automatically try to detect the correct type, and specify the appropriate editor for you.

Out of the Box is Never Enough

But of course, out of the box never gets you 100% of the way. Imagine that we have a cluster of properties, one property of which is a complex data type. Consider this example:

source: {
    name: "My Object",
    created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
    timeofday: "12:00 PM",
    available: false,
    version: 0.01,
    description: Ext.encode({
    product: 'Clorox',
    tagline: 'The Shinyest White!'            

As you can see, most of the properties are very simple. However, the last one (description) is complex: in this example, it’s a serialized object. If we More >