/** * @class Ext.grid.column.Column * @extend Ext.grid.HeaderContainer * @xtype gridcolumn * @xtype column * @xtype templatecolumn * * This class specifies the definition for a column inside a {@link Ext.grid.Grid}. It * encompasses both the grid header configuration as well as displaying data within the * grid itself. * * In general an array of column configurations will be passed to the grid. * * # Convenience Subclasses * * There are several column subclasses that provide default rendering for various data types * * - {@link Ext.grid.column.Boolean}: Renders for boolean values * - {@link Ext.grid.column.Date}: Renders for date values * - {@link Ext.grid.column.Number}: Renders for numeric values * * For more information about configuring cell content, see {@link Ext.grid.Grid}. * * # Setting Sizes * * The columns can be only be given an explicit width value. If no width is specified the * grid will automatically the size the column to 20px. * * # Header Options * * - {@link #text}: Sets the header text for the column * - {@link #sortable}: Specifies whether the column can be sorted by clicking the header * or using the column menu * * # Data Options * * - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} * to use as the value for the column. * - {@link #renderer}: Allows the underlying store value to be transformed before being * displayed in the grid. */ /** * @property {Boolean} [isGridColumn=true] * Set in this class to identify, at runtime, instances which are not instances of the * HeaderContainer base class, but are in fact, the subclass: Ext.grid.Column. */ /** * @property {Boolean} isLeafHeader * This will be set to `true` if the column has no child columns. */ /** * @property {Boolean} isHeaderGroup * This will be set to `true` if the column has child columns. */ /** * @cfg {left/center/right} [align='null'] * Sets the alignment of the header and rendered columns. * Possible values are: `'left'`, `'center'`, and `'right'`. * @accessor */ /** * @cfg {Ext.grid.cell.Base} cell * The {@link Ext.grid.cell.Base cell} to use on this column. By default, columns use * {@link Ext.grid.cell.Cell GridCell} * * Example snippet: * * <Column text="Trend" width="200"> * <NumberCell forceWidth bind="{record.grade}"/> * </Column> * * NOTE: Any subclass of {@link Ext.grid.cell.Base} may be used. i.e.: * {@link Ext.grid.cell.Boolean BooleanCell} * * {@link Ext.grid.cell.Expander ExpanderCell} * * {@link Ext.grid.cell.Cell GridCell} * * {@link Ext.grid.cell.Number NumberCell} * * {@link Ext.grid.cell.RowNumberer RowNumbererCell} * * {@link Ext.grid.cell.Text TextCell} * * {@link Ext.grid.cell.Widget WidgetCell} * * @accessor * @react-child */ /** * @cfg {String} [dataIndex=null] (required) * The name of the field in the grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from * which to draw the column's value. **Required.** * @accessor */ /** * @cfg {Number} [defaultWidth=100] * A width to apply if the {@link #flex} or {@link #width} configurations have not * been specified. * * @accessor * @since 6.2.0 */ /** * @cfg {String} [text='\xa0'] * The header text to be used as innerHTML (html tags are accepted) to display in the Grid. * **Note**: to have a clickable header with no text displayed you can use the default of ` ` aka ` `. * @accessor */ /** * @cfg {Boolean} [sortable=true] * False to disable sorting of this column. Whether local/remote sorting is used is specified in * `{@link Ext.data.Store#remoteSort}`. * @accessor */ /** * @cfg {Boolean} [groupable=true] * If the grid is {@link Ext.grid.Grid#grouped grouped}, and uses a * {@link Ext.grid.plugin.ViewOptions ViewOptions} plugin this option may be used to * disable the option to group by this column. By default, the group option is enabled. * @accessor */ /** * @cfg {Boolean} [resizable=true] * False to prevent the column from being resizable. * Note that this configuration only works when the {@link Ext.grid.plugin.ColumnResizing ColumnResizing} plugin * is enabled on the {@link Ext.grid.Grid Grid}. * @accessor */ /** * @cfg {Function/String} [renderer=null] * A renderer is a function which is used to transform data (value, appearance, etc.) * before it is rendered. * * For example: * * <Grid> * <Column * text="Full Name" * renderer={(value, record) => ( * <div>{record.get('firstName')} {record.get('lastName')}</div> * )} * /> * </Grid> * * A renderer may return any React element or component. Here is an example that embeds a button in a grid cell: * * <Grid> * <Column * text="Actions" * dataIndex="name" * renderer={(value, record) => ( * <Button text={`Call ${value}`} handler={this.onCallClick.bind(this, record)}/> * )} * /> * </Grid> * * When the renderer prop is specified, a {@link Ext.reactor.RendererCell RendererCell} is used. Be sure to import * RendererCell so that it is included in your application's JavaScript bundle: * * import { RendererCell } from '@extjs/ext-react'; * * @cfg {Object} renderer.value The data value for the current cell. * @cfg {Ext.data.Model} renderer.record The record for the current row. * @cfg {Number} renderer.dataIndex The dataIndex of the current column. * @cfg {Ext.grid.cell.Base} renderer.cell The current cell. * @cfg {Ext.grid.column.Column} renderer.column The current column. * @cfg {String} renderer.return The HTML string to be rendered. *Note*: to * render HTML into the cell, you will have to configure the column's {@link #cell} * with `encodeHtml: false` * @accessor */ /** * @cfg {String} [formatter=null] * This config accepts a format specification as would be used in a `Ext.Template` * formatted token. For example `'round(2)'` to round numbers to 2 decimal places * or `'date("Y-m-d")'` to format a Date. * * In previous releases the `renderer` config had limited abilities to use one * of the `Ext.util.Format` methods but `formatter` now replaces that usage and * can also handle formatting parameters. * * When the value begins with `"this."` (for example, `"this.foo(2)"`), the * implied scope on which "foo" is found is the `scope` config for the column. * * @accessor * @since 6.2.0 */ /** * @cfg {Object} [scope=null] * The scope to use when calling the {@link #renderer} or {@link #formatter} function. * @accessor */ /** * @cfg {Boolean} [editable=null] * Set this to true to make this column editable. * Only applicable if the grid is using an {@link Ext.grid.plugin.Editable Editable} plugin. * @accessor */ /** * @cfg {Ext.field.Field} [editor=null] * Any {@link Ext.field.Field Form Field} to be used as the editor for cells on this * column. Only applicable if the grid is using an * {@link Ext.grid.plugin.Editable editable} plugin. Note also that {@link #editable} * has to be set to true if you want to make this column editable. If this configuration * is not set, and {@link #editable} is set to true, the {@link #defaultEditor} is used. * * Example snippet: * * <Column * text="Price" * width="120" * dataIndex="price" * formatter="usMoney" * editable * > * <NumberField required validators={{type:"number", message:"Invalid price"}}/> * </Column> * * NOTE: Any subclass of {@link Ext.field.Field} may be used. i.e.: * {@link Ext.field.Checkbox CheckboxField} * * {@link Ext.field.ComboBox ComboBoxField} * * {@link Ext.field.Container ContainerField} * * {@link Ext.field.Date DatePickerField} * * {@link Ext.field.Email EmailField} * * {@link Ext.field.File FileField} * * {@link Ext.field.Number NumberField} * * {@link Ext.field.Picker PickerField} * * {@link Ext.field.Search SearchField} * * {@link Ext.field.Select SelectField} * * {@link Ext.field.Slider SliderField} * * {@link Ext.field.Spinner SpinnerField} * * {@link Ext.field.TextArea TextArea} * * {@link Ext.field.Toggle ToggleField} * * {@link Ext.field.URL URLField} * * @accessor * @react-child */ /** * @cfg {Object/Ext.field.Field} [defaultEditor==null] * An optional config object that should not really be modified. This is used to create * a default editor used by the {@link Ext.grid.plugin.Editable Editable} plugin when no * {@link #editor} is specified. * @accessor */ /** * @cfg {Boolean} [ignore=false] * This configuration should be left alone in most cases. This is used to prevent certain columns * (like the MultiSelection plugin column) to show up in plugins (like the {@link Ext.grid.plugin.ViewOptions} plugin). * @accessor */ /** * @cfg {Boolean} [ignoreExport=false] * This flag indicates that this column will be ignored when grid data is exported. * * When grid data is exported you may want to export only some columns that are important * and not everything. You can set this flag on any column that you want to be ignored during export. * * This is used by {@link Ext.grid.plugin.Exporter exporter plugin}. * @accessor */ /** * @cfg {Ext.exporter.file.Style/Ext.exporter.file.Style[]} [exportStyle=null] * * A style definition that is used during data export via the {@link Ext.grid.plugin.Exporter exporter plugin}. * This style will be applied to the columns generated in the exported file. * * You could define it as a single object that will be used by all exporters: * * { * xtype: 'numbercolumn', * dataIndex: 'price', * exportStyle: { * format: 'Currency', * alignment: { * horizontal: 'Right' * }, * font: { * italic: true * } * } * } * * You could also define it as an array of objects, each object having a `type` that specifies by * which exporter will be used: * * { * xtype: 'numbercolumn', * dataIndex: 'price', * exportStyle: [{ * type: 'html', // used by the `html` exporter * format: 'Currency', * alignment: { * horizontal: 'Right' * }, * font: { * italic: true * } * },{ * type: 'csv', // used by the `csv` exporter * format: 'General' * }] * } * * Or you can define it as an array of objects that has: * * - one object with no `type` key that is considered the style to use by all exporters * - objects with the `type` key defined that are exceptions of the above rule * * { * xtype: 'numbercolumn', * dataIndex: 'price', * exportStyle: [{ * // no type defined means this is the default * format: 'Currency', * alignment: { * horizontal: 'Right' * }, * font: { * italic: true * } * },{ * type: 'csv', // only the CSV exporter has a special style * format: 'General' * }] * } * * @accessor */ /** * @cfg {Boolean/Function/String} [exportRenderer=false] * * During data export via the {@link Ext.grid.plugin.Exporter} plugin the data for * this column could be formatted in multiple ways: * * - using the `exportStyle.format` * - using the `formatter` if no `exportStyle` is defined * - using the `exportRenderer` * * If you want to use the `renderer` defined on this column then set `exportRenderer` * to `true`. Beware that this should only happen if the `renderer` deals only with * data on the record or value and it does NOT style the cell or returns an html * string. * * <NumberColumn * dataIndex="price" * text="Price" * renderer={value => Ext.util.Format.currency(value)} * exportRenderer * /> * * If you don't want to use the `renderer` during export but you still want to format * the value in a special way then you can provide a function to `exportRenderer` * The provided function has the same signature as the renderer prop. * * <NumberColumn * dataIndex="price" * text="Price" * exportRenderer={value => Ext.util.Format.currency(value)} * /> * * If `exportStyle.format`, `formatter` and `exportRenderer` are all defined on the * column then the `exportStyle` wins and will be used to format the data for this * column. * @accessor */ /** * @cfg {Object} [summaryCell=null] * The config object used to create {@link Ext.grid.cell.Base cells} in * {@link Ext.grid.plugin.Summary Summary Rows} for this column. * @accessor */ /** * @cfg {String/Function} summaryType * This configuration specifies the type of summary. There are several built in * summary types. These call underlying methods on the store: * * - {@link Ext.data.Store#count count} * - {@link Ext.data.Store#sum sum} * - {@link Ext.data.Store#min min} * - {@link Ext.data.Store#max max} * - {@link Ext.data.Store#average average} * * Any other name is assumed to be the name of a method on the associated * {@link Ext.app.ViewController view controller}. * * Note that this configuration only works when the grid has the * {@link Ext.grid.plugin.SummaryRow SummaryRow} plugin enabled. * @accessor */ /** * @cfg {String/Function} [summaryRenderer=null] * This summaryRenderer is called before displaying a value in the SummaryRow. The * function is optional, if not specified the default calculated value is shown. The * summaryRenderer is called with: * * - value {Object} - The calculated value. * * Note that this configuration only works when the grid has the * {@link Ext.grid.plugin.SummaryRow SummaryRow} plugin enabled. * @accessor */ /** * @cfg {String} [summaryFormatter=null] * This summaryFormatter is similar to {@link #formatter} but is called before * displaying a value in the SummaryRow. The config is optional, if not specified * the default calculated value is shown. The summaryFormatter is called with: * * - value {Object} - The calculated value. * * Note that this configuration only works when the grid has the * {@link Ext.grid.plugin.SummaryRow SummaryRow} plugin enabled. * @accessor */ /** * @cfg {Boolean/Function/String} [exportSummaryRenderer=false] * * This config is similar to {@link #exportRenderer} but is applied to summary records. *@accessor */ /** * @cfg {String/String[]/Ext.XTemplate} [tpl=null] * An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use * to process a {@link Ext.data.Model records} data to produce a cell's rendered * value. * * This config is only processed if the {@link #cell} type is the default of * {@link Ext.grid.cell.Cell gridcell}. * * **Note** See {@link Ext.grid.Grid} documentation for other, better alternatives * to rendering cell content. * @accessor */ /** * @cfg {Function/String/Object/Ext.util.Grouper} grouper * A grouper config object to apply when the standard grouping user interface is * is invoked. This option is, for example, available in the column's header * menu. * * Note that a grouper may also be specified as a function which accepts two * records to compare. * * A `{@link Ext.app.ViewController controller}` method can be used like so: * * grouper: 'groupMethodName' * * This is different then a `sorter` in that the `grouper` method is used to * set the {@link Ext.util.Grouper#cfg!groupFn groupFn}. This string returned * by this method is used to determine group membership. To specify both the * `grpoupFn` and the `sorterFn`: * * grouper: { * groupFn: 'groupMethodName' * sorterFn: 'sorterMethodName * } * * @accessor * @since 6.5.0 */ /** * @cfg {String/String[]/Ext.XTemplate} [groupHeaderTpl=null] * This config allows a column to replace the default template supplied by the * grid's {@link Ext.grid.Grid#groupHeaderTpl groupHeaderTpl}. * * @accessor * @since 6.5.0 */ /** * @cfg {Function/String/Object/Ext.util.Sorter} [sorter=null] * A sorter config object to apply when the standard sort user interface is * is invoked. This is usually clicking this column header, but there are also * menu options to sort ascending or descending. * * Note that a sorter may also be specified as a function which accepts two * records to compare. * * A `{@link Ext.app.ViewController controller}` method can be used like so: * * sorter: 'sorterMethodName' * * Or more explicitly: * * sorter: { * sorterFn: 'sorterMethodName' * } * * By default sorting is based on the `dataIndex` but this can be adjusted * like so: * * sorter: { * property: 'otherProperty' * } * * @accessor * @since 6.5.0 */ /** * @cfg {Boolean} [menuDisabled=null] * True to disable the column header menu containing sort/hide options. * @accessor */ /** * @cfg {Object} [menu] * An optional menu configuration object which is merged with the grid's * {@link #cfg!columnMenu} to create this column's header menu. * * The grid's {@link #cfg!columnMenu} provides the sort items, this config can be * used to add application-specific column menu items. * @accessor * @since 6.5.0 */ /** * @event columnmenucreated * @member Ext.grid.Grid * Fired when a column first creates its column menu. This is to allow plugins * to access and manipulate the column menu. * * There will be the two sort items, and a column hide/show item with a child menu of * checkboxes. After this, developers may add custom enu items. * * Menu items may be configured with a `weight` config, and those with the lowest weight * gravitate to the top. * * The sort ascending, sort descending, and hide columns items have weight -3, -2, and -1 * @param {Ext.grid.Grid} grid This Grid * @param {Ext.grid.Column} column The column creating the menu * @param {Ext.menu.Menu} menu The column's new menu */