Add a row context menu var ctxMenu = new Ext.menu.Menu({ items: [ {text: 'Item1'}, {text: 'Item2'} ] }); grid.on('rowcontextmenu', function(grid, rowIndex, event){ ctxMenu.showAt(event.getXY()); event.preventDefault(): // To not display the browser context menu });
If you want the record associated with the row, add this to the event handler:
var record = grid.getDataSource().getAt(rowIndex);
If you want the row element:
var rowEl = grid.getView().getRow(rowIndex):
Change the background color of a cell Set a renderer on your column like this :
function(value, cell) { if (value == 'red') { cell.css = 'red'; } return value; }
The CSS :
.red { background-color: red; }
Tips for improving grid performance in Ext 1.0.1 and Ext 1.1 1. Reduce the number of rows being rendered by using pagination. I max out around 25-50 rows per page.
2. Reduce the number of columns available to the grid. This includes hidden columns. I try to stay less than 10 columns. 15 tops.
3. Set autoSizeColumns to false and set your column widths manually.