A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click handler for each icon. Example usage:
new Ext.grid.GridPanel({
store: myStore,
columns: [
{
xtype: 'actioncolumn',
width: 50,
items: [
{
icon: 'sell.gif',
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
},
{
iconCls: 'buy-col',
tooltip: 'Buy stock'
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
}
}
]
}
//any other columns here
]
});
The action column can be at any index in the columns array, and a grid can have any number of action columns.
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.
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:
The new value of the group field.
Unused parameter.
The Record providing the data for the row which caused group change.
The row index of the Record which caused group change.
The column index of the group field.
The Store which is providing the data Model.
The function should return a string value.
groupName.grid : GridPanelrowIndex : NumbercolIndex : Numberitem : Objecte : EventExt.BLANK_IMAGE_URL.Ext.BLANK_IMAGE_URL.x-grid3-td-idHeader cells will also receive this class name, but will also have the class
x-grid3-hdSo, to target header cells, use CSS selectors such as:
.x-grid3-hd-row .x-grid3-td-idThe Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.
icon : StringiconCls : Stringhandler : Functionscope : Scopehandler is executed. Defaults to this Column.tooltip : StringFor 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:
{
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;
}
}Ext.grid.ColumnModel.defaultSortable property.
Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.true. Prevent grid row selection upon mousedown.true. Prevent grid row selection upon mousedown.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.
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.
renderer to be easily
configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
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
}, {
...
}]
});The data value for the cell.
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').
The Ext.data.Record from which the data was extracted.
Row index
Column index
The Ext.data.Store object from which the Record was extracted.
Reconfigures this column model according to the passed Array of column definition objects. For a description of the individual properties of a column definition object, see the Config Options.
Causes the configchange event to be fired. A GridPanel using this ColumnModel will listen for this event and refresh its UI automatically.