📄 column.js
字号:
/*
* Ext JS Library 3.0 Pre-alpha
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @class Ext.grid.Column
* <p>This class encapsulates column configuration data to be used in the initialization of a
* {@link Ext.grid.ColumnModel ColumnModel}.</p>
* <p>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.</p>
*/
Ext.grid.Column = function(config){
Ext.apply(this, config);
if(typeof this.renderer == "string"){
this.renderer = Ext.util.Format[this.renderer];
} else if(typeof this.renderer == 'object'){
this.scope = this.renderer.scope;
this.renderer = this.renderer.fn;
}
this.renderer = this.renderer.createDelegate(this.scope || config);
if(typeof this.id == "undefined"){
this.id = ++Ext.grid.Column.AUTO_ID;
}
if(this.editor){
if(this.editor.xtype && !this.editor.events){
this.editor = Ext.create(this.editor, 'textfield');
}
}
}
Ext.grid.Column.AUTO_ID = 0;
Ext.grid.Column.prototype = {
/**
* @cfg {Boolean} editable (optional) Defaults to <tt>true</tt>, enabling the configured
* <tt>{@link #editor}</tt>. Set to <tt>false</tt> 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 <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
* table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
* unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
* Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
* So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd.x-grid3-td-<b>id</b></pre>
* The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
* unique identifier.
*/
/**
* @cfg {String} header The header text to be used as innerHTML (html tags are accepted)
* to display in the Grid view.
*/
/**
* @cfg {Boolean} groupable 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 <tt>true</tt>,
* which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the
* group option in the header menu for the column. See also <code>{@link #groupName}</code>.
*/
/**
* @cfg {String} groupName 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 {String} dataIndex (optional) 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. If not
* specified, the column's index is used as an index into the Record's data Array.
*/
/**
* @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:
* <div class="mdetail-params"><ul>
* <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
* <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
* <div class="sub-desc">
* <p>By specifying <tt>forceFit:true</tt>, {@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.</p>
* </div></li>
* <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
* <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
* <br><p><b>Note</b>: 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}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
* can be modified to reduce or eliminate the reserved offset.</p>
*/
/**
* @cfg {Boolean} sortable (optional) <tt>true</tt> 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) <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.
*/
/**
* @cfg {Boolean} resizable (optional) <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
*/
/**
* @cfg {Boolean} menuDisabled (optional) <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
*/
/**
* @cfg {Boolean} hidden (optional) <tt>true</tt> to hide the column. Defaults to <tt>false</tt>.
*/
/**
* @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 <p>(optional) 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:
* <div class="mdetail-params"><ul>
* <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
* <li>A string which references a property name of the {@link Ext.util.Format} class which
* provides a renderer function.</li>
* <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
* reference) eg:<pre style="margin-left:1.2em"><code>
{
fn: this.gridRenderer,
scope: this
}
</code></pre></li></ul></div>
* If not specified, the default renderer uses the raw data value.</p>
* <p>For information about the renderer function (passed parameters, etc.), see
* {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
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;
}
}
* </code></pre>
* See also {@link #scope}.
*/
/**
* @cfg {Object} scope (optional) The scope (<tt><b>this</b></tt> 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 <tt>false</tt> 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 <tt>{@link #editable}</tt> also.
*/
/**
* @cfg {Function} groupRenderer <p>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 <tt><b>groupRenderer</b></tt> is not specified, the configured
* <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
* the new value of the group field will be used.</p>
* <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
* passed the following parameters:
* <div class="mdetail-params"><ul>
* <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
* <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
* <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -