What dynamic states here ?
If you like to change the color on loadin time, use
renderer
on the column mapping.<style type="text/css"> .red{background-color: red;} </style> <script type="text/javascript"> 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); }); </script>
If you like to change the color on latet point based on any condition use
addRowCls
of table view class.listeners : { select : function(cellModel, record, rowIndex) { var myGrid = this.items.get('gridItemId'); myGrid.getView().addRowCls(rowIndex, 'row-style'); },
apply in
root config
itself, refer below link for example.
http://www.sencha.com/forum/showthread.php?120001-Help-with-dynamic-row-color-in-grid
Thanks