/** * @class Ext.form.Display * @extends Ext.form.BaseField *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:
** @constructor * Creates a new DisplayField. * @param {Object} config Configuration options * * @xtype displayfield */ Ext.define('Ext.form.Display', { extend:'Ext.form.BaseField', alias: 'widget.displayfield', requires: ['Ext.util.Format', 'Ext.XTemplate'], alternateClassName: 'Ext.form.DisplayField', /** * @cfg {String} fieldCls The default CSS class for the field (defaults to "x-form-display-field") */ fieldCls: Ext.baseCSSPrefix + 'form-display-field', /** * @cfg {Boolean} htmlEncode false to skip HTML-encoding the text when rendering it (defaults to * false). This might be useful if you want to include tags in the field's innerHTML rather than * rendering them as string literals per the default logic. */ htmlEncode: false, validateOnChange: false, initEvents: Ext.emptyFn, checkValidityChange: Ext.emptyFn, submitValue: false, isValid: function() { return true; }, validate: function() { return true; }, getRawValue: function() { return this.rawValue; }, setRawValue: function(value) { var me = this; value = Ext.value(value, ''); me.rawValue = value; if (me.rendered) { me.inputEl.dom.innerHTML = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value; } return value; }, // private getContentTarget: function() { return this.inputEl; } /** * @cfg {String} inputType * @hide */ /** * @cfg {Boolean} disabled * @hide */ /** * @cfg {Boolean} readOnly * @hide */ /** * @cfg {Boolean} validateOnChange * @hide */ /** * @cfg {Number} checkChangeEvents * @hide */ /** * @cfg {Number} checkChangeBuffer * @hide */ }, function() { this.prototype.fieldSubTpl = new Ext.XTemplate( '', { compiled: true, disableFormats: true } ); });new Ext.form.FormPanel({ title: 'Final Score', items: [{ xtype: 'combo', name: 'game', forceSelection: true, store: currentGamesStore }, { xtype: 'displayfield', fieldLabel: 'Home', name: 'home_score', value: '[select a game]' }, { xtype: 'displayfield', fieldLabel: 'Visitor', name: 'visitor_score', value: '[select a game]' }], buttons: [{ text: 'Update', handler: function() { var formPanel = this.up('form'); formPanel.getForm().load({ url: '/current-scores.php?game=' + formPanel.child('[name=game]').getValue() }); } }] });