This class represents the primary interface of a component based grid control. The grid requires a
ListStore and
ColumnModel when constructed. Each model in the store will be rendered as a row in the grid. Any updates to the store are automatically pushed to the grid. This includes inserting, removing, sorting and filter.
Grid support several ways to manage column widths.
- The most basic approach is to simply give pixel widths to each column. Columns widths will match the specified values.
- A column can be set to "fill" all available space. As the width of the grid changes, or columns are resized, the "filling" column's width is adjusted so that the column's fill the available width with no horizontal scrolling. See @link {@link Grid#setAutoExpandColumn(String)}.
- Grid can resize columns based on a "weight". As the width of the grid, or columns change, the "weight" is used to allocate the extra space, or the space needed to be reduced. Use {@link GridView#setAutoFill(boolean)} toenable this feature. With auto fill, the calculations are only run once. After the grid is rendered, the columns widths will not be adjusted when available width changes. You can use @link {@link GridView#setForceFit(boolean)} to always run the width calculations onany changes to available width or column sizes. Columns can be "fixed" which prevents their columns widths to be adjusted by the grid "weight" calculations. See @link {@link ColumnConfig#setFixed(boolean)}.
When state is enabled (default is false), Grid will save and restore the column width, column hidden state, sort direction, and sort field. To enable state, see {@link #setStateful(boolean)}. When the store uses a
PagingListLoader the offset and limit parameter are saved with the Grid's state. These 2 values can be retrieved and used to make the first load request to return the user to the same location they left the grid. Code snippet:
PagingLoadConfig config = new BasePagingLoadConfig(); config.setOffset(0); config.setLimit(50); Map state = grid.getState(); if (state.containsKey("offset")) { int offset = (Integer)state.get("offset"); int limit = (Integer)state.get("limit"); config.setOffset(offset); config.setLimit(limit); } if (state.containsKey("sortField")) { config.setSortField((String)state.get("sortField")); config.setSortDir(SortDir.valueOf((String)state.get("sortDir"))); } loader.load(config);
- Events:
- CellClick : GridEvent(grid, rowIndex, cellIndex, event)
Fires after a cell is clicked.
- grid : this
- rowIndex : row index
- cellIndex : cell index
- event : the dom event
- CellDoubleClick : GridEvent(grid, rowIndex, cellIndex, event)
Fires after a cell is double clicked.
- grid : this
- rowIndex : row index
- cellIndex : cell index
- event : the dom event
- CellMouseDown : GridEvent(grid, rowIndex, cellIndex, event)
Fires before a cell is clicked.
- grid : this
- rowIndex : row index
- cellIndex : cell index
- event : the dom event
- RowClick : GridEvent(grid, rowIndex, cellIndex, event)
Fires after a row is clicked.
- grid : this
- rowIndex : the row index
- cellIndex : cell index
- index : the cell index
- event : the dom event
- RowDoubleClick : GridEvent(grid, rowIndex, cellIndex, event)
Fires after a row is double clicked.
- grid : this
- rowIndex : the row index
- index : the cell index
- event : the dom event
- RowMouseDown : GridEvent(grid, rowIndex, colIndex, event)
Fires before a row is clicked.
- grid : this
- rowIndex : row index
- colIndex : column index
- event : the dom event
- HeaderClick : GridEvent(grid, rowIndex, colIndex, event)
Fires a header is clicked.
- grid : this
- rowIndex : row index
- colIndex : column index
- event : the dom event
- HeaderDoubleClick : GridEvent(grid, rowIndex, colIndex, event)
Fires a header is double clicked.
- grid : this
- rowIndex : row index
- colIndex : column index
- event : the dom event
- HeaderMouseDown : GridEvent(grid, rowIndex, colIndex, event)
Fires before a header is clicked.
- grid : this
- rowIndex : row index
- colIndex : column index
- event : the dom event
- ContextMenu : GridEvent(grid)
Fires before the grid's context menu is shown. Listeners can cancel the action by calling {@link BaseEvent#setCancelled(boolean)}.
- HeaderContextMenu : GridEvent(grid, colIndex, menu)
Fires right before the header's context menu is displayed. Listeners can cancel the action by calling {@link BaseEvent#setCancelled(boolean)}.
- grid : this
- colIndex : the column index
- menu : the context menu
- BodyScroll : GridEvent(grid, srollLeft, scrollTop)
Fires when the body element is scrolled.
- grid : this
- scrollLeft : scrollLeft
- scrollTop : scrollTop
- ColumnResize : GridEvent(grid, colIndex, width)
Fires when the user resizes a column.
- grid : this
- colIndex : the column index
- width : the new column width
- ColumnMove : GridEvent(grid, colIndex, size)
Fires when the user moves a column.
- grid : this
- oldIndex : the old column index
- newIndex : the new column index
- SortChange : GridEvent(grid, sortInfo)
Fires when the grid's store sort changes.
- grid : this
- sortInfo : the sort field and direction
- ViewReady : GridEvent(grid)
Fires when the grid's view is ready.
- Reconfigure : GridEvent(grid)
Fires when the grid gets reconfigured.
- Inherited Events:
- BoxComponent Move
- BoxComponent Resize
- Component Enable
- Component Disable
- Component BeforeHide
- Component Hide
- Component BeforeShow
- Component Show
- Component Attach
- Component Detach
- Component BeforeRender
- Component Render
- Component BrowserEvent
- Component BeforeStateRestore
- Component StateRestore
- Component BeforeStateSave
- Component SaveState
@param < M> the model type