PDA

View Full Version : grid column computed fields



ismashkhy
24 Apr 2011, 5:55 PM
How do I get this done?,

say, that I have a unit price and qty be multiplied and have a total on each column cell for each row?,

also,

I have to make a comparison from 1 cell to another,

scenario:

if cell_1 <= cell_2 then
row.background-color('red');
endif

....

friend
25 Apr 2011, 5:36 AM
Here's a code sample which shows how to use a custom renderer. Note that the dataIndex on the 'Total' column is irrelevant; the renderer determines the value returned for the column:



function rendererTotalPrice(value, metaData, record, rowIndex, colIndex, store)
{
var totalPrice = 0.00;
var price = record.get('price');
var qty = record.get('qty');

if (price > 0 && qty > 0) {
totalPrice = price * qty;

}
return Ext.util.Format.number(totalPrice, '0.00');
}

var grid = new Ext.grid.GridPanel({
autoHeight: true,
autoScroll: true,
boxMaxHeight: 90,
columns: [
{header: 'Last Name', dataIndex: 'lastName', sortable: true, width: 100},
{header: 'First Name', dataIndex: 'firstName', sortable: true, width: 100},
{header: 'Price', dataIndex: 'price', sortable: true, width: 100, css: 'text-align: right;'},
{header: 'Qty', dataIndex: 'qty', sortable: true, width: 100, css: 'text-align: right;'},
{header: 'Total', dataIndex: 'price', sortable: true, width: 100, renderer: rendererTotalPrice, css: 'text-align: right;'}
],
columnLines: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
store: {
xtype: 'arraystore',
fields: ['lastName', 'firstName', {name: 'price', type: 'float'}, {name: 'qty', type: 'int'}],
data: [
['Borman', 'Martina', 12.32, 4],
['Oberheuser','Hertin', 9.95, 12],
['Goring','Bullman', 11.32, 4],
['Ellison', 'Larry', 19.95, 10],
['Jobs', 'Steve', 22.03, 5],
['Gates','Bill', 1.92, 11],
['Fiorina', 'Carly', 8.99, 3],
['Bush', 'Georgie Jr.', 2.34, 28]
]
}
});


To dynamically style an entire grid row at run time, see the code sample at the top of the Ext.grid.GridPanel API docs (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel) (in particular, see the 'viewConfig' section of the grid).

If you just want to change the style of one of the 'Total' cells, you can set the 'metaData.css' property of the custom renderer to a user defined style.

ismashkhy
25 Apr 2011, 5:35 PM
WAW!,

you are really a "friend" to call,

you lightened things for me,

I will definitely use your code...

One thing though, I've struggling about how to cope with each parameter of :

rendererTotalPrice(value, metaData, record, rowIndex, colIndex, store),

If you could spare me an explanation with each parameter of the function, this will really take me to the next level coding in extjs,

the technique is very useful...
...

ismashkhy
25 Apr 2011, 6:36 PM
as a start,

conditional css for a column,


.highlight{
background-color: #00ff44;
}


and the function


function rendererCol(value, metaData, record, rowIndex, colIndex, store)
{
var tvalue = value;
var QoS = record.get('nqos');
if (value >= QoS){
metaData.css = "highlight"
}
return tvalue;
}

now the result,

25784

see that the result is not so convincing,

I think i did something wrong or my code is not meeting some requirements,

....

friend
26 Apr 2011, 4:03 AM
rendererTotalPrice(value, metaData, record, rowIndex, colIndex, store),

If you could spare me an explanation with each parameter of the function...

These parameters are auto-magically passed to any renderer you declare for a grid column. Vist the Ext.grid.Column API Docs (http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.grid.Column) and expand the renderer attribute for more info.