/ext-4.1.0_b3/docs/source/AbstractComponent.html
HTML | 3274 lines | 2906 code | 368 blank | 0 comment | 0 complexity | 619f7b9737cbbd1847c7255d829c703c MD5 | raw file
Large files files are truncated, but you can click here to view the full file
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-AbstractComponent'>/**
19</span> * An abstract base class which provides shared methods for Components across the Sencha product line.
20 *
21 * Please refer to sub class's documentation
22 * @private
23 */
24Ext.define('Ext.AbstractComponent', {
25
26 /* Begin Definitions */
27 requires: [
28 'Ext.ComponentQuery',
29 'Ext.ComponentManager',
30 'Ext.util.ProtoElement'
31 ],
32
33 mixins: {
34 observable: 'Ext.util.Observable',
35 animate: 'Ext.util.Animate',
36 elementCt: 'Ext.util.ElementContainer',
37 renderable: 'Ext.util.Renderable',
38 state: 'Ext.state.Stateful'
39 },
40
41 // The "uses" property specifies class which are used in an instantiated AbstractComponent.
42 // They do *not* have to be loaded before this class may be defined - that is what "requires" is for.
43 uses: [
44 'Ext.PluginManager',
45 'Ext.Element',
46 'Ext.DomHelper',
47 'Ext.XTemplate',
48 'Ext.ComponentQuery',
49 'Ext.ComponentLoader',
50 'Ext.EventManager',
51 'Ext.layout.Context',
52 'Ext.layout.Layout',
53 'Ext.layout.component.Auto',
54 'Ext.LoadMask',
55 'Ext.ZIndexManager'
56 ],
57
58 statics: {
59 AUTO_ID: 1000,
60
61 pendingLayouts: null,
62
63 layoutSuspendCount: 0,
64
65 cancelLayout: function(comp) {
66 var context = this.runningLayoutContext || this.pendingLayouts;
67
68 if (context) {
69 context.cancelComponent(comp);
70 }
71 },
72
73 flushLayouts: function () {
74 var me = this,
75 context = me.pendingLayouts;
76
77 if (context && context.invalidQueue.length) {
78 me.pendingLayouts = null;
79 me.runningLayoutContext = context;
80
81 context.hookMethods({
82 runComplete: function () {
83 // we need to release the layout queue before running any of the
84 // finishedLayout calls because they call afterComponentLayout
85 // which can re-enter by calling doLayout/doComponentLayout.
86 me.runningLayoutContext = null;
87
88 return this.callParent(); // not "me" here!
89 }
90 });
91
92 context.run();
93 }
94 },
95
96 resumeLayouts: function (flush) {
97 if (this.layoutSuspendCount && ! --this.layoutSuspendCount) {
98 if (flush) {
99 this.flushLayouts();
100 }
101 }
102 },
103
104 suspendLayouts: function () {
105 ++this.layoutSuspendCount;
106 },
107
108 updateLayout: function (comp, defer) {
109 var me = this,
110 running = me.runningLayoutContext,
111 pending;
112
113 if (running) {
114 running.queueInvalidate(comp);
115 } else {
116 pending = me.pendingLayouts || (me.pendingLayouts = new Ext.layout.Context());
117 pending.queueInvalidate(comp);
118
119 if (!defer && !me.layoutSuspendCount && !comp.isLayoutSuspended()) {
120 me.flushLayouts();
121 }
122 }
123 }
124 },
125
126 /* End Definitions */
127
128<span id='Ext-AbstractComponent-property-isComponent'> /**
129</span> * @property {Boolean} isComponent
130 * `true` in this class to identify an objact as an instantiated Component, or subclass thereof.
131 */
132 isComponent: true,
133
134<span id='Ext-AbstractComponent-method-getAutoId'> /**
135</span> * @private
136 */
137 getAutoId: function() {
138 this.autoGenId = true;
139 return ++Ext.AbstractComponent.AUTO_ID;
140 },
141
142 deferLayouts: false,
143
144<span id='Ext-AbstractComponent-cfg-id'> /**
145</span> * @cfg {String} id
146 * The **unique id of this component instance.**
147 *
148 * It should not be necessary to use this configuration except for singleton objects in your application. Components
149 * created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.
150 *
151 * Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery}
152 * which provides selector-based searching for Sencha Components analogous to DOM querying. The {@link
153 * Ext.container.Container Container} class contains {@link Ext.container.Container#down shortcut methods} to query
154 * its descendant Components by selector.
155 *
156 * Note that this id will also be used as the element id for the containing HTML element that is rendered to the
157 * page for this component. This allows you to write id-based CSS rules to style the specific instance of this
158 * component uniquely, and also to select sub-elements using this component's id as the parent.
159 *
160 * **Note**: to avoid complications imposed by a unique id also see `{@link #itemId}`.
161 *
162 * **Note**: to access the container of a Component see `{@link #ownerCt}`.
163 *
164 * Defaults to an {@link #getId auto-assigned id}.
165 */
166
167<span id='Ext-AbstractComponent-property-autoGenId'> /**
168</span> * @property {Boolean} autoGenId
169 * `true` indicates an id was auto-generated rather than provided by configuration.
170 * @private
171 */
172 autoGenId: false,
173
174<span id='Ext-AbstractComponent-cfg-itemId'> /**
175</span> * @cfg {String} itemId
176 * An itemId can be used as an alternative way to get a reference to a component when no object reference is
177 * available. Instead of using an `{@link #id}` with {@link Ext}.{@link Ext#getCmp getCmp}, use `itemId` with
178 * {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
179 * `itemId`'s or {@link #id}'s. Since `itemId`'s are an index to the container's internal MixedCollection, the
180 * `itemId` is scoped locally to the container -- avoiding potential conflicts with {@link Ext.ComponentManager}
181 * which requires a **unique** `{@link #id}`.
182 *
183 * var c = new Ext.panel.Panel({ //
184 * {@link Ext.Component#height height}: 300,
185 * {@link #renderTo}: document.body,
186 * {@link Ext.container.Container#layout layout}: 'auto',
187 * {@link Ext.container.Container#cfg-items items}: [
188 * {
189 * itemId: 'p1',
190 * {@link Ext.panel.Panel#title title}: 'Panel 1',
191 * {@link Ext.Component#height height}: 150
192 * },
193 * {
194 * itemId: 'p2',
195 * {@link Ext.panel.Panel#title title}: 'Panel 2',
196 * {@link Ext.Component#height height}: 150
197 * }
198 * ]
199 * })
200 * p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
201 * p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
202 *
203 * Also see {@link #id}, `{@link Ext.container.Container#query}`, `{@link Ext.container.Container#down}` and
204 * `{@link Ext.container.Container#child}`.
205 *
206 * **Note**: to access the container of an item see {@link #ownerCt}.
207 */
208
209<span id='Ext-AbstractComponent-property-ownerCt'> /**
210</span> * @property {Ext.Container} ownerCt
211 * This Component's owner {@link Ext.container.Container Container} (is set automatically
212 * when this Component is added to a Container).
213 *
214 * **Note**: to access items within the Container see {@link #itemId}.
215 * @readonly
216 */
217
218<span id='Ext-AbstractComponent-cfg-autoEl'> /**
219</span> * @cfg {String/Object} autoEl
220 * A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
221 * encapsulate this Component.
222 *
223 * You do not normally need to specify this. For the base classes {@link Ext.Component} and
224 * {@link Ext.container.Container}, this defaults to **'div'**. The more complex Sencha classes use a more
225 * complex DOM structure specified by their own {@link #renderTpl}s.
226 *
227 * This is intended to allow the developer to create application-specific utility Components encapsulated by
228 * different DOM elements. Example usage:
229 *
230 * {
231 * xtype: 'component',
232 * autoEl: {
233 * tag: 'img',
234 * src: 'http://www.example.com/example.jpg'
235 * }
236 * }, {
237 * xtype: 'component',
238 * autoEl: {
239 * tag: 'blockquote',
240 * html: 'autoEl is cool!'
241 * }
242 * }, {
243 * xtype: 'container',
244 * autoEl: 'ul',
245 * cls: 'ux-unordered-list',
246 * items: {
247 * xtype: 'component',
248 * autoEl: 'li',
249 * html: 'First list item'
250 * }
251 * }
252 */
253
254<span id='Ext-AbstractComponent-cfg-renderTpl'> /**
255</span> * @cfg {Ext.XTemplate/String/String[]} renderTpl
256 * An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's encapsulating
257 * {@link #getEl Element}.
258 *
259 * You do not normally need to specify this. For the base classes {@link Ext.Component} and
260 * {@link Ext.container.Container}, this defaults to **`null`** which means that they will be initially rendered
261 * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch
262 * classes which use a more complex DOM structure, provide their own template definitions.
263 *
264 * This is intended to allow the developer to create application-specific utility Components with customized
265 * internal structure.
266 *
267 * Upon rendering, any created child elements may be automatically imported into object properties using the
268 * {@link #renderSelectors} and {@link #childEls} options.
269 * @protected
270 */
271 renderTpl: '{%this.renderContent(out,values)%}',
272
273<span id='Ext-AbstractComponent-cfg-renderData'> /**
274</span> * @cfg {Object} renderData
275 *
276 * The data used by {@link #renderTpl} in addition to the following property values of the component:
277 *
278 * - id
279 * - ui
280 * - uiCls
281 * - baseCls
282 * - componentCls
283 * - frame
284 *
285 * See {@link #renderSelectors} and {@link #childEls} for usage examples.
286 */
287
288<span id='Ext-AbstractComponent-cfg-renderSelectors'> /**
289</span> * @cfg {Object} renderSelectors
290 * An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
291 * created by the render process.
292 *
293 * After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
294 * and the found Elements are added as properties to the Component using the `renderSelector` property name.
295 *
296 * For example, a Component which renderes a title and description into its element:
297 *
298 * Ext.create('Ext.Component', {
299 * renderTo: Ext.getBody(),
300 * renderTpl: [
301 * '<h1 class="title">{title}</h1>',
302 * '<p>{desc}</p>'
303 * ],
304 * renderData: {
305 * title: "Error",
306 * desc: "Something went wrong"
307 * },
308 * renderSelectors: {
309 * titleEl: 'h1.title',
310 * descEl: 'p'
311 * },
312 * listeners: {
313 * afterrender: function(cmp){
314 * // After rendering the component will have a titleEl and descEl properties
315 * cmp.titleEl.setStyle({color: "red"});
316 * }
317 * }
318 * });
319 *
320 * For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the
321 * Component after render), see {@link #childEls} and {@link #addChildEls}.
322 */
323
324<span id='Ext-AbstractComponent-cfg-childEls'> /**
325</span> * @cfg {Object[]} childEls
326 * An array describing the child elements of the Component. Each member of the array
327 * is an object with these properties:
328 *
329 * - `name` - The property name on the Component for the child element.
330 * - `itemId` - The id to combine with the Component's id that is the id of the child element.
331 * - `id` - The id of the child element.
332 *
333 * If the array member is a string, it is equivalent to `{ name: m, itemId: m }`.
334 *
335 * For example, a Component which renders a title and body text:
336 *
337 * Ext.create('Ext.Component', {
338 * renderTo: Ext.getBody(),
339 * renderTpl: [
340 * '<h1 id="{id}-title">{title}</h1>',
341 * '<p>{msg}</p>',
342 * ],
343 * renderData: {
344 * title: "Error",
345 * msg: "Something went wrong"
346 * },
347 * childEls: ["title"],
348 * listeners: {
349 * afterrender: function(cmp){
350 * // After rendering the component will have a title property
351 * cmp.title.setStyle({color: "red"});
352 * }
353 * }
354 * });
355 *
356 * A more flexible, but somewhat slower, approach is {@link #renderSelectors}.
357 */
358
359<span id='Ext-AbstractComponent-cfg-renderTo'> /**
360</span> * @cfg {String/HTMLElement/Ext.Element} renderTo
361 * Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.
362 *
363 * **Notes:**
364 *
365 * Do *not* use this option if the Component is to be a child item of a {@link Ext.container.Container Container}.
366 * It is the responsibility of the {@link Ext.container.Container Container}'s
367 * {@link Ext.container.Container#layout layout manager} to render and manage its child items.
368 *
369 * When using this config, a call to render() is not required.
370 *
371 * See `{@link #render}` also.
372 */
373
374<span id='Ext-AbstractComponent-cfg-frame'> /**
375</span> * @cfg {Boolean} frame
376 * Specify as `true` to have the Component inject framing elements within the Component at render time to provide a
377 * graphical rounded frame around the Component content.
378 *
379 * This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet
380 * Explorer prior to version 9 which do not support rounded corners natively.
381 *
382 * The extra space taken up by this framing is available from the read only property {@link #frameSize}.
383 */
384
385<span id='Ext-AbstractComponent-property-frameSize'> /**
386</span> * @property {Object} frameSize
387 * @readonly
388 * Indicates the width of any framing elements which were added within the encapsulating element
389 * to provide graphical, rounded borders. See the {@link #frame} config.
390 *
391 * This is an object containing the frame width in pixels for all four sides of the Component containing the
392 * following properties:
393 *
394 * @property {Number} frameSize.top The width of the top framing element in pixels.
395 * @property {Number} frameSize.right The width of the right framing element in pixels.
396 * @property {Number} frameSize.bottom The width of the bottom framing element in pixels.
397 * @property {Number} frameSize.left The width of the left framing element in pixels.
398 */
399
400<span id='Ext-AbstractComponent-cfg-componentLayout'> /**
401</span> * @cfg {String/Object} componentLayout
402 * The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout
403 * manager which sizes a Component's internal structure in response to the Component being sized.
404 *
405 * Generally, developers will not use this configuration as all provided Components which need their internal
406 * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.
407 *
408 * The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component
409 * class which simply sizes the Component's encapsulating element to the height and width specified in the
410 * {@link #setSize} method.
411 */
412
413<span id='Ext-AbstractComponent-cfg-tpl'> /**
414</span> * @cfg {Ext.XTemplate/Ext.Template/String/String[]} tpl
415 * An {@link Ext.Template}, {@link Ext.XTemplate} or an array of strings to form an Ext.XTemplate. Used in
416 * conjunction with the `{@link #data}` and `{@link #tplWriteMode}` configurations.
417 */
418
419<span id='Ext-AbstractComponent-cfg-data'> /**
420</span> * @cfg {Object} data
421 * The initial set of data to apply to the `{@link #tpl}` to update the content area of the Component.
422 */
423
424<span id='Ext-AbstractComponent-cfg-xtype'> /**
425</span> * @cfg {String} xtype
426 * This property provides a shorter alternative to creating objects than using a full
427 * class name. Using `xtype` is the most common way to define component instances,
428 * especially in a container. For example, the items in a form containing text fields
429 * could be created explicitly like so:
430 *
431 * items: [
432 * Ext.create('Ext.form.field.Text', {
433 * fieldLabel: 'Foo'
434 * }),
435 * Ext.create('Ext.form.field.Text', {
436 * fieldLabel: 'Bar'
437 * }),
438 * Ext.create('Ext.form.field.Number', {
439 * fieldLabel: 'Num'
440 * })
441 * ]
442 *
443 * But by using `xtype`, the above becomes:
444 *
445 * items: [
446 * {
447 * xtype: 'textfield',
448 * fieldLabel: 'Foo'
449 * },
450 * {
451 * xtype: 'textfield',
452 * fieldLabel: 'Bar'
453 * },
454 * {
455 * xtype: 'numberfield',
456 * fieldLabel: 'Num'
457 * }
458 * ]
459 *
460 * When the `xtype` is common to many items, {@link Ext.container.AbstractContainer#defaultType}
461 * is another way to specify the `xtype` for all items that don't have an explicit `xtype`:
462 *
463 * defaultType: 'textfield',
464 * items: [
465 * { fieldLabel: 'Foo' },
466 * { fieldLabel: 'Bar' },
467 * { fieldLabel: 'Num', xtype: 'numberfield' }
468 * ]
469 *
470 * Each member of the `items` array is now just a "configuration object". These objects
471 * are used to create and configure component instances. A configuration object can be
472 * manually used to instantiate a component using {@link Ext#widget}:
473 *
474 * var text1 = Ext.create('Ext.form.field.Text', {
475 * fieldLabel: 'Foo'
476 * });
477 *
478 * // or alternatively:
479 *
480 * var text1 = Ext.widget({
481 * xtype: 'textfield',
482 * fieldLabel: 'Foo'
483 * });
484 *
485 * This conversion of configuration objects into instantiated components is done when
486 * a container is created as part of its {Ext.container.AbstractContainer#initComponent}
487 * process. As part of the same process, the `items` array is converted from its raw
488 * array form into a {@link Ext.util.MixedCollection} instance.
489 *
490 * You can define your own `xtype` on a custom {@link Ext.Component component} by specifying
491 * the `xtype` property in {@link Ext#define}. For example:
492 *
493 * Ext.define('MyApp.PressMeButton', {
494 * extend: 'Ext.button.Button',
495 * xtype: 'pressmebutton',
496 * text: 'Press Me'
497 * });
498 *
499 * Care should be taken when naming an `xtype` in a custom component because there is
500 * a single, shared scope for all xtypes. Third part components should consider using
501 * a prefix to avoid collisions.
502 *
503 * Ext.define('Foo.form.CoolButton', {
504 * extend: 'Ext.button.Button',
505 * xtype: 'ux-coolbutton',
506 * text: 'Cool!'
507 * });
508 */
509
510<span id='Ext-AbstractComponent-cfg-tplWriteMode'> /**
511</span> * @cfg {String} tplWriteMode
512 * The Ext.(X)Template method to use when updating the content area of the Component.
513 * See `{@link Ext.XTemplate#overwrite}` for information on default mode.
514 */
515 tplWriteMode: 'overwrite',
516
517<span id='Ext-AbstractComponent-cfg-baseCls'> /**
518</span> * @cfg {String} [baseCls='x-component']
519 * The base CSS class to apply to this components's element. This will also be prepended to elements within this
520 * component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and
521 * you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use
522 * componentCls to add specific styling for this component.
523 */
524 baseCls: Ext.baseCSSPrefix + 'component',
525
526<span id='Ext-AbstractComponent-cfg-componentCls'> /**
527</span> * @cfg {String} componentCls
528 * CSS Class to be added to a components root level element to give distinction to it via styling.
529 */
530
531<span id='Ext-AbstractComponent-cfg-cls'> /**
532</span> * @cfg {String} [cls='']
533 * An optional extra CSS class that will be added to this component's Element. This can be useful
534 * for adding customized styles to the component or any of its children using standard CSS rules.
535 */
536
537<span id='Ext-AbstractComponent-cfg-overCls'> /**
538</span> * @cfg {String} [overCls='']
539 * An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,
540 * and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the
541 * component or any of its children using standard CSS rules.
542 */
543
544<span id='Ext-AbstractComponent-cfg-disabledCls'> /**
545</span> * @cfg {String} [disabledCls='x-item-disabled']
546 * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
547 */
548 disabledCls: Ext.baseCSSPrefix + 'item-disabled',
549
550<span id='Ext-AbstractComponent-cfg-ui'> /**
551</span> * @cfg {String/String[]} ui
552 * A set style for a component. Can be a string or an Array of multiple strings (UIs)
553 */
554 ui: 'default',
555
556<span id='Ext-AbstractComponent-cfg-uiCls'> /**
557</span> * @cfg {String[]} uiCls
558 * An array of of classNames which are currently applied to this component
559 * @private
560 */
561 uiCls: [],
562
563<span id='Ext-AbstractComponent-cfg-style'> /**
564</span> * @cfg {String/Object} style
565 * A custom style specification to be applied to this component's Element. Should be a valid argument to
566 * {@link Ext.Element#applyStyles}.
567 *
568 * new Ext.panel.Panel({
569 * title: 'Some Title',
570 * renderTo: Ext.getBody(),
571 * width: 400, height: 300,
572 * layout: 'form',
573 * items: [{
574 * xtype: 'textarea',
575 * style: {
576 * width: '95%',
577 * marginBottom: '10px'
578 * }
579 * },
580 * new Ext.button.Button({
581 * text: 'Send',
582 * minWidth: '100',
583 * style: {
584 * marginBottom: '10px'
585 * }
586 * })
587 * ]
588 * });
589 */
590
591<span id='Ext-AbstractComponent-cfg-width'> /**
592</span> * @cfg {Number} width
593 * The width of this component in pixels.
594 */
595
596<span id='Ext-AbstractComponent-cfg-height'> /**
597</span> * @cfg {Number} height
598 * The height of this component in pixels.
599 */
600
601<span id='Ext-AbstractComponent-cfg-border'> /**
602</span> * @cfg {Number/String} border
603 * Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can
604 * be a CSS style specification for each style, for example: '10 5 3 10'.
605 */
606
607<span id='Ext-AbstractComponent-cfg-padding'> /**
608</span> * @cfg {Number/String} padding
609 * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it
610 * can be a CSS style specification for each style, for example: '10 5 3 10'.
611 */
612
613<span id='Ext-AbstractComponent-cfg-margin'> /**
614</span> * @cfg {Number/String} margin
615 * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can
616 * be a CSS style specification for each style, for example: '10 5 3 10'.
617 */
618
619<span id='Ext-AbstractComponent-cfg-hidden'> /**
620</span> * @cfg {Boolean} hidden
621 * True to hide the component.
622 */
623 hidden: false,
624
625<span id='Ext-AbstractComponent-cfg-disabled'> /**
626</span> * @cfg {Boolean} disabled
627 * True to disable the component.
628 */
629 disabled: false,
630
631<span id='Ext-AbstractComponent-cfg-draggable'> /**
632</span> * @cfg {Boolean} [draggable=false]
633 * Allows the component to be dragged.
634 */
635
636<span id='Ext-AbstractComponent-property-draggable'> /**
637</span> * @property {Boolean} draggable
638 * Indicates whether or not the component can be dragged.
639 * @readonly
640 */
641 draggable: false,
642
643<span id='Ext-AbstractComponent-cfg-floating'> /**
644</span> * @cfg {Boolean} floating
645 * Create the Component as a floating and use absolute positioning.
646 *
647 * The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed
648 * by the global {@link Ext.WindowManager WindowManager}.
649 *
650 * If you include a floating Component as a child item of a Container, then upon render, ExtJS will seek an ancestor floating Component to house a new
651 * ZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used.
652 *
653 * When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed.
654 */
655 floating: false,
656
657<span id='Ext-AbstractComponent-cfg-hideMode'> /**
658</span> * @cfg {String} hideMode
659 * A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:
660 *
661 * - `'display'` : The Component will be hidden using the `display: none` style.
662 * - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.
663 * - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document.
664 * This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a
665 * Component having zero dimensions.
666 */
667 hideMode: 'display',
668
669<span id='Ext-AbstractComponent-cfg-contentEl'> /**
670</span> * @cfg {String} contentEl
671 * Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component.
672 *
673 * This config option is used to take an existing HTML element and place it in the layout element of a new component
674 * (it simply moves the specified DOM element _after the Component is rendered_ to use as the content.
675 *
676 * **Notes:**
677 *
678 * The specified HTML element is appended to the layout element of the component _after any configured
679 * {@link #html HTML} has been inserted_, and so the document will not contain this element at the time
680 * the {@link #render} event is fired.
681 *
682 * The specified HTML element used will not participate in any **`{@link Ext.container.Container#layout layout}`**
683 * scheme that the Component may use. It is just HTML. Layouts operate on child
684 * **`{@link Ext.container.Container#cfg-items items}`**.
685 *
686 * Add either the `x-hidden` or the `x-hide-display` CSS class to prevent a brief flicker of the content before it
687 * is rendered to the panel.
688 */
689
690<span id='Ext-AbstractComponent-cfg-html'> /**
691</span> * @cfg {String/Object} [html='']
692 * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element content.
693 * The HTML content is added after the component is rendered, so the document will not contain this HTML at the time
694 * the {@link #render} event is fired. This content is inserted into the body _before_ any configured {@link #contentEl}
695 * is appended.
696 */
697
698<span id='Ext-AbstractComponent-cfg-styleHtmlContent'> /**
699</span> * @cfg {Boolean} styleHtmlContent
700 * True to automatically style the html inside the content target of this component (body for panels).
701 */
702 styleHtmlContent: false,
703
704<span id='Ext-AbstractComponent-cfg-styleHtmlCls'> /**
705</span> * @cfg {String} [styleHtmlCls='x-html']
706 * The class that is added to the content target when you set styleHtmlContent to true.
707 */
708 styleHtmlCls: Ext.baseCSSPrefix + 'html',
709
710<span id='Ext-AbstractComponent-cfg-minHeight'> /**
711</span> * @cfg {Number} minHeight
712 * The minimum value in pixels which this Component will set its height to.
713 *
714 * **Warning:** This will override any size management applied by layout managers.
715 */
716<span id='Ext-AbstractComponent-cfg-minWidth'> /**
717</span> * @cfg {Number} minWidth
718 * The minimum value in pixels which this Component will set its width to.
719 *
720 * **Warning:** This will override any size management applied by layout managers.
721 */
722<span id='Ext-AbstractComponent-cfg-maxHeight'> /**
723</span> * @cfg {Number} maxHeight
724 * The maximum value in pixels which this Component will set its height to.
725 *
726 * **Warning:** This will override any size management applied by layout managers.
727 */
728<span id='Ext-AbstractComponent-cfg-maxWidth'> /**
729</span> * @cfg {Number} maxWidth
730 * The maximum value in pixels which this Component will set its width to.
731 *
732 * **Warning:** This will override any size management applied by layout managers.
733 */
734
735<span id='Ext-AbstractComponent-cfg-loader'> /**
736</span> * @cfg {Ext.ComponentLoader/Object} loader
737 * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote content for this Component.
738 */
739
740<span id='Ext-AbstractComponent-cfg-autoShow'> /**
741</span> * @cfg {Boolean} autoShow
742 * True to automatically show the component upon creation. This config option may only be used for
743 * {@link #floating} components or components that use {@link #autoRender}. Defaults to false.
744 */
745 autoShow: false,
746
747<span id='Ext-AbstractComponent-cfg-autoRender'> /**
748</span> * @cfg {Boolean/String/HTMLElement/Ext.Element} autoRender
749 * This config is intended mainly for non-{@link #floating} Components which may or may not be shown. Instead of using
750 * {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component to render itself
751 * upon first _{@link #method-show}_. If {@link #floating} is true, the value of this config is omited as if it is `true`.
752 *
753 * Specify as `true` to have this Component render to the document body upon first show.
754 *
755 * Specify as an element, or the ID of an element to have this Component render to a specific element upon first
756 * show.
757 */
758 autoRender: false,
759
760 // @private
761 allowDomMove: true,
762
763<span id='Ext-AbstractComponent-cfg-plugins'> /**
764</span> * @cfg {Object/Object[]} plugins
765 * An object or array of objects that will provide custom functionality for this component. The only requirement for
766 * a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. When a component
767 * is created, if any plugins are available, the component will call the init method on each plugin, passing a
768 * reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide
769 * its functionality.
770 */
771
772<span id='Ext-AbstractComponent-property-rendered'> /**
773</span> * @property {Boolean} rendered
774 * Indicates whether or not the component has been rendered.
775 * @readonly
776 */
777 rendered: false,
778
779<span id='Ext-AbstractComponent-property-componentLayoutCounter'> /**
780</span> * @property {Number} componentLayoutCounter
781 * @private
782 * The number of component layout calls made on this object.
783 */
784 componentLayoutCounter: 0,
785
786<span id='Ext-AbstractComponent-cfg-shrinkWrap'> /**
787</span> * @cfg {Boolean/Number} [shrinkWrap=2]
788 *
789 * If this property is a number, it is interpreted as follows:
790 *
791 * - 0: Neither width nor height depend on content. This is equivalent to `false`.
792 * - 1: Width depends on content (shrink wraps), but height does not.
793 * - 2: Height depends on content (shrink wraps), but width does not. The default.
794 * - 3: Both width and height depend on content (shrink wrap). This is equivalent to `true`.
795 *
796 * In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed
797 * to a block-level element. Some container layouts always shrink-wrap their children,
798 * effectively ignoring this property (e.g., {@link Ext.layout.container.HBox},
799 * {@link Ext.layout.container.VBox}, {@link Ext.layout.component.Dock}).
800 */
801 shrinkWrap: 2,
802
803 weight: 0,
804
805<span id='Ext-AbstractComponent-property-maskOnDisable'> /**
806</span> * @property {Boolean} maskOnDisable
807 * This is an internal flag that you use when creating custom components. By default this is set to true which means
808 * that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab
809 * override this property to false since they want to implement custom disable logic.
810 */
811 maskOnDisable: true,
812
813<span id='Ext-AbstractComponent-property-_isLayoutRoot'> /**
814</span> * @property {Boolean} [_isLayoutRoot=false]
815 * Setting this property to `true` causes the {@link #isLayoutRoot} method to return
816 * `true` and stop the search for the top-most component for a layout.
817 * @protected
818 */
819 _isLayoutRoot: false,
820
821<span id='Ext-AbstractComponent-method-constructor'> /**
822</span> * Creates new Component.
823 * @param {Object} config (optional) Config object.
824 */
825 constructor : function(config) {
826 var me = this,
827 i, len, xhooks;
828
829 if (config) {
830 Ext.apply(me, config);
831
832 xhooks = me.xhooks;
833 if (xhooks) {
834 me.hookMethods(xhooks);
835 delete me.xhooks;
836 }
837 } else {
838 config = {};
839 }
840
841 me.initialConfig = config;
842
843 me.mixins.elementCt.constructor.call(me);
844
845 me.addEvents(
846<span id='Ext-AbstractComponent-event-beforeactivate'> /**
847</span> * @event beforeactivate
848 * Fires before a Component has been visually activated. Returning false from an event listener can prevent
849 * the activate from occurring.
850 * @param {Ext.Component} this
851 */
852 'beforeactivate',
853<span id='Ext-AbstractComponent-event-activate'> /**
854</span> * @event activate
855 * Fires after a Component has been visually activated.
856 * @param {Ext.Component} this
857 */
858 'activate',
859<span id='Ext-AbstractComponent-event-beforedeactivate'> /**
860</span> * @event beforedeactivate
861 * Fires before a Component has been visually deactivated. Returning false from an event listener can
862 * prevent the deactivate from occurring.
863 * @param {Ext.Component} this
864 */
865 'beforedeactivate',
866<span id='Ext-AbstractComponent-event-deactivate'> /**
867</span> * @event deactivate
868 * Fires after a Component has been visually deactivated.
869 * @param {Ext.Component} this
870 */
871 'deactivate',
872<span id='Ext-AbstractComponent-event-added'> /**
873</span> * @event added
874 * Fires after a Component had been added to a Container.
875 * @param {Ext.Component} this
876 * @param {Ext.container.Container} container Parent Container
877 * @param {Number} pos position of Component
878 */
879 'added',
880<span id='Ext-AbstractComponent-event-disable'> /**
881</span> * @event disable
882 * Fires after the component is disabled.
883 * @param {Ext.Component} this
884 */
885 'disable',
886<span id='Ext-AbstractComponent-event-enable'> /**
887</span> * @event enable
888 * Fires after the component is enabled.
889 * @param {Ext.Component} this
890 */
891 'enable',
892<span id='Ext-AbstractComponent-event-beforeshow'> /**
893</span> * @event beforeshow
894 * Fires before the component is shown when calling the {@link #show} method. Return false from an event
895 * handler to stop the show.
896 * @param {Ext.Component} this
897 */
898 'beforeshow',
899<span id='Ext-AbstractComponent-event-show'> /**
900</span> * @event show
901 * Fires after the component is shown when calling the {@link #show} method.
902 * @param {Ext.Component} this
903 */
904 'show',
905<span id='Ext-AbstractComponent-event-beforehide'> /**
906</span> * @event beforehide
907 * Fires before the component is hidden when calling the {@link #hide} method. Return false from an event
908 * handler to stop the hide.
909 * @param {Ext.Component} this
910 */
911 'beforehide',
912<span id='Ext-AbstractComponent-event-hide'> /**
913</span> * @event hide
914 * Fires after the component is hidden. Fires after the component is hidden when calling the {@link #hide}
915 * method.
916 * @param {Ext.Component} this
917 */
918 'hide',
919<span id='Ext-AbstractComponent-event-removed'> /**
920</span> * @event removed
921 * Fires when a component is removed from an Ext.container.Container
922 * @param {Ext.Component} this
923 * @param {Ext.container.Container} ownerCt Container which holds the component
924 */
925 'removed',
926<span id='Ext-AbstractComponent-event-beforerender'> /**
927</span> * @event beforerender
928 * Fires before the component is {@link #rendered}. Return false from an event handler to stop the
929 * {@link #render}.
930 * @param {Ext.Component} this
931 */
932 'beforerender',
933<span id='Ext-AbstractComponent-event-render'> /**
934</span> * @event render
935 * Fires after the component markup is {@link #rendered}.
936 * @param {Ext.Component} this
937 */
938 'render',
939<span id='Ext-AbstractComponent-event-afterrender'> /**
940</span> * @event afterrender
941 * Fires after the component rendering is finished.
942 *
943 * The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed by any
944 * afterRender method defined for the Component.
945 * @param {Ext.Component} this
946 */
947 'afterrender',
948<span id='Ext-AbstractComponent-event-beforedestroy'> /**
949</span> * @event beforedestroy
950 * Fires before the component is {@link #method-destroy}ed. Return false from an event handler to stop the
951 * {@link #method-destroy}.
952 * @param {Ext.Component} this
953 */
954 'beforedestroy',
955<span id='Ext-AbstractComponent-event-destroy'> /**
956</span> * @event destroy
957 * Fires after the component is {@link #method-destroy}ed.
958 * @param {Ext.Component} this
959 */
960 'destroy',
961<span id='Ext-AbstractComponent-event-resize'> /**
962</span> * @event resize
963 * Fires after the component is resized.
964 * @param {Ext.Component} this
965 * @param {Number} width The new width that was set
966 * @param {Number} height The new height that was set
967 * @param {Number} oldWidth The previous width
968 * @param {Number} oldHeight The previous height
969 */
970 'resize',
971<span id='Ext-AbstractComponent-event-move'> /**
972</span> * @event move
973 * Fires after the component is moved.
974 * @param {Ext.Component} this
975 * @param {Number} x The new x position
976 * @param {Number} y The new y position
977 */
978 'move',
979<span id='Ext-AbstractComponent-event-focus'> /**
980</span> * @event focus
981 * Fires when this Component receives focus.
982 * @param {Ext.Component} this
983 * @param {Ext.EventObject} The focus event.
984 */
985 'focus',
986<span id='Ext-AbstractComponent-event-blur'> /**
987</span> * @event blur
988 * Fires when this Component loses focus.
989 * @param {Ext.Component} this
990 * @param {Ext.EventObject} The blur event.
991 */
992 'blur'
993 );
994
995 me.getId();
996
997 me.setupProtoEl();
998
999 // initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up
1000 // so we must apply styles and classes here too.
1001 if (me.cls) {
1002 me.initialCls = me.cls;
1003 me.protoEl.addCls(me.cls);
1004 }
1005 if (me.style) {
1006 me.initialStyle = me.style;
1007 me.protoEl.setStyle(me.style);
1008 }
1009
1010 me.mons = [];
1011 me.renderData = me.renderData || {};
1012 me.renderSelectors = me.renderSelectors || {};
1013
1014 if (me.plugins) {
1015 me.plugins = [].concat(me.plugins);
1016 me.constructPlugins();
1017 }
1018
1019 // Hash of event "hasListeners" flags.
1020 // For repeated events in time-critical code, the firing code should use
1021 // if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) { //code... }
1022 // Bubbling the events counts as one listener. initComponent may add listeners, so needs setting up now.
1023 me.hasListeners = {};
1024
1025 me.initComponent();
1026
1027 // ititComponent gets a chance to change the id property before registering
1028 Ext.ComponentManager.register(me);
1029
1030 // Dont pass the config so that it is not applied to 'this' again
1031 me.mixins.observable.constructor.call(me);
1032 me.mixins.state.constructor.call(me, config);
1033
1034 // Save state on resize.
1035 this.addStateEvents('resize');
1036
1037 // Move this into Observable?
1038 if (me.plugins) {
1039 me.plugins = [].concat(me.plugins);
1040 for (i = 0, len = me.plugins.length; i < len; i++) {
1041 me.plugins[i] = me.initPlugin(me.plugins[i]);
1042 }
1043 }
1044
1045 me.loader = me.getLoader();
1046
1047 if (me.renderTo) {
1048 me.render(me.renderTo);
1049 // EXTJSIV-1935 - should be a way to do afterShow or something, but that
1050 // won't work. Likewise, rendering hidden and then showing (w/autoShow) has
1051 // implications to afterRender so we cannot do that.
1052 }
1053
1054 if (me.autoShow) {
1055 me.show();
1056 }
1057
1058 //<debug>
1059 if (Ext.isDefined(me.disabledClass)) {
1060 if (Ext.isDefined(Ext.global.console)) {
1061 Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');
1062 }
1063 me.disabledCls = me.disabledClass;
1064 delete me.disabledClass;
1065 }
1066 //</debug>
1067 },
1068
1069 initComponent: function () {
1070 // This is called again here to allow derived classes to add plugin configs to the
1071 // plugins array before calling down to this, the base initComponent.
1072 this.constructPlugins();
1073
1074 // this will properly (ignore or) constrain the configured width/height to their
1075 // min/max values for consistency.
1076 this.setSize(this.width, this.height);
1077 },
1078
1079<span id='Ext-AbstractComponent-method-getState'> /**
1080</span> * The supplied default state gathering method for the AbstractComponent class.
1081 *
1082 * This method returns dimension settings such as `flex`, `anchor`, `width` and `height` along with `collapsed`
1083 * state.
1084 *
1085 * Subclasses which implement more complex state should call the superclass's implementation, and apply their state
1086 * to the result if this basic state is to be saved.
1087 *
1088 * Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider
1089 * configured for the document.
1090 *
1091 * @return {Object}
1092 */
1093 getState: function() {
1094 var me = this,
1095 state = null,
1096 sizeModel = me.getSizeModel();
1097
1098 if (sizeModel.width.configured) {
1099 state = me.addPropertyToState(state, 'width');
1100 }
1101 if (sizeModel.height.configured) {
1102 state = me.addPropertyToState(state, 'height');
1103 }
1104
1105 return state;
1106 },
1107
1108<span id='Ext-AbstractComponent-method-addPropertyToState'> /**
1109</span> * Save a property to the given state object if it is not its default or configured
1110 * value.
1111 *
1112 * @param {Object} state The state object
1113 * @param {String} propName The name of the property on this object to save.
1114 * @param {String} [value] The value of the state property (defaults to `this[propName]`).
1115 * @return {Boolean} The state object or a new object if state was null and the property
1116 * was saved.
1117 * @protected
1118 */
1119 addPropertyToState: function (state, propName, value) {
1120 var me = this,
1121 len = arguments.length;
1122
1123 // If the property is inherited, it is a default and we don't want to save it to
1124 // the state, however if we explicitly specify a value, always save it
1125 if (len == 3 || me.hasOwnProperty(propName)) {
1126 if (len < 3) {
1127 value = me[propName];
1128 }
1129
1130 // If the property has the same value as was initially configured, again, we
1131 // don't want to save it.
1132 if (value !== me.initialConfig[propName]) {
1133 (state || (state = {}))[propName] = value;
1134 }
1135 }
1136
1137 return state;
1138 },
1139
1140 show: Ext.emptyFn,
1141
1142 animate: function(animObj) {
1143 var me = this,
1144 hasToWidth,
1145 hasToHeight,
1146 toHeight,
1147 toWidth,
1148 to,
1149 clearWidth,
1150 clearHeight;
1151
1152 animObj = animObj || {};
1153 to = animObj.to || {};
1154
1155 if (Ext.fx.Manager.hasFxBlock(me.id)) {
1156 return me;
1157 }
1158
1159 hasToWidth = Ext.isDefined(to.width);
1160 if (hasToWidth) {
1161 toWidth = Ext.Number.constrain(to.width, me.minWidth, me.maxWidth);
1162 }
1163
1164 hasToHeight = Ext.isDefined(to.height);
1165 if (hasToHeight) {
1166 toHeight = Ext.Number.constrain(to.height, me.minHeight, me.maxHeight);
1167 }
1168
1169 // Special processing for animating Component dimensions.
1170 if (!animObj.dynamic && (hasToWidth || hasToHeight)) {
1171 var curWidth = (animObj.from ? animObj.from.width : undefined) || me.getWidth(),
1172 w = curWidth,
1173 curHeight = (animObj.from ? animObj.from.height : undefined) || me.getHeight(),
1174 h = curHeight,
1175 needsResize = false;
1176
1177 if (hasToHeight && toHeight > curHeight) {
1178 h = toHeight;
1179 needsResize = true;
1180 }
1181 if (hasToWidth && toWidth > curWidth) {
1182 w = toWidth;
1183 needsResize = true;
1184 }
1185
1186 // If any dimensions are being increased, we must resize the internal structure
1187 // of the Component, but then clip it by sizing its encapsulating element back to original dimensions.
1188 // The animation will then progressively reveal the larger content.
1189 if (needsResize) {
1190 clearWidth = !Ext.isNumber(me.width);
1191 clearHeight = !Ext.isNumber(me.height);
1192
1193…Large files files are truncated, but you can click here to view the full file