PDA

View Full Version : How to store additional data to a grid cell?



Raksmey
17 Feb 2010, 9:41 AM
Hi,

Does anyone know how to store additional data to a grid cell?
if that possible, it'll be easy to get information from a grid cell as user click on it.

I want to have a grid which read data from server and as the grid render it will combine some data from that record to a specific grid cell, so when I click on the grid cell I will be able to retrieve those information back from that grid cell.

thanks

dlbjr
17 Feb 2010, 10:15 AM
var g = new Ext.grid.GridPanel({
loadMask: { msg: Config.load_mask, store: ds },
viewConfig: { emptyText: Config.grid_no_data },
title: '',
store: ds,
height: 400,
width: 400,
stripeRows: true,
autoScroll: true,
clicksToEdit: 1,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
header: 'data',
dataIndex: 'data',
hideable: true,
sortable: true,
hidden: false,
width: 120,
renderer: function(data, cell, record, rowIndex, columnIndex, store) {
var value = record.get('field1') + ' - ' + record.get('field2')
return value;
}
}])
});


g.on('rowclick', function(grid, rowIndex, e) {
var record = this.getStore().getAt(rowIndex);
var value1 = record.get('field1');
//Do what ever
});

Raksmey
18 Feb 2010, 9:17 AM
var reader = new Ext.data.XmlReader({
record:'data',
idPath:'field_id',
fields:['field1','field2','field3','field4']
});
var field1Renderer = function(value, cell, record, rowIndex, colIndex, store){
cell.css = 'a-matrix-cell';
cell.data = new Object();
cell.data['p1'] = record.get('field3');
cell.data['p2'] = record.get('field4');
return value;
};
var field2Renderer = function(value, cell, record, rowIndex, colIndex, store){
cell.css = 'b-matrix-cell';
cell.data = new Object();
cell.data['p1'] = record.get('field1');
cell.data['p2'] = record.get('field4');
return value;
};
var cm = [
{id:'field_id',header: "id", width: 40, dataIndex: 'field_id'},
{header: "field1", width: 70, dataIndex: 'field1', renderer:field1Renderer},
{header: "field2", width: 20, dataIndex: 'field2', renderer:field2Renderer},
{header: "field4", width: 20, dataIndex: 'field4' ,hidden:true}
];

var gstore = new Ext.data.GroupingStore({
url: 'index.php?format=raw',
reader: reader,
sortInfo:{field: 'field1', direction: "ASC"},
groupField:'field4'
});

var grid = new xg.GridPanel({
store: gstore,
columns: cm,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? " rows" :"row"]})'
}),
listeners: {
cellclick: function(grid, rowIndex, colIndex, e) {
if (colIndex > 0) {
var cell = grid.getView().getCell(rowIndex, colIndex);
var el = Ext.get(cell);
Ext.Msg.alert('Info','data:'+el.data['p1']);
}
},
render: function(grid){
var v = grid.getView();
v.mainBody.on({
mouseover: function(e, t){
if(this.currentCell){
this.currentCell.removeClass('x-grid3-cell-selected');
}
this.currentCell = Ext.get(t);
this.currentCell.addClass('x-grid3-cell-selected');
},
mouseout: function(e, t){
if(this.currentCell){
this.currentCell.removeClass('x-grid3-cell-selected');
}
delete this.currentCell;
},
delegate: v.cellSelector,
scope: v
});
}
},
columnLines : true,
width: 790,
height: 420,
renderTo: 'grid-wrapper',
plugins: group
});

gstore.load();


thanks for your response, but actually I want to achieve like my above code by adding custom property name 'data' to grid cell object and then alert data the value as the cell is click but can't get value back. any suggestion?