From Sencha - Learn

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.

This page was last modified on 6 August 2007, at 07:16. This page has been accessed 11,281 times.