/**
* @class Ext.grid.Column
*This class encapsulates column configuration data to be used in the initialization of a
* {@link Ext.grid.ColumnModel 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.
*/
Ext.grid.Column = function(config){
Ext.apply(this, config);
if(typeof this.renderer == 'string'){
this.renderer = Ext.util.Format[this.renderer];
} else if(Ext.isObject(this.renderer)){
this.scope = this.renderer.scope;
this.renderer = this.renderer.fn;
}
this.renderer = this.renderer.createDelegate(this.scope || config);
if(this.id === undefined){
this.id = ++Ext.grid.Column.AUTO_ID;
}
if(this.editor){
this.editor = Ext.create(this.editor, 'textfield');
}
};
Ext.grid.Column.AUTO_ID = 0;
Ext.grid.Column.prototype = {
/**
* @cfg {Boolean} editable Optional. Defaults to true, enabling the configured
* {@link #editor}. Set to false to initially disable editing on this column.
* The initial configuration may be dynamically altered using
* {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
*/
/**
* @cfg {String} id 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 ofx-grid3-td-id
* Header cells will also receive this class name, but will also have the classx-grid3-hd
* So, to target header cells, use CSS selectors such as:.x-grid3-hd-row .x-grid3-td-id
* The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
* unique identifier.
*/
/**
* @cfg {String} header 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 ' '.
*/
/**
* @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link 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{@link #groupName}
.
*/
/**
* @cfg {String} groupName Optional. If the grid is being rendered by an {@link 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 {@link #groupRenderer} and
* {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
*/
/**
* @cfg {Function} groupRendererOptional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
* may be used to specify the function used to format the grouping field value for display in the group
* {@link #groupName header}. If a groupRenderer is not specified, the configured
* {@link #renderer} will be called; if a {@link #renderer} is also not specified
* the new value of the group field will be used.
*The called function (either the groupRenderer or {@link #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.
*/
/**
* @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
* may be used to specify the text to display when there is an empty group value. Defaults to the
* {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
*/
/**
* @cfg {String} dataIndexRequired. The name of the field in the
* grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
* which to draw the column's value.
*/
/**
* @cfg {Number} width
* 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:
*
*- {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
*- {@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit}
*
*By specifying forceFit:true, {@link #fixed 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.
*
*- {@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
*- {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}
*Note: when the width of each column is determined, a space on the right side
* is reserved for the vertical scrollbar. The
* {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset}
* can be modified to reduce or eliminate the reserved offset.
*/
/**
* @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column.
* Defaults to the value of the {@link #defaultSortable} property.
* Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
*/
/**
* @cfg {Boolean} fixed Optional. true if the column width cannot be changed. Defaults to false.
*/
/**
* @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true.
*/
/**
* @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false.
*/
/**
* @cfg {Boolean} hidden Optional. true to hide the column. Defaults to false.
*/
/**
* @cfg {String} tooltip 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 ''.
*/
/**
* @cfg {Mixed} renderer
*For an alternative to specifying a renderer see
{@link #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 {@link 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
}
* If not specified, the default renderer uses the raw data value.
*For information about the renderer function (passed parameters, etc.), see
* {@link 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 {@link #scope}.
*/
/**
* @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
* type which is preconfigured with an appropriate{@link #renderer}
to be easily
* configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
*
*- gridcolumn : {@link Ext.grid.Column} (Default)
*- booleancolumn : {@link Ext.grid.BooleanColumn}
*- numbercolumn : {@link Ext.grid.NumberColumn}
*- datecolumn : {@link Ext.grid.DateColumn}
*- templatecolumn : {@link 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 {@link Ext.grid.DateColumn}
}, {
...
}]
});
*
*/
/**
* @cfg {Object} scope Optional. The scope (this reference) in which to execute the
* renderer. Defaults to the Column configuration object.
*/
/**
* @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.
*/
/**
* @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
* (excluding headers). Defaults to undefined.
*/
/**
* @cfg {Boolean} hideable 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
* {@link Ext.grid.GridPanel#enableColumnHide} instead.
*/
/**
* @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
* if editing is supported by the grid. See {@link #editable} also.
*/
// private. Used by ColumnModel to avoid reprocessing
isColumn : true,
/**
* 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;"').
*- record : Ext.data.record
The {@link Ext.data.Record} from which the data was
* extracted.
*- rowIndex : Number
Row index
*- colIndex : Number
Column index
*- store : Ext.data.Store
The {@link Ext.data.Store} object from which the Record
* was extracted.
*
* @property renderer
* @type Function
*/
renderer : function(value){
if(typeof value == 'string' && value.length < 1){
return ' ';
}
return value;
},
// private
getEditor: function(rowIndex){
return this.editable !== false ? this.editor : null;
},
/**
* Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
* used to edit the cell.
* @param {Number} rowIndex The row index
* @return {Ext.Editor}
*/
getCellEditor: function(rowIndex){
var editor = this.getEditor(rowIndex);
if(editor){
if(!editor.startEdit){
if(!editor.gridEditor){
editor.gridEditor = new Ext.grid.GridEditor(editor);
}
return editor.gridEditor;
}else if(editor.startEdit){
return editor;
}
}
return null;
}
};
/**
* @class Ext.grid.BooleanColumn
* @extends Ext.grid.Column
*A Column definition class which renders boolean data fields. See the {@link Ext.grid.ColumnModel#xtype xtype}
* config option of {@link Ext.grid.ColumnModel} for more details.
*/
Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
/**
* @cfg {String} trueText
* The string returned by the renderer when the column value is not falsey (defaults to 'true').
*/
trueText: 'true',
/**
* @cfg {String} falseText
* The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
* 'false').
*/
falseText: 'false',
/**
* @cfg {String} undefinedText
* The string returned by the renderer when the column value is undefined (defaults to ' ').
*/
undefinedText: ' ',
constructor: function(cfg){
Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
var t = this.trueText, f = this.falseText, u = this.undefinedText;
this.renderer = function(v){
if(v === undefined){
return u;
}
if(!v || v === 'false'){
return f;
}
return t;
};
}
});
/**
* @class Ext.grid.NumberColumn
* @extends Ext.grid.Column
*A Column definition class which renders a numeric data field according to a {@link #format} string. See the
* {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.
*/
Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
/**
* @cfg {String} format
* A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
* (defaults to '0,000.00').
*/
format : '0,000.00',
constructor: function(cfg){
Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.numberRenderer(this.format);
}
});
/**
* @class Ext.grid.DateColumn
* @extends Ext.grid.Column
*A Column definition class which renders a passed date according to the default locale, or a configured
* {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel}
* for more details.
*/
Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
/**
* @cfg {String} format
* A formatting string as used by {@link Date#format} to format a Date for this Column
* (defaults to 'm/d/Y').
*/
format : 'm/d/Y',
constructor: function(cfg){
Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.dateRenderer(this.format);
}
});
/**
* @class Ext.grid.TemplateColumn
* @extends Ext.grid.Column
*A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
* {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
* See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more
* details.
*/
Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
/**
* @cfg {String/XTemplate} tpl
* An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a
* {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
*/
constructor: function(cfg){
Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);
this.renderer = function(value, p, r){
return tpl.apply(r.data);
};
this.tpl = tpl;
}
});
/*
* @property types
* @type Object
* @member Ext.grid.Column
* @static
*An object containing predefined Column classes keyed by a mnemonic code which may be referenced
* by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.
*This contains the following properties
*- gridcolumn : {@link Ext.grid.Column Column constructor}
*- booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
*- numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
*- datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
*- templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}
*
*/
Ext.grid.Column.types = {
gridcolumn : Ext.grid.Column,
booleancolumn: Ext.grid.BooleanColumn,
numbercolumn: Ext.grid.NumberColumn,
datecolumn: Ext.grid.DateColumn,
templatecolumn: Ext.grid.TemplateColumn
};