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