Freitag, 12. Februar 2010

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 =;
// remove property;

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


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

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


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...


  1. Hi Anja,

    Once again another nicely blogged. Good work....


  2. Hi Anja

    Enjoying your blog, keep up the great work.