Column.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:19k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.grid.Column
  3.  * <p>This class encapsulates column configuration data to be used in the initialization of a
  4.  * {@link Ext.grid.ColumnModel ColumnModel}.</p>
  5.  * <p>While subclasses are provided to render data in different ways, this class renders a passed
  6.  * data field unchanged and is usually used for textual columns.</p>
  7.  */
  8. Ext.grid.Column = function(config){
  9.     Ext.apply(this, config);
  10.     if(typeof this.renderer == 'string'){
  11.         this.renderer = Ext.util.Format[this.renderer];
  12.     } else if(Ext.isObject(this.renderer)){
  13.         this.scope = this.renderer.scope;
  14.         this.renderer = this.renderer.fn;
  15.     }
  16.     this.renderer = this.renderer.createDelegate(this.scope || config);
  17.     if(this.id === undefined){
  18.         this.id = ++Ext.grid.Column.AUTO_ID;
  19.     }
  20.     if(this.editor){
  21.         this.editor = Ext.create(this.editor, 'textfield');
  22.     }
  23. };
  24. Ext.grid.Column.AUTO_ID = 0;
  25. Ext.grid.Column.prototype = {
  26.     /**
  27.      * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured
  28.      * <tt>{@link #editor}</tt>.  Set to <tt>false</tt> to initially disable editing on this column.
  29.      * The initial configuration may be dynamically altered using
  30.      * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
  31.      */
  32.     /**
  33.      * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
  34.      * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
  35.      * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
  36.      * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
  37.      * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
  38.      * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>
  39.      * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
  40.      * unique identifier.
  41.      */
  42.     /**
  43.      * @cfg {String} header Optional. The header text to be used as innerHTML
  44.      * (html tags are accepted) to display in the Grid view.  <b>Note</b>: to
  45.      * have a clickable header with no text displayed use <tt>'&#160;'</tt>.
  46.      */
  47.     /**
  48.      * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  49.      * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>,
  50.      * which enables the header menu group option.  Set to <tt>false</tt> to disable (but still show) the
  51.      * group option in the header menu for the column. See also <code>{@link #groupName}</code>.
  52.      */
  53.     /**
  54.      * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  55.      * may be used to specify the text with which to prefix the group field value in the group header line.
  56.      * See also {@link #groupRenderer} and
  57.      * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
  58.      */
  59.     /**
  60.      * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  61.      * may be used to specify the function used to format the grouping field value for display in the group
  62.      * {@link #groupName header}.  If a <tt><b>groupRenderer</b></tt> is not specified, the configured
  63.      * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
  64.      * the new value of the group field will be used.</p>
  65.      * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
  66.      * passed the following parameters:
  67.      * <div class="mdetail-params"><ul>
  68.      * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
  69.      * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
  70.      * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
  71.      * for the row which caused group change.</p></li>
  72.      * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
  73.      * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
  74.      * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
  75.      * </ul></div></p>
  76.      * <p>The function should return a string value.</p>
  77.      */
  78.     /**
  79.      * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  80.      * may be used to specify the text to display when there is an empty group value. Defaults to the
  81.      * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
  82.      */
  83.     /**
  84.      * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
  85.      * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
  86.      * which to draw the column's value.</p>
  87.      */
  88.     /**
  89.      * @cfg {Number} width
  90.      * Optional. The initial width in pixels of the column.
  91.      * The width of each column can also be affected if any of the following are configured:
  92.      * <div class="mdetail-params"><ul>
  93.      * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
  94.      * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
  95.      * <div class="sub-desc">
  96.      * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be
  97.      * re-proportioned (based on the relative initial widths) to fill the width of the grid so
  98.      * that no horizontal scrollbar is shown.</p>
  99.      * </div></li>
  100.      * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
  101.      * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
  102.      * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side
  103.      * is reserved for the vertical scrollbar.  The
  104.      * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
  105.      * can be modified to reduce or eliminate the reserved offset.</p>
  106.      */
  107.     /**
  108.      * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
  109.      * Defaults to the value of the {@link #defaultSortable} property.
  110.      * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
  111.      */
  112.     /**
  113.      * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed.  Defaults to <tt>false</tt>.
  114.      */
  115.     /**
  116.      * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
  117.      */
  118.     /**
  119.      * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
  120.      */
  121.     /**
  122.      * @cfg {Boolean} hidden Optional. <tt>true</tt> to hide the column. Defaults to <tt>false</tt>.
  123.      */
  124.     /**
  125.      * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips
  126.      * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
  127.      * header's HTML title attribute. Defaults to ''.
  128.      */
  129.     /**
  130.      * @cfg {Mixed} renderer
  131.      * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>
  132.      * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,
  133.      * appearance, etc.) before it is rendered). This may be specified in either of three ways:
  134.      * <div class="mdetail-params"><ul>
  135.      * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
  136.      * <li>A string which references a property name of the {@link Ext.util.Format} class which
  137.      * provides a renderer function.</li>
  138.      * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
  139.      * reference) e.g.:<pre style="margin-left:1.2em"><code>
  140. {
  141.     fn: this.gridRenderer,
  142.     scope: this
  143. }
  144. </code></pre></li></ul></div>
  145.      * If not specified, the default renderer uses the raw data value.</p>
  146.      * <p>For information about the renderer function (passed parameters, etc.), see
  147.      * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
  148. var companyColumn = {
  149.    header: 'Company Name',
  150.    dataIndex: 'company',
  151.    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
  152.       // provide the logic depending on business rules
  153.       // name of your own choosing to manipulate the cell depending upon
  154.       // the data in the underlying Record object.
  155.       if (value == 'whatever') {
  156.           //metaData.css : String : A CSS class name to add to the TD element of the cell.
  157.           //metaData.attr : String : An html attribute definition string to apply to
  158.           //                         the data container element within the table
  159.           //                         cell (e.g. 'style="color:red;"').
  160.           metaData.css = 'name-of-css-class-you-will-define';
  161.       }
  162.       return value;
  163.    }
  164. }
  165.      * </code></pre>
  166.      * See also {@link #scope}.
  167.      */
  168.     /**
  169.      * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
  170.      * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily
  171.      * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
  172.      * <div class="mdetail-params"><ul>
  173.      * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>
  174.      * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>
  175.      * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>
  176.      * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>
  177.      * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>
  178.      * </ul></div>
  179.      * <p>Configuration properties for the specified <code>xtype</code> may be specified with
  180.      * the Column configuration properties, for example:</p>
  181.      * <pre><code>
  182. var grid = new Ext.grid.GridPanel({
  183.     ...
  184.     columns: [{
  185.         header: 'Last Updated',
  186.         dataIndex: 'lastChange',
  187.         width: 85,
  188.         sortable: true,
  189.         //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
  190.         xtype: 'datecolumn', // use xtype instead of renderer
  191.         format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
  192.     }, {
  193.         ...
  194.     }]
  195. });
  196.      * </code></pre>
  197.      */
  198.     /**
  199.      * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the
  200.      * renderer.  Defaults to the Column configuration object.
  201.      */
  202.     /**
  203.      * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.
  204.      */
  205.     /**
  206.      * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
  207.      * (excluding headers). Defaults to undefined.
  208.      */
  209.     /**
  210.      * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column
  211.      * (defaults to true).  To disallow column hiding globally for all columns in the grid, use
  212.      * {@link Ext.grid.GridPanel#enableColumnHide} instead.
  213.      */
  214.     /**
  215.      * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
  216.      * if editing is supported by the grid. See <tt>{@link #editable}</tt> also.
  217.      */
  218.     // private. Used by ColumnModel to avoid reprocessing
  219.     isColumn : true,
  220.     /**
  221.      * Optional. A function which returns displayable data when passed the following parameters:
  222.      * <div class="mdetail-params"><ul>
  223.      * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
  224.      * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
  225.      * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
  226.      * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container
  227.      * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>
  228.      * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was
  229.      * extracted.</p></li>
  230.      * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
  231.      * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
  232.      * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record
  233.      * was extracted.</p></li>
  234.      * </ul></div>
  235.      * @property renderer
  236.      * @type Function
  237.      */
  238.     renderer : function(value){
  239.         if(typeof value == 'string' && value.length < 1){
  240.             return '&#160;';
  241.         }
  242.         return value;
  243.     },
  244.     // private
  245.     getEditor: function(rowIndex){
  246.         return this.editable !== false ? this.editor : null;
  247.     },
  248.     /**
  249.      * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
  250.      * used to edit the cell.
  251.      * @param {Number} rowIndex The row index
  252.      * @return {Ext.Editor}
  253.      */
  254.     getCellEditor: function(rowIndex){
  255.         var editor = this.getEditor(rowIndex);
  256.         if(editor){
  257.             if(!editor.startEdit){
  258.                 if(!editor.gridEditor){
  259.                     editor.gridEditor = new Ext.grid.GridEditor(editor);
  260.                 }
  261.                 return editor.gridEditor;
  262.             }else if(editor.startEdit){
  263.                 return editor;
  264.             }
  265.         }
  266.         return null;
  267.     }
  268. };
  269. /**
  270.  * @class Ext.grid.BooleanColumn
  271.  * @extends Ext.grid.Column
  272.  * <p>A Column definition class which renders boolean data fields.  See the {@link Ext.grid.ColumnModel#xtype xtype}
  273.  * config option of {@link Ext.grid.ColumnModel} for more details.</p>
  274.  */
  275. Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
  276.     /**
  277.      * @cfg {String} trueText
  278.      * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
  279.      */
  280.     trueText: 'true',
  281.     /**
  282.      * @cfg {String} falseText
  283.      * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
  284.      * <tt>'false'</tt>).
  285.      */
  286.     falseText: 'false',
  287.     /**
  288.      * @cfg {String} undefinedText
  289.      * The string returned by the renderer when the column value is undefined (defaults to <tt>'&#160;'</tt>).
  290.      */
  291.     undefinedText: '&#160;',
  292.     constructor: function(cfg){
  293.         Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
  294.         var t = this.trueText, f = this.falseText, u = this.undefinedText;
  295.         this.renderer = function(v){
  296.             if(v === undefined){
  297.                 return u;
  298.             }
  299.             if(!v || v === 'false'){
  300.                 return f;
  301.             }
  302.             return t;
  303.         };
  304.     }
  305. });
  306. /**
  307.  * @class Ext.grid.NumberColumn
  308.  * @extends Ext.grid.Column
  309.  * <p>A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
  310.  * {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.</p>
  311.  */
  312. Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
  313.     /**
  314.      * @cfg {String} format
  315.      * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
  316.      * (defaults to <tt>'0,000.00'</tt>).
  317.      */
  318.     format : '0,000.00',
  319.     constructor: function(cfg){
  320.         Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
  321.         this.renderer = Ext.util.Format.numberRenderer(this.format);
  322.     }
  323. });
  324. /**
  325.  * @class Ext.grid.DateColumn
  326.  * @extends Ext.grid.Column
  327.  * <p>A Column definition class which renders a passed date according to the default locale, or a configured
  328.  * {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel}
  329.  * for more details.</p>
  330.  */
  331. Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
  332.     /**
  333.      * @cfg {String} format
  334.      * A formatting string as used by {@link Date#format} to format a Date for this Column
  335.      * (defaults to <tt>'m/d/Y'</tt>).
  336.      */
  337.     format : 'm/d/Y',
  338.     constructor: function(cfg){
  339.         Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
  340.         this.renderer = Ext.util.Format.dateRenderer(this.format);
  341.     }
  342. });
  343. /**
  344.  * @class Ext.grid.TemplateColumn
  345.  * @extends Ext.grid.Column
  346.  * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
  347.  * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
  348.  * See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more
  349.  * details.</p>
  350.  */
  351. Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
  352.     /**
  353.      * @cfg {String/XTemplate} tpl
  354.      * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a
  355.      * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
  356.      */
  357.     constructor: function(cfg){
  358.         Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
  359.         var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);
  360.         this.renderer = function(value, p, r){
  361.             return tpl.apply(r.data);
  362.         };
  363.         this.tpl = tpl;
  364.     }
  365. });
  366. /*
  367.  * @property types
  368.  * @type Object
  369.  * @member Ext.grid.Column
  370.  * @static
  371.  * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced
  372.  * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>
  373.  * <p>This contains the following properties</p><div class="mdesc-details"><ul>
  374.  * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>
  375.  * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>
  376.  * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>
  377.  * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>
  378.  * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>
  379.  * </ul></div>
  380.  */
  381. Ext.grid.Column.types = {
  382.     gridcolumn : Ext.grid.Column,
  383.     booleancolumn: Ext.grid.BooleanColumn,
  384.     numbercolumn: Ext.grid.NumberColumn,
  385.     datecolumn: Ext.grid.DateColumn,
  386.     templatecolumn: Ext.grid.TemplateColumn
  387. };