<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-form-field-Display'>/**
|
</span> * 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'],
|
<span id='Ext-form-field-Display-cfg-fieldSubTpl'> fieldSubTpl: [
|
</span> '<div id="{id}" role="input" ',
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
' class="{fieldCls}">{value}</div>',
|
{
|
compiled: true,
|
disableFormats: true
|
}
|
],
|
|
<span id='Ext-form-field-Display-cfg-readOnly'> /**
|
</span> * @cfg {Boolean} readOnly
|
* @private
|
*/
|
readOnly: true,
|
|
<span id='Ext-form-field-Display-cfg-fieldCls'> /**
|
</span> * @cfg {String} [fieldCls="x-form-display-field"]
|
* The default CSS class for the field.
|
*/
|
fieldCls: Ext.baseCSSPrefix + 'form-display-field',
|
|
<span id='Ext-form-field-Display-cfg-fieldBodyCls'> fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body',
|
</span>
|
<span id='Ext-form-field-Display-cfg-htmlEncode'> /**
|
</span> * @cfg {Boolean} htmlEncode
|
* True to escape HTML in text when rendering it.
|
*/
|
htmlEncode: false,
|
|
<span id='Ext-form-field-Display-cfg-renderer'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-form-field-Display-cfg-scope'> /**
|
</span> * @cfg {Object} scope
|
* The scope to execute the {@link #renderer} function. Defaults to this.
|
*/
|
|
noWrap: false,
|
|
<span id='Ext-form-field-Display-cfg-validateOnChange'> /**
|
</span> * @cfg {Boolean} validateOnChange
|
* @private
|
*/
|
validateOnChange: false,
|
|
<span id='Ext-form-field-Display-method-initEvents'> initEvents: Ext.emptyFn,
|
</span>
|
<span id='Ext-form-field-Display-cfg-submitValue'> submitValue: false,
|
</span>
|
<span id='Ext-form-field-Display-method-isDirty'> isDirty: function(){
|
</span> return false;
|
},
|
|
<span id='Ext-form-field-Display-method-isValid'> isValid: function() {
|
</span> return true;
|
},
|
|
<span id='Ext-form-field-Display-method-validate'> validate: function() {
|
</span> return true;
|
},
|
|
<span id='Ext-form-field-Display-method-getRawValue'> getRawValue: function() {
|
</span> return this.rawValue;
|
},
|
|
<span id='Ext-form-field-Display-method-setRawValue'> setRawValue: function(value) {
|
</span> var me = this;
|
|
value = Ext.value(value, '');
|
me.rawValue = value;
|
if (me.rendered) {
|
me.inputEl.dom.innerHTML = me.getDisplayValue();
|
me.updateLayout();
|
}
|
return value;
|
},
|
|
<span id='Ext-form-field-Display-method-getDisplayValue'> /**
|
</span> * @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;
|
},
|
|
<span id='Ext-form-field-Display-method-getSubTplData'> getSubTplData: function() {
|
</span> var ret = this.callParent(arguments);
|
|
ret.value = this.getDisplayValue();
|
|
return ret;
|
}
|
|
<span id='Ext-form-field-Display-cfg-inputType'> /**
|
</span> * @cfg {String} inputType
|
* @private
|
*/
|
<span id='Ext-form-field-Display-cfg-disabled'> /**
|
</span> * @cfg {Boolean} disabled
|
* @private
|
*/
|
<span id='Ext-form-field-Display-cfg-checkChangeEvents'> /**
|
</span> * @cfg {Number} checkChangeEvents
|
* @private
|
*/
|
<span id='Ext-form-field-Display-cfg-checkChangeBuffer'> /**
|
</span> * @cfg {Number} checkChangeBuffer
|
* @private
|
*/
|
});
|
</pre>
|
</body>
|
</html>
|
