/** * This is the default cell class for {@link Ext.grid.Grid grid} cells. Use this class if * you use the {@link Ext.grid.column.Column#renderer} or {@link Ext.grid.column.Column#tpl} * configs for a column. * * {@link Ext.grid.Row Rows} create cells based on the {@link Ext.grid.column.Column#cell} * config. Application code would rarely create cells directly. */Ext.define('Ext.grid.cell.Cell', { extend: 'Ext.grid.cell.Text', xtype: 'gridcell', config: { /** * @cfg {String/String[]/Ext.XTemplate} tpl * An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use * to process a {@link Ext.data.Model records} data to produce a cell's rendered * value. * * @example * Ext.create('Ext.data.Store', { * storeId:'employeeStore', * fields:['firstname', 'lastname', 'seniority', 'department'], * groupField: 'department', * data:[ * { firstname: "Michael", lastname: "Scott", seniority: 7, department: "Management" }, * { firstname: "Dwight", lastname: "Schrute", seniority: 2, department: "Sales" }, * { firstname: "Jim", lastname: "Halpert", seniority: 3, department: "Sales" }, * { firstname: "Kevin", lastname: "Malone", seniority: 4, department: "Accounting" }, * { firstname: "Angela", lastname: "Martin", seniority: 5, department: "Accounting" } * ] * }); * * Ext.create('Ext.grid.Panel', { * title: 'Column Template Demo', * store: Ext.data.StoreManager.lookup('employeeStore'), * columns: [{ * text: 'Full Name', * tpl: '{firstname} {lastname}' * }, { * text: 'Department (Yrs)', * tpl: '{department} ({seniority})' * }], * height: 200, * width: 300, * renderTo: Ext.getBody() * }); * * This config is only processed if the {@link #cell} type is the default of * {@link Ext.grid.cell.Cell gridcell}. * * **Note** See {@link Ext.grid.Grid} documentation for other, better alternatives * to rendering cell content. */ tpl: null, /** * @cfg {Function/String} renderer * A renderer is a method which can be used to transform data (value, appearance, etc.) * before it is rendered. * * For example: * * { * text: 'Some column', * dataIndex: 'fieldName', * * renderer: function (value, record) { * if (value === 1) { * return '1 person'; * } * return value + ' people'; * } * } * * If a string is supplied, it should be the name of a renderer method from the * appropriate {@link Ext.app.ViewController}. * * This config is only processed if the {@link #cell} type is the default of * {@link Ext.grid.cell.Cell gridcell}. * * **Note** See {@link Ext.grid.Grid} documentation for other, better alternatives * to rendering cell content. * * @cfg {Object} renderer.value The data value for the current cell. * @cfg {Ext.data.Model} renderer.record The record for the current row. * @cfg {Number} renderer.dataIndex The dataIndex of the current column. * @cfg {Ext.grid.cell.Base} renderer.cell The current cell. * @cfg {Ext.grid.column.Column} renderer.column The current column. * @cfg {String} renderer.return The HTML string to be rendered. */ renderer: null, /** * @cfg {String} formatter * This config accepts a format specification as would be used in a `Ext.Template` * formatted token. For example `'round(2)'` to round numbers to 2 decimal places * or `'date("Y-m-d")'` to format a Date. * * In previous releases the `renderer` config had limited abilities to use one * of the `Ext.util.Format` methods but `formatter` now replaces that usage and * can also handle formatting parameters. * * When the value begins with `"this."` (for example, `"this.foo(2)"`), the * implied scope on which "foo" is found is the `scope` config for the column. * * If the `scope` is not given, or implied using a prefix of `"this"`, then either the * {@link #method-getController ViewController} or the closest ancestor component configured * as {@link #defaultListenerScope} is assumed to be the object with the method. * @since 6.2.0 */ formatter: null, /** * @cfg {Object} scope * The scope to use when calling the {@link #renderer} or {@link #formatter} function. */ scope: null }, updateColumn: function (column, oldColumn) { var me = this, tpl, renderer, formatter; me.callParent([column, oldColumn]); /* The `tpl`, `renderer` and `formatter` configs are on the Cell level so that a ViewModel can be used for cells to change these configs dynamically. If `formatter` is changed dynamically then performance will decrease since expressions need to be parsed for each cell. */ if (column) { me.columnInitializing = true; tpl = column.getTpl(); renderer = column.getRenderer(); formatter = column.getFormatter(); if (tpl !== null) { me.setTpl(tpl); } if (renderer !== null) { me.setRenderer(renderer); } if (formatter !== null) { me.setFormatter(formatter); } me.columnInitializing = false; } }, applyTpl: function (tpl) { if (!tpl || !tpl.isXTemplate) { tpl = new Ext.XTemplate(tpl); } return tpl; }, applyFormatter: function(format){ var me = this, fmt = format, parser; if(typeof fmt === 'string'){ parser = Ext.app.bind.Parser.fly(fmt); fmt = parser.compileFormat(); parser.release(); return function(v){ return fmt(v, me.getScope() || me.resolveListenerScope()); }; } //<debug> else if(typeof fmt !== 'function'){ Ext.raise('Invalid formatter'); } //</debug> return fmt; }, updateTpl: function(){ if(!this.columnInitializing) { this.writeValue(); } }, updateRenderer: function(){ if(!this.columnInitializing) { this.writeValue(); } }, updateFormatter: function(){ if(!this.columnInitializing) { this.writeValue(); } }, /** * This function is called when the cell value is updated. * * @private */ writeValue: function(){ var me = this, column = me.getColumn(), record = me.getRecord(), v = me.getValue(), zeroValue = me.getZeroValue(), raw = v, // raw value takes as default the cell value dataIndex, tpl, renderer, scope, format; if(v === 0 && zeroValue !== null) { raw = zeroValue; }else if (record && column) { tpl = me.getTpl(); renderer = me.getRenderer(); format = me.getFormatter(); if (tpl) { raw = tpl.apply(record.getData(true)); } else if (typeof format === 'function'){ raw = format(v); } else if (renderer) { dataIndex = me.dataIndex; scope = me.getScope() || column.getScope(); if (typeof renderer === 'function') { raw = renderer.call(scope || column, v, record, dataIndex, me, column); } else { raw = Ext.callback(renderer, scope, [v, record, dataIndex, me, column], 0, me); } } } me.setRawValue(raw); }});