Ext.grid.Column
Hierarchy
Ext.util.ObservableExt.grid.ColumnSubclasses
Files
This class encapsulates column configuration data to be used in the initialization of a ColumnModel.
While subclasses are provided to render data in different ways, this class renders a passed data field unchanged and is usually used for textual columns.
Available since: Ext JS 3.4.0
Config options
Optional. Set the CSS text-align property of the column. Defaults to undefined.
Available since: Ext JS 3.4.0
Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.
Available since: Ext JS 3.4.0
Required. The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value.
Available since: Ext JS 3.4.0
Optional. Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using Ext.grid.ColumnModel.setEditable().
Available since: Ext JS 3.4.0
Optional. The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See editable also.
Available since: Ext JS 3.4.0
Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text to display when there is an empty group value. Defaults to the Ext.grid.GroupingView.emptyGroupText.
Available since: Ext JS 3.4.0
Optional. true if the column width cannot be changed. Defaults to false.
Available since: Ext JS 3.4.0
Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with which to prefix the group field value in the group header line. See also groupRenderer and Ext.grid.GroupingView.showGroupName.
Available since: Ext JS 3.4.0
Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.
The called function (either the groupRenderer or renderer) will be passed the following parameters:
- v : Object
The new value of the group field.
- unused : undefined
Unused parameter.
- r : Ext.data.Record
The Record providing the data for the row which caused group change.
- rowIndex : Number
The row index of the Record which caused group change.
- colIndex : Number
The column index of the group field.
- ds : Ext.data.Store
The Store which is providing the data Model.
The function should return a string value.
Available since: Ext JS 3.4.0
Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option
may be used to disable the header menu item to group by the column selected. Defaults to true,
which enables the header menu group option. Set to false to disable (but still show) the
group option in the header menu for the column. See also groupName.
Available since: Ext JS 3.4.0
Optional. The header text to be used as innerHTML (html tags are accepted) to display in the Grid view. Note: to have a clickable header with no text displayed use ' '.
Available since: Ext JS 3.4.0
Optional. Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding globally for all columns in the grid, use Ext.grid.GridPanel.enableColumnHide instead.
Available since: Ext JS 3.4.0
Optional. A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a CSS class name which is applied to all table cells (including headers) in that column (in this context the id does not need to be unique). The class name takes the form of
x-grid3-td-id
Header cells will also receive this class name, but will also have the class
x-grid3-hd
So, to target header cells, use CSS selectors such as:
.x-grid3-hd-row .x-grid3-td-id
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.
Available since: Ext JS 3.4.0
Used by ColumnModel setConfig method to avoid reprocessing a Column
if isColumn is not set ColumnModel will recreate a new Ext.grid.Column
Defaults to true.
Defaults to: true
Available since: Ext JS 3.4.0
(optional)
A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.
DOM events from ExtJs Components
While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
is usually only done when extra value can be added. For example the DataView's
click event passing the node clicked on. To access DOM
events directly from a Component's HTMLElement, listeners must be added to the Element after the Component
has been rendered. A plugin can simplify this step:
// Plugin is configured with a listeners config object.
// The Component is appended to the argument list of all handler functions.
Ext.DomObserver = Ext.extend(Object, {
constructor: function(config) {
this.listeners = config.listeners ? config.listeners : config;
},
// Component passes itself into plugin's init method
init: function(c) {
var p, l = this.listeners;
for (p in l) {
if (Ext.isFunction(l[p])) {
l[p] = this.createHandler(l[p], c);
} else {
l[p].fn = this.createHandler(l[p].fn, c);
}
}
// Add the listeners to the Element immediately following the render call
c.render = c.render.createSequence(function() {
var e = c.getEl();
if (e) {
e.on(l);
}
});
},
createHandler: function(fn, c) {
return function(e) {
fn.call(this, e, c);
};
}
});
var combo = new Ext.form.ComboBox({
// Collapse combo when its element is clicked on
plugins: [ new Ext.DomObserver({
click: function(evt, comp) {
comp.collapse();
}
})],
store: myStore,
typeAhead: true,
mode: 'local',
triggerAction: 'all'
});
Available since: 1.1.0
For an alternative to specifying a renderer see xtype
Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:
- A renderer function used to return HTML markup for a cell given the cell's data value.
- A string which references a property name of the Ext.util.Format class which provides a renderer function.
- An object specifying both the renderer function, and its execution scope (this
reference) e.g.:
{ fn: this.gridRenderer, scope: this }
For information about the renderer function (passed parameters, etc.), see Ext.grid.ColumnModel.setRenderer. An example of specifying renderer function inline:
var companyColumn = {
header: 'Company Name',
dataIndex: 'company',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
// provide the logic depending on business rules
// name of your own choosing to manipulate the cell depending upon
// the data in the underlying Record object.
if (value == 'whatever') {
//metaData.css : String : A CSS class name to add to the TD element of the cell.
//metaData.attr : String : An html attribute definition string to apply to
// the data container element within the table
// cell (e.g. 'style="color:red;"').
metaData.css = 'name-of-css-class-you-will-define';
}
return value;
}
}
See also scope.
Available since: Ext JS 3.4.0
Optional. false to disable column resizing. Defaults to true.
Available since: Ext JS 3.4.0
Optional. The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.
Available since: Ext JS 3.4.0
Optional. true if sorting is to be allowed on this column.
Defaults to the value of the Ext.grid.ColumnModel.defaultSortable property.
Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.
Available since: Ext JS 3.4.0
Optional. A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the header's HTML title attribute. Defaults to ''.
Available since: Ext JS 3.4.0
Optional. The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:
- Ext.grid.GridPanel.autoExpandColumn
- Ext.grid.GridView.forceFit
By specifying forceFit:true, non-fixed width columns will be re-proportioned (based on the relative initial widths) to fill the width of the grid so that no horizontal scrollbar is shown.
- Ext.grid.GridView.autoFill
- Ext.grid.GridPanel.minColumnWidth
Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.
Available since: Ext JS 3.4.0
Optional. A String which references a predefined Ext.grid.Column subclass
type which is preconfigured with an appropriate renderer to be easily
configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
- gridcolumn : Ext.grid.Column (Default)
- booleancolumn : Ext.grid.BooleanColumn
- numbercolumn : Ext.grid.NumberColumn
- datecolumn : Ext.grid.DateColumn
- templatecolumn : Ext.grid.TemplateColumn
Configuration properties for the specified xtype may be specified with
the Column configuration properties, for example:
var grid = new Ext.grid.GridPanel({
...
columns: [{
header: 'Last Updated',
dataIndex: 'lastChange',
width: 85,
sortable: true,
//renderer: Ext.util.Format.dateRenderer('m/d/Y'),
xtype: 'datecolumn', // use xtype instead of renderer
format: 'M/d/Y' // configuration property for Ext.grid.DateColumn
}, {
...
}]
});
Available since: Ext JS 3.4.0
Properties
Optional. A function which returns displayable data when passed the following parameters:
- value : Object
The data value for the cell.
- metadata : Object
An object in which you may set the following attributes:
- css : String
A CSS class name to add to the cell's TD element.
- attr : String
An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').
- css : String
- record : Ext.data.record
The Ext.data.Record from which the data was extracted.
- rowIndex : Number
Row index
- colIndex : Number
Column index
- store : Ext.data.Store
The Ext.data.Store object from which the Record was extracted.
Available since: Ext JS 3.4.0
Methods
Adds the specified events to the list of events which this Observable may fire.
Available since: 1.1.0
Parameters
- o : Object|String
Either an object with event names as properties with a value of
trueor the first event name string if multiple event names are being passed as separate parameters. - Optional : string
. Event name if multiple event names are being passed as separate parameters. Usage:
this.addEvents('storeloaded', 'storecleared');
Appends an event handler to this object.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to listen for.
- handler : Function
The method the event invokes.
- scope : Object (optional)
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - options : Object (optional)
An object containing handler configuration. properties. This may contain any of the following properties:
- scope : ObjectThe scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - delay : NumberThe number of milliseconds to delay the invocation of the handler after the event fires.
- single : BooleanTrue to add a handler to handle just the next firing of the event, and then remove itself.
- buffer : NumberCauses the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
- target : ObservableOnly call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener.myDataView.on('click', this.onClick, this, { single: true, delay: 100 });Attaching multiple handlers in 1 call
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.myGridPanel.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this }, 'mouseout' : { fn: this.onMouseOut, scope: this } });Or a shorthand syntax:
myGridPanel.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut, scope: this }); - scope : Object
Clean up. Remove any Editor. Remove any listeners.
Available since: Ext JS 3.4.0
Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly.
Example:
Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
Available since: Ext JS 3.4.0
Parameters
Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to fire.
- args : Object...
Variable number of parameters are passed to handlers.
Returns
- Boolean
returns false if any of the handlers return false otherwise it returns true.
private
Available since: Ext JS 3.4.0
Parameters
- rowIndex : Object
Checks to see if this object has any listeners for a specified event
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to check for
Returns
- Boolean
True if the event is being listened for, else false
Appends an event handler to this object (shorthand for addListener.)
Available since: 1.1.0
Parameters
- eventName : String
The type of event to listen for
- handler : Function
The method the event invokes
- scope : Object (optional)
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - options : Object (optional)
An object containing handler configuration.
Process and refire events routed from the GridView's processEvent method. Returns the event handler's status to allow cancelling of GridView's bubbling process.
Available since: Ext JS 3.4.0
Parameters
- name : Object
- e : Object
- grid : Object
- rowIndex : Object
- colIndex : Object
Removes all listeners for this object
Available since: 1.1.0
Relays selected events from the specified Observable as if the events were fired by this.
Available since: 2.3.0
Parameters
- o : Object
The Observable whose events this object is to relay.
- events : Array
Array of event names to relay.
Removes an event handler.
Available since: 1.1.0
Parameters
- eventName : String
The type of event the handler was associated with.
- handler : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
- scope : Object (optional)
The scope originally specified for the handler.
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Available since: 2.3.0
Sets a new editor for this column.
Available since: Ext JS 3.4.0
Parameters
- editor : Ext.Editor/Ext.form.Field
The editor to set
Suspend the firing of all events. (see resumeEvents)
Available since: 2.3.0
Parameters
- queueSuspended : Boolean
Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Removes an event handler (shorthand for removeListener.)
Available since: 1.1.0
Parameters
- eventName : String
The type of event the handler was associated with.
- handler : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
- scope : Object (optional)
The scope originally specified for the handler.
Events
Fires when this Column is clicked.
Available since: Ext JS 3.4.0
Parameters
- this : Column
- The : Grid
owning GridPanel
- rowIndex : Number
- e : Ext.EventObject
Fires when this Column is double clicked.
Available since: Ext JS 3.4.0
Parameters
- this : Column
- The : Grid
owning GridPanel
- rowIndex : Number
- e : Ext.EventObject
Fires when this Column receives a mousedown event.
Available since: Ext JS 3.4.0
Parameters
- this : Column
- The : Grid
owning GridPanel
- rowIndex : Number
- e : Ext.EventObject