Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Display.html
1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-form.field.Display-method-constructor'><span id='Ext-form.field.Display'>/**
2 </span></span> * @class Ext.form.field.Display
3  * @extends Ext.form.field.Base
4  * &lt;p&gt;A display-only text field which is not validated and not submitted. This is useful for when you want
5  * to display a value from a form's {@link Ext.form.Basic#load loaded data} but do not want to allow the
6  * user to edit or submit that value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains
7  * HTML markup that you do not want to be rendered.&lt;/p&gt;
8  * &lt;p&gt;If you have more complex content, or need to include components within the displayed content, also
9  * consider using a {@link Ext.form.FieldContainer} instead.&lt;/p&gt;
10  * {@img Ext.form.Display/Ext.form.Display.png Ext.form.Display component}
11  * &lt;p&gt;Example:&lt;/p&gt;
12  * &lt;pre&gt;&lt;code&gt;
13     Ext.create('Ext.form.Panel', {
14         width: 175,
15         height: 120,
16         bodyPadding: 10,
17         title: 'Final Score',
18         items: [{
19             xtype: 'displayfield',
20             fieldLabel: 'Home',
21             name: 'home_score',
22             value: '10'
23         }, {
24             xtype: 'displayfield',
25             fieldLabel: 'Visitor',
26             name: 'visitor_score',
27             value: '11'
28         }],
29         buttons: [{
30             text: 'Update',
31         }],
32         renderTo: Ext.getBody()
33     });
34 &lt;/code&gt;&lt;/pre&gt;
35
36  * @constructor
37  * Creates a new DisplayField.
38  * @param {Object} config Configuration options
39  *
40  * @xtype displayfield
41  */
42 Ext.define('Ext.form.field.Display', {
43     extend:'Ext.form.field.Base',
44     alias: 'widget.displayfield',
45     requires: ['Ext.util.Format', 'Ext.XTemplate'],
46     alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
47     fieldSubTpl: [
48         '&lt;div id=&quot;{id}&quot; class=&quot;{fieldCls}&quot;&gt;&lt;/div&gt;',
49         {
50             compiled: true,
51             disableFormats: true
52         }
53     ],
54
55 <span id='Ext-form.field.Display-cfg-fieldCls'>    /**
56 </span>     * @cfg {String} fieldCls The default CSS class for the field (defaults to &lt;tt&gt;&quot;x-form-display-field&quot;&lt;/tt&gt;)
57      */
58     fieldCls: Ext.baseCSSPrefix + 'form-display-field',
59
60 <span id='Ext-form.field.Display-cfg-htmlEncode'>    /**
61 </span>     * @cfg {Boolean} htmlEncode &lt;tt&gt;false&lt;/tt&gt; to skip HTML-encoding the text when rendering it (defaults to
62      * &lt;tt&gt;false&lt;/tt&gt;). This might be useful if you want to include tags in the field's innerHTML rather than
63      * rendering them as string literals per the default logic.
64      */
65     htmlEncode: false,
66
67     validateOnChange: false,
68
69     initEvents: Ext.emptyFn,
70
71     submitValue: false,
72
73     isValid: function() {
74         return true;
75     },
76
77     validate: function() {
78         return true;
79     },
80
81     getRawValue: function() {
82         return this.rawValue;
83     },
84
85     setRawValue: function(value) {
86         var me = this;
87         value = Ext.value(value, '');
88         me.rawValue = value;
89         if (me.rendered) {
90             me.inputEl.dom.innerHTML = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
91         }
92         return value;
93     },
94
95     // private
96     getContentTarget: function() {
97         return this.inputEl;
98     }
99
100 <span id='Ext-form.field.Display-cfg-inputType'>    /**
101 </span>     * @cfg {String} inputType
102      * @hide
103      */
104 <span id='Ext-form.field.Display-cfg-disabled'>    /**
105 </span>     * @cfg {Boolean} disabled
106      * @hide
107      */
108 <span id='Ext-form.field.Display-cfg-readOnly'>    /**
109 </span>     * @cfg {Boolean} readOnly
110      * @hide
111      */
112 <span id='Ext-form.field.Display-cfg-validateOnChange'>    /**
113 </span>     * @cfg {Boolean} validateOnChange
114      * @hide
115      */
116 <span id='Ext-form.field.Display-cfg-checkChangeEvents'>    /**
117 </span>     * @cfg {Number} checkChangeEvents
118      * @hide
119      */
120 <span id='Ext-form.field.Display-cfg-checkChangeBuffer'>    /**
121 </span>     * @cfg {Number} checkChangeBuffer
122      * @hide
123      */
124 });
125 </pre></pre></body></html>