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
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
GridView#setAutoFill(boolean) to
enable 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
GridView#setForceFit(boolean) to always run the width calculations on
any 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
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
#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
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
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