/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* 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: 120,
* 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',
requires: ['Ext.util.Format', 'Ext.XTemplate'],
alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
fieldSubTpl: [
'<div id="{id}" role="input" ',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls}">{value}</div>',
{
compiled: true,
disableFormats: true
}
],
/**
* @cfg {Boolean} readOnly
* @private
*/
readOnly: true,
/**
* @cfg {String} [fieldCls="x-form-display-field"]
* The default CSS class for the field.
*/
fieldCls: Ext.baseCSSPrefix + 'form-display-field',
fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body',
/**
* @cfg {Boolean} htmlEncode
* True to escape HTML in text when rendering it.
*/
htmlEncode: false,
/**
* @cfg {Function} renderer
* A function to transform the raw value for display in the field. The function will receive 2 arguments, the raw value
* and the {@link Ext.form.field.Display} object.
*/
/**
* @cfg {Object} scope
* The scope to execute the {@link #renderer} function. Defaults to this.
*/
noWrap: false,
/**
* @cfg {Boolean} validateOnChange
* @private
*/
validateOnChange: false,
initEvents: Ext.emptyFn,
submitValue: false,
isDirty: function(){
return 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.getDisplayValue();
me.updateLayout();
}
return value;
},
/**
* @private
* Format the value to display.
*/
getDisplayValue: function() {
var me = this,
value = this.getRawValue(),
display;
if (me.renderer) {
display = me.renderer.call(me.scope || me, value, me);
} else {
display = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
}
return display;
},
getSubTplData: function() {
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
*/
});
|
Download
