Buenas, es primer post y necesito ayuda con una grilla en ExtJs 3.3. Busqué info en varios foros y en el faq de ext y no encontré la solución a mi problema.

Primero pongo el código de la grilla en cuestión:


var myData = [
['Func 1', '2', '3', '1', '5', 0],
['Func 2', '2', '3', '2', '5', 0],
['Func 3', '2', '3', '3', '5', 0],
['Func 4', '2', '3', '4', '5', 0],
['Func 5', '2', '3', '5', '5', 0],
['Func 6', '2', '3', '6', '5', 0]
];

var store = new Ext.data.ArrayStore({
fields: [
{name: 'cajero'},
{name: 'hora2'},
{name: 'hora3'},
{name: 'hora4'},
{name: 'hora5'},
{name: 'horas', type: 'int'}
]
});

function myRenderer(val) {
return '<span style="font-weight:bold;">' + val + '</span>';
}

store.loadData(myData);

var grid = new Ext.grid.GridPanel({
store: store,
sm: new Ext.grid.CellSelectionModel({singleSelect:true}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
id : 'cajero',
header : 'Cajera',
width : 50,
sortable : false,
dataIndex: 'cajero',
renderer: myRenderer
},
{
id : 'hora2',
header : '06:30',
width : 50,
sortable : false,
dataIndex: 'hora2'
},
{
id : 'hora3',
header : '07:00',
width : 50,
sortable : false,
dataIndex: 'hora3'
},
{
id : 'hora4',
header : '07:30',
width : 50,
sortable : false,
dataIndex: 'hora4'
},
{
id : 'hora5',
header : '08:00',
width : 50,
sortable : false,
dataIndex: 'hora5'
},
{
id : 'horas',
header : 'Horas',
width : 50,
sortable : false,
dataIndex: 'horas'
}
]),
stripeRows: false,
autoExpandColumn: 'cajero',
height: 350,
width: 600,
title: 'Recursos',
// config options for stateful behavior
stateful: false,
id: 'grid',
stateId: 'grid',
listeners: {
//Manejo el click de una celda
cellclick: function(grid, rowIndex, columnIndex, e) {
cont = 0;
var record = grid.getStore().getAt(rowIndex);
var selCell = grid.getSelectionModel().getSelectedCell();
var fieldName = grid.getColumnModel().getDataIndex(selCell[1]);
var cantCols = grid.getColumnModel().getColumnCount();
var cellValue = parseInt(record.get(fieldName));
var cellActual = Ext.get(grid.getView().getCell(rowIndex, columnIndex));

if (columnIndex == 1 || columnIndex == 6) {
return false;
}

cellActual.toggleClass('error');
cont = 0;

for (var i = 1; i < cantCols; i++) {
if (Ext.get(grid.getView().getCell(rowIndex, i)).hasClass('error')) {
cont++;
}
}
//record.set('horas', cont);
record.data['horas'] = cont;
record.commit();

}
}
});
grid.render('grilla');


El problema lo tengo cuando hago el record.commit() o el record.set('horas', cont). Mi idea es cuando hago click en una celda pintarla de un color y a su vez sumar en uno el valor de la columna a 'horas' para esa fila. Si comento el record.set y record.commit me pinta bien las filas. Cuando agrego el record.set o record.commit no me pinta bien las filas y no me actualiza bien el valor de la columna 'horas'.
No se si se entiende.
También agradecería si alguien con mas experiencia en ext encuentra una forma mejor de resolver el problema.

Gracias por adelantado.

Saludos.