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....
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
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
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 your new created template...
The result shoul look something like this....
That's it....
Have fun...
Anja
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
