Ext JS - Learning Center

Manual:Widgets:Grids:GridView

From Learn About the Ext JavaScript Library

Jump to: navigation, search

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 07:16, 6 August 2007.
  • This page has been accessed 3,795 times.