/** * A display-only text field which is not validated and not submitted. This is useful for when you * want to display a value from a form's loaded data but do not want to allow the user to edit or * submit that * value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains * HTML markup that you do not want * to be rendered. * * If you have more complex content, or need to include components within the displayed content, * also consider using a {@link Ext.field.Container} instead. * * Example: * * @example * Ext.create('Ext.form.Panel', { * renderTo: Ext.getBody(), * width: 175, * height: 150, * bodyPadding: 10, * title: 'Final Score', * items: [{ * xtype: 'displayfield', * fieldLabel: 'Home', * name: 'home_score', * value: '10' * }, { * xtype: 'displayfield', * fieldLabel: 'Visitor', * name: 'visitor_score', * value: '11' * }], * buttons: [{ * text: 'Update' * }] * }); * * @since 6.5.1 */Ext.define('Ext.field.Display', { extend: 'Ext.field.Field', xtype: 'displayfield', alternateClassName: 'Ext.form.Display', submitValue: false, validateOnChange: false, /** * @cfg {Boolean} focusable * @private */ focusable: false, /** * @cfg {Boolean} readOnly * @private */ readOnly: true, config: { /** * @cfg {Boolean} encodeHtml * Set to `false` to render HTML. Be aware this can be a security risk if the * data presented is not properly filtered for malicious HTML tags. */ encodeHtml: true, /** * @cfg {Function/String} renderer * A function to transform the raw value for display in the field. * * Ext.create('Ext.form.Panel', { * renderTo: document.body, * width: 175, * bodyPadding: 10, * title: 'Final Score', * items: [{ * xtype: 'displayfield', * fieldLabel: 'Grade', * name: 'final_grade', * value: 68, * renderer: function (value, field) { * var color = (value < 70) ? 'red' : 'black'; * return '<span style="color:' + color + ';">' + value + '</span>'; * } * }] * }); * * @param {Object} value The raw field {@link #value} * @param {Ext.form.field.Display} field The display field * @return {String} displayValue The HTML string to be rendered * @controllable */ renderer: null }, classCls: Ext.baseCSSPrefix + 'displayfield', /** * @cfg {Object} scope * The scope to execute the {@link #renderer} function. Defaults to `this` component. */ initialize: function() { this.callParent(); this.syncDom(); }, /** * @private */ getBodyTemplate: function() { return [{ reference: 'inputElement', cls: Ext.baseCSSPrefix + 'input-el' }]; }, updateValue: function(newValue, oldValue) { this.callParent([ newValue, oldValue ]); this.syncDom(); }, updateHtmlEncode: function() { this.syncDom(); }, updateRenderer: function() { this.syncDom(); }, validate: Ext.returnTrue, isValid: Ext.returnTrue, rawToValue: Ext.emptyFn, privates: { getDisplayValue: function() { var me = this, value = Ext.valueFrom(me.getValue(), ''), renderer = me.getRenderer(); if (renderer) { value = Ext.callback(renderer, me.scope, [value, me], 0, me); } return value; }, syncDom: function() { var me = this, dom = me.inputElement.dom, value; if (!me.isConfiguring) { value = me.getDisplayValue(); if (me.getEncodeHtml()) { dom.textContent = value; } else { dom.innerHTML = value; } } } }});