PDA

View Full Version : Highlighting a single cell on click of the cell



ellaiah
24 Sep 2008, 8:08 AM
Hi all,

i want to highlight a cell (means background of the cell) when i clicked.here simultaneoulsy 2 cells are highlighting.i just want to highlight one cell at time during on click.could u please help me out.

<style type="text/css">
.red{background-color: red;}
</style>

Ext.onReady(function(){
Ext.QuickTips.init();

var store = new Ext.data.SimpleStore({
fields: ['name', 'value'],
data: [['A', 1], ['B', 2]]
});
var renderer = function(value, metadata, record, rowIndex, colIndex, store) {
if (value == colIndex) {
metadata.css = 'red';
}
return colIndex;
}
var cm = new Ext.grid.ColumnModel([
{header: 'Name', dataIndex: 'name'},
{header: '1', dataIndex: 'value', renderer: renderer},
{header: '2', dataIndex: 'value', renderer: renderer},
{header: '3', dataIndex: 'value', renderer: renderer},
{header: '4', dataIndex: 'value', renderer: renderer},
{header: '5', dataIndex: 'value', renderer: renderer}
]);
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
listeners: {
cellclick: function(grid, rowIndex, colIndex) {
if (colIndex > 0) {
var rec = grid.store.getAt(rowIndex);
rec.set('value', colIndex);
}
}
}
});
grid.render(document.body);
});

devnull
24 Sep 2008, 8:26 AM
Configure the grid with a CellSelectionModel (it defaults to a RowSelectionModel if none is supplied).

ellaiah
24 Sep 2008, 10:48 PM
Hi,

Could u please provide me a small example of how the cell can be highlighted with the required colour on cell click.Please help me out as this is very urgent.

Thanks in advance,
Ellaiah.

Condor
24 Sep 2008, 10:50 PM
Simple, just add a cell selection model to the grid config:

cm: new Ext.grid.CellSelectionModel()

and change the style for a selected cell:

.x-grid3-cell-selected{background-color:red!important}

ellaiah
24 Sep 2008, 11:13 PM
hi,

i added the cellselectionmodel to the grid config also.but it is showing the same result.means two cells highlighting simltaneously.i just want to hightlight a cell on click.

my code is :

Ext.onReady(function(){
Ext.QuickTips.init();
var status = "";
var store = new Ext.data.SimpleStore({
fields: ['name', 'value'],
data: [['A', 1], ['B', 2]]
});
var renderer = function(value, metadata, record, rowIndex, colIndex, store) {
alert("in renderer");
if (value == colIndex) {
metadata.css = 'x-grid3-cell-selected';
}
return value;
}
var cm = new Ext.grid.ColumnModel([
{header: 'Name', dataIndex: 'name'},
{header: '1', dataIndex: 'value', renderer: renderer},
{header: '2', dataIndex: 'value', renderer: renderer},
{header: '3', dataIndex: 'value', renderer: renderer},
{header: '4', dataIndex: 'value', renderer: renderer},
{header: '5', dataIndex: 'value', renderer: renderer}
]);
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
sm: new Ext.grid.CellSelectionModel(),
listeners: {
cellclick: function(grid, rowIndex, colIndex) {
alert("in cell click");
if (colIndex > 0) {
var rec = grid.store.getAt(rowIndex);
rec.set('value', colIndex);
}
}
}
});
grid.render(document.body);
});

ellaiah
24 Sep 2008, 11:14 PM
hi,

i added the cellselectionmodel to the grid config also.but it is showing the same result.means two cells highlighting simltaneously.i just want to hightlight a cell on click.

my code is :


Ext.onReady(function(){
Ext.QuickTips.init();
var status = "";
var store = new Ext.data.SimpleStore({
fields: ['name', 'value'],
data: [['A', 1], ['B', 2]]
});
var renderer = function(value, metadata, record, rowIndex, colIndex, store) {
alert("in renderer");
if (value == colIndex) {
metadata.css = 'x-grid3-cell-selected';
}
return value;
}
var cm = new Ext.grid.ColumnModel([
{header: 'Name', dataIndex: 'name'},
{header: '1', dataIndex: 'value', renderer: renderer},
{header: '2', dataIndex: 'value', renderer: renderer},
{header: '3', dataIndex: 'value', renderer: renderer},
{header: '4', dataIndex: 'value', renderer: renderer},
{header: '5', dataIndex: 'value', renderer: renderer}
]);
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
sm: new Ext.grid.CellSelectionModel(),
listeners: {
cellclick: function(grid, rowIndex, colIndex) {
alert("in cell click");
if (colIndex > 0) {
var rec = grid.store.getAt(rowIndex);
rec.set('value', colIndex);
}
}
}
});
grid.render(document.body);
});

Thanks,
ellaiah

Condor
24 Sep 2008, 11:26 PM
Oh... You are looking for my RadioColumn (http://www.extjs.com/forum/showthread.php?t=28070) extension!

ellaiah
25 Sep 2008, 1:29 AM
Hii

its not for a radiobutton model.its a normal grid .in that i want to highlet a cell on click.but the code above is highlighting 2 cells simultaneously.could you please resovle it.

Thans,
Ellaiah

ellaiah
25 Sep 2008, 1:43 AM
Hi,

I am using the following code on cell click

grid.on("cellclick", function(grid, row, column, e) {
var colIndx = grid.getColumnModel().getDataIndex(column);
Ext.get(e.target).setStyle('background-color', 'yellow');

});

It is working but , it persists the previously selected cell as well.My requirement is that on click only that particular cell needs to be highlighted on cell click.This is very urgent.Please help me out ASAP.

Thanks in advance,
Ellaiah.

Condor
25 Sep 2008, 2:01 AM
Why not use:

var store = new Ext.data.SimpleStore({
fields: ['name', 'value'],
data: [['A', 1], ['B', 2]]
});
var renderer = function(value, metadata, record, rowIndex, colIndex, store) {
return colIndex;
}
var cm = new Ext.grid.ColumnModel([
{header: 'Name', dataIndex: 'name'},
{header: '1', dataIndex: 'value', renderer: renderer},
{header: '2', dataIndex: 'value', renderer: renderer},
{header: '3', dataIndex: 'value', renderer: renderer},
{header: '4', dataIndex: 'value', renderer: renderer},
{header: '5', dataIndex: 'value', renderer: renderer}
]);
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
sm: new Ext.grid.CellSelectionModel({
listeners: {
beforecellselect: function(sm, row, col) {
return col > 0;
}
}
}),
autoHeight: true,
deferRowRender: false
});
grid.render(document.body);
grid.getSelectionModel().select(0, 1);

with:

<style type="text/css">
.x-grid3-cell-selected{background-color: red!important;}
</style>