ExtJS Property Grids in APEX...

I found this example for creating an extjs property grid, which made me think how nice it would be, to have this in apex.... so i played around and came up with another report template....
Let's look at the example....

var propsGrid = new Ext.grid.PropertyGrid({
        renderTo: 'prop-grid',
        width: 300,
        autoHeight: true,
        source: {
            '(name)': 'Properties Grid',
            grouping: false,
            autoFitColumns: true,
            productionQuality: false,
            created: new Date(Date.parse('10/15/2006')),
            tested: false,
            version: 0.01,
            borderWidth: 1
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });

As you can see, what we basically have to do is to create the source part.... pretty much usual value pairs....
So, i created a new report template of type "Generic Columns (column template)" ... I called it ExtJS_PropertyGrid_Report...
Before Rows

<div id="prop-grid#REGION_STATIC_ID#"></div>
<script type="text/javascript">
Ext.override(Ext.grid.PropertyGrid, {
       removeProperty: function(property){
            delete this.source[property];
            var r = this.store.getById(property);
            if(r){
                // remove property
                this.store.remove(r);
            }
        }
   });

function initRegion#REGION_STATIC_ID#() {
    var propsGrid = new Ext.grid.PropertyGrid({
        applyTo: 'prop-grid#REGION_STATIC_ID#',
        id: 'myPropertyGrid#REGION_STATIC_ID#',
        width: 300,
        autoHeight: true,
        source: {

I copied more or less the example from above, added #REGION_STATIC_ID# to make the names and ids unique.... Then i just add a value pair for every column in the report.... (Reports, that use this template should only have one row!!!)

Column Template 1

'#COLUMN_HEADER#':'#COLUMN_VALUE#',

I have a comma to much, so i add a dummy entry, which i instantly remove when the grid is created.....
After Rows

'MYDUMMY123':''},
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });
propsGrid.removeProperty('MYDUMMY123'); // remove the dummy entry
}

Ext.onReady(function(){
  initRegion#REGION_STATIC_ID#();
});
</script>

I put the whole magic inside a function, so i can call it again, wenn i refresh the report via $a_report()....
Now we can create a report region with any select, that generates a one row result set.... the column names have to be unique....
For example:

select '01.06.1980' as "Birthday"
     , 'Anja' as "Firstname"
     , 'Hildebrandt' as "Name"
     , 'Developer' as "Profession" 
  from dual

Select your new created template...
The result shoul look something like this....

That's it....
Have fun...
Anja