Extending Standard Panels
Extending Standard Panels
Standard panels such as grid are also built from HTML DOM elements. Grid rows are implemented as
<tr>
elements and grid cells as
<td>
elements. You can get references to these elements using Web Central API - for example the following code finds the
<td>
element of the cell that displays
wr.wr_id
field in the first grid row:
var td = this.requestGrid.rows.get(0).cells.get('wr.wr_id');
You can define custom grid columns that by default do not display any content:
<panel type="grid" id="requestGrid" dataSource="requestDataSource">
<title>Work Requests</title>
<field name="wr_id"/>
<field name="prob_type"/>
...
<!-- custom field that will display color codes -->
<field id="legend">
<title>Legend</title>
</field>
</panel>
You can use a JavaScript event handler that will be called after the grid is refreshed with data to modify custom cells' content or style based on data records displayed in each row:
requestGrid_afterRefresh: function() {
// for all grid rows (Ab.grid.Row objects)
this.requestGrid.gridRows.each(function(row) {
// get wr.status for this row
var status = row.getRecord().getValue('wr.status');
// map status to color
var color = '#f5f5f5';
switch (status) {
case 'R': color = '#fe4'; break;
case 'A': color = '#ccf'; break;
...
}
// get the id="legend" cell for this row (Ab.grid.Cell object)
var cell = row.cells.get('legend');
// set cell background color
Ext.get(cell.dom).setStyle('background-color', color);
});
}
File: solutions/programming/grid/ab-ex-prg-grid-legend.js
You can use similar code to modify the content or style of standard grid columns, for example by highlighting data values retrieved from the database using different colors.