/** * 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 {@link Ext.form.Basic#load 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.form.FieldContainer} 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' * }] * }); */Ext.define('Ext.form.field.Display', { extend: 'Ext.form.field.Base', alias: 'widget.displayfield', alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'], requires: [ 'Ext.util.Format', 'Ext.XTemplate' ], /* eslint-disable indent, max-len */ /** * @cfg fieldSubTpl * @inheritdoc */ fieldSubTpl: [ '<div id="{id}" data-ref="inputEl" role="textbox" aria-readonly="true"', ' aria-labelledby="{cmpId}-labelEl" {inputAttrTpl}', ' tabindex="<tpl if="tabIdx != null">{tabIdx}<tpl else>-1</tpl>"', '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>', ' class="{fieldCls} {fieldCls}-{ui}">{value}</div>', { compiled: true, disableFormats: true } ], /* eslint-enable indent, max-len */ // We have the ARIA markup pre-rendered so we don't want it to be applied /** * @property ariaRole * @inheritdoc */ ariaRole: undefined, /** * @property focusable * @inheritdoc */ focusable: false, // Display fields are divs not real input fields, so rendering // "for" attribute in the label does not do any good. skipLabelForAttribute: true, /** * @cfg readOnly * @inheritdoc * @private */ readOnly: true, /** * @cfg fieldCls * @inheritdoc */ fieldCls: Ext.baseCSSPrefix + 'form-display-field', /** * @cfg fieldBodyCls * @inheritdoc */ fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body', /** * @cfg {Boolean} htmlEncode * True to escape HTML in text when rendering it. */ htmlEncode: false, /** * @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 */ /** * @cfg {Object} scope * The scope to execute the {@link #renderer} function. Defaults to this. */ /** * @property noWrap * @inheritdoc */ noWrap: false, /** * @cfg validateOnChange * @inheritdoc * @private */ validateOnChange: false, /** * @method initEvents * @inheritdoc */ initEvents: Ext.emptyFn, /** * @cfg submitValue * @inheritdoc */ submitValue: false, getValue: function() { return this.value; }, valueToRaw: function(value) { if (value || value === 0 || value === false) { return value; } else { return ''; } }, isDirty: function() { return false; }, isValid: Ext.returnTrue, validate: Ext.returnTrue, getRawValue: function() { return this.rawValue; }, setRawValue: function(value) { var me = this; value = Ext.valueFrom(value, ''); me.rawValue = value; if (me.rendered) { me.inputEl.dom.innerHTML = me.getDisplayValue(); me.updateLayout(); } return value; }, /** * @private * Format the value to display. */ getDisplayValue: function() { var me = this, value = this.getRawValue(), renderer = me.renderer, display; if (renderer) { display = Ext.callback(renderer, me.scope, [value, me], 0, me); } else { display = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value; } return display; }, getSubTplData: function(fieldData) { var ret = this.callParent(arguments); ret.value = this.getDisplayValue(); return ret; } /** * @cfg {String} inputType * @private */ /** * @cfg {Boolean} disabled * @private */ /** * @cfg {Number} checkChangeEvents * @private */ /** * @cfg {Number} checkChangeBuffer * @private */});