/** * @class Ext.grid.Grid * @extend Ext.dataview.List * @xtype grid * * Grids are an excellent way of showing large amounts of tabular data on the client side. * Essentially a supercharged `<table>`, Grid makes it easy to fetch, sort and filter large * amounts of data. * * Grids are composed of two main pieces - a {@link Ext.data.Store Store} full of data and * a set of columns to render. * * ## A Basic Grid * * @example packages=[reactor] * import React, { Component } from 'react' * import { ExtReact, Grid, Column } from '@sencha/ext-react'; * * export default class MyExample extends Component { * * store = new Ext.data.Store({ * data: [ * { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" }, * { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" }, * { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" }, * { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" } * ] * }); * * render() { * return ( * <ExtReact> * <Grid store={this.store}> * <Column text="Name" dataIndex="name" flex="1"/> * <Column text="Email" dataIndex="email" flex="1"/> * <Column text="Phone" dataIndex="phone" flex="1"/> * </Grid> * </ExtReact> * ) * } * } * * The code above produces a simple grid with three columns. We specified a Store which will * load JSON data inline. * * ## Columns * * By default, each {@link Ext.grid.column.Column column} is sortable and toggles between * ascending and descending sorting when you click on its header. There are several basic * configs that can be applied to columns to change these behaviors. For example, * we can make the Email column hidden by default (it can be shown again by using the * {@link Ext.grid.plugin.ViewOptions ViewOptions} plugin). See the * {@link Ext.grid.column.Column column class} for more details. * * A top-level column definition may contain a `columns` configuration. This means that the * resulting header will be a group header, and will contain the child columns. * * @example packages=[reactor] * import React, { Component } from 'react' * import { ExtReact, Grid, Column } from '@sencha/ext-react'; * * export default class MyExample extends Component { * * store = new Ext.data.Store({ * data: [ * { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" }, * { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" }, * { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" }, * { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" } * ] * }); * * render() { * return ( * <ExtReact> * <Grid store={this.store}> * <Column text="Name" dataIndex="name" flex="1"/> * <Column text="Email" dataIndex="email" flex="1" hidden="true"/> * <Column text="Phone" dataIndex="phone" flex="1"/> * </Grid> * </ExtReact> * ) * } * } * * ## Rows and Cells * * Grid extends the `{@link Ext.dataview.List List}` component and connects records in the * store to `{@link Ext.grid.Row row components}` for the list's items. The Row component * utilizes the configs of the grid's {@link Ext.grid.column.Column columns} to create the * appropriate type of {@link Ext.grid.cell.Base cells}. Essentially, a Row is a container * for {@link Ext.Widget Cell widgets}. * * For the most part, configuring a grid is about configuring the columns and their cells. * There are several built-in column types to display specific types of data: * * - {@link Ext.grid.column.Boolean} for true/false values. * - {@link Ext.grid.column.Date} for date/time values. * - {@link Ext.grid.column.Number} for numeric values. * * These columns specify (via their {@link Ext.grid.column.Column#cell cell config}) one * of these basic cell widget types: * * - {@link Ext.grid.cell.Boolean} * - {@link Ext.grid.cell.Date} * - {@link Ext.grid.cell.Number} * * In addition to the above basic cell types, there are two other useful cell types to * know about: * * - {@link Ext.grid.cell.Text} is the base class for the boolean, date and number cell * classes. It is useful when a cell contains only text. * - {@link Ext.grid.cell.Widget} is a cell class that manages a single child item (either * a {@link Ext.Component component} or a {@link Ext.Widget widget}). The child item is * configured using the `{@link Ext.grid.cell.Widget#widget widget config}`. The most * important part of this config is the `xtype` of the child item to create. * * ## Renderers and Templates * * Columns provide two other mechanisms to format their cell content: * * - {@link Ext.grid.column.Column#renderer} * - {@link Ext.grid.column.Column#tpl} * * These column configs are processed by the {@link Ext.grid.column.Cell default cell type} * for a column. These configs have some downsides compared to data binding but are provided * for compatibility with previous releases. * * - Renderers and templates must update the cell content when _any_ field changes. They * cannot assume that only changes to the dataIndex will affect the rendering. Using * data binding, only the configs affected by the changed data will be updated. * - Constructing HTML blocks in code (even in a template) is a common cause of security * problems such as XSS attacks. * * ## Sorting & Filtering * * Every grid is attached to a {@link Ext.data.Store Store}, which provides multi-sort and * filtering capabilities. It's easy to set up a grid to be sorted from the start: * * store: { * fields: ['name', 'email', 'phone'], * sorters: ['name', 'phone'] * }, * * Sorting at run time is easily accomplished by simply clicking each column header. If you * need to perform sorting on more than one field at run time it's easy to do so by adding * new sorters to the store: * * myGrid.store.sort([ * { property: 'name', direction: 'ASC' }, * { property: 'email', direction: 'DESC' } * ]); * * See {@link Ext.data.Store} for examples of filtering. * * ## Plugins * * Grid supports addition of extra functionality through plugins: * * - {@link Ext.grid.plugin.ViewOptions ViewOptions} - adds the ability to show/hide * columns and reorder them. * * - {@link Ext.grid.plugin.ColumnResizing ColumnResizing} - allows for the ability to * resize columns. * * - {@link Ext.grid.plugin.Editable Editable} - editing grid contents one row at a time. * * - {@link Ext.grid.plugin.MultiSelection MultiSelection} - selecting and deleting several * rows at a time. * * - {@link Ext.grid.plugin.PagingToolbar PagingToolbar} - adds a toolbar at the bottom of * the grid that allows you to quickly navigate to another page of data. * * - {@link Ext.grid.plugin.SummaryRow SummaryRow} - adds and pins an additional row to the * top of the grid that enables you to display summary data. */ /** * @cfg {Object} [selectable] * A configuration object which allows passing of configuration options to create or * reconfigure a {@link Ext.dataview.selection.Model selection model}. * * May contain the following options: * * - mode `'single'`, `'multi'` Allow selection of only a single or multiple *records*. * This is only valid when selecting {@link #cfg!rows}. * - deselectable Configure as false to disallow deselecting down to zero selected *records*. * This is only valid when selecting {@link #cfg!rows}. * - drag `true` or `false` to allow drag gestures to swipt a rage of cells or rows. * - columns `true` to enable column selection by clicking on headers. Defaults to `false` * - cells `true` to enable cell selection by clicking or dragging on cells. Defaults to `false` * - rows Set to `false` to disable selecting rows. Defaults to `true` * - checkbox `true` to add a checkbox column to display selected state. `'only'` to indicate * that only clicks on the checkbox affect row selected state. * - extensible `true` to enable the selection to be extended either in the `X` or `Y` axis * or `'x'` or `'y'` to configure */ /** * @cfg {Boolean} [reserveScrollbar=false] * *only meaningful on platforms which has space-consuming scroll bars* * * Configure as `true` to leave space for a scrollbar to appear even if the content does not * overflow. * * This is useful for trees which may expand and collapse causing visual flickering * when scrollbars appear of disappear. */ /** * @cfg {Boolean} [infinite=true] * This List configuration should always be set to true on a Grid. * @hide */ /** * @cfg {Ext.grid.column.Column} [columns=null] * One or more {@link Ext.grid.column.Column Columns} providing the header text for the * column, a column menu, optional column header tools, and a definition of where the * data for that column comes from. * * Example snippet: * * <Grid title="Stock Prices" store={this.store} shadow grouped> * <Column text="Company" dataIndex="name" width="150"/> * <Column text="Price" width="85" dataIndex="price" formatter='usMoney'/> * <Column text="Change" width="100" dataIndex="priceChange" tpl={this.signTpl.bind(this, 'priceChange', '0.00')} cell={{ encodeHtml: false }}/> * <Column text="% Change" dataIndex="priceChangePct" tpl={this.signTpl.bind(this, 'priceChangePct', '0.00%')} cell={{ encodeHtml: false }}/> * <Column text="Last Updated" width="125" dataIndex="lastChange" formatter='date("m/d/Y")'/> * </Grid> * * NOTE: The Column component or any column sub-component may be used. i.e.: * {@link Ext.grid.column.Column GridColumn} * * {@link Ext.grid.column.Boolean BooleanColumn} * * {@link Ext.grid.column.Check CheckColumn} * * {@link Ext.grid.column.Date DateColumn} * * {@link Ext.grid.column.Number NumberColumn} * * {@link Ext.grid.column.RowNumberer RowNumberer} * * {@link Ext.grid.column.Text} * * {@link Ext.grid.column.Tree TreeColumn} * * @accessor * @react-child */ /** * @cfg {Object} [columnMenu] * This is a config object which is used by columns in this grid to create their * header menus. * * The default column menu contains the following items. * * - A "Sort Ascending" menu item * - A "Sort Descending" menu item * - A Columns menu item with each of the columns in a sub-menu of check items * that is used to hide or show each column. * - A "Group by this field" menu item to enable grouping. * - A "Show in groups" check menu item to enable/disable grouping. * * These items have {@link #cfg!weight} of `-100`, `-90` and `-80` respectively to * place them at the start of the menu. * * This can be configured as `null` to prevent columns from showing a column menu. * @accessor */ /** * @cfg {Boolean} [hideHeaders=false] * `true` to hide the grid column headers. * * @accessor * @since 6.0.1 */ /** * @cfg {Boolean} [striped=true] * @inheritdoc * @accessor */ /** * @cfg {String} [title=''] * The title that will be displayed in the TitleBar at the top of this Grid. * @accessor */ /** * @cfg {Boolean} [sortable=true] * Configure as `false` to disable column sorting via clicking the header and via * the Sorting menu items. * @accessor */ /** * @cfg {Boolean} [multiColumnSort=false] * Configure as `true` to have columns remember their sorted state after other * columns have been clicked upon to sort. * * As subsequent columns are clicked upon, they become the new primary sort key. * * The maximum number of sorters allowed in a Store is configurable via its * underlying data collection. See {@link Ext.util.Collection#multiSortLimit} * @accessor */ /** * @cfg {Boolean} [columnLines=null] * Configure as `true` to display lines between grid cells. * @accessor */ /** * @cfg {Object[]} [data=null] * An array of records to display. Use in place of {@link #store} when fetching data directly * or using static data rather than fetching data with an ExtReact proxy. * * <Grid * data={[ * { name: 'Apple', symbol: 'AAPL' }, * { name: 'Microsoft', symbol: 'MSFT' }, * { name: 'Oracle', symbol: 'ORCL' } * ]} * > * <Column text="Name" dataIndex="name"/> * <Column text="Symbol" dataIndex="symbol"/> * </Grid> */ /** * @event columnadd * Fires whenever a column is added to the Grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The added column. * @param {Number} index The index of the added column. */ /** * @event columnmove * Fires whenever a column is moved in the grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The moved column. * @param {Number} fromIndex The index the column was moved from. * @param {Number} toIndex The index the column was moved to. */ /** * @event columnremove * Fires whenever a column is removed from the Grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The removed column. */ /** * @event columnshow * Fires whenever a column is shown in the Grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The shown column. */ /** * @event columnhide * Fires whenever a column is hidden in the Grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The shown column. */ /** * @event columnresize * Fires whenever a column is resized in the Grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The resized column. * @param {Number} width The new column width. */ /** * @event columnsort * Fires whenever a column is sorted in the Grid. * @param {Ext.grid.Grid} this The Grid instance. * @param {Ext.grid.column.Column} column The sorted column. * @param {String} direction The direction of the sort on this Column. Either 'asc' or 'desc'. */