/ext-4.0.7/docs/source/Component.html
HTML | 1173 lines | 1050 code | 123 blank | 0 comment | 0 complexity | ff20bb1f760be3fab4908d3c6262a1a6 MD5 | raw 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-Component'>/**
19</span> * Base class for all Ext components. All subclasses of Component may participate in the automated Ext component
20 * lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
21 * class. Components may be added to a Container through the {@link Ext.container.Container#items items} config option
22 * at the time the Container is created, or they may be added dynamically via the
23 * {@link Ext.container.Container#add add} method.
24 *
25 * The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
26 *
27 * All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
28 * any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
29 *
30 * All user-developed visual widgets that are required to participate in automated lifecycle and size management should
31 * subclass Component.
32 *
33 * See the [Creating new UI controls][1] tutorial for details on how and to either extend or augment ExtJs base classes
34 * to create custom Components.
35 *
36 * Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
37 * like {@link #getXType} and {@link #isXType}. See the [Component Guide][2] for more information on xtypes and the
38 * Component hierarchy.
39 *
40 * This is the list of all valid xtypes:
41 *
42 * xtype Class
43 * ------------- ------------------
44 * button {@link Ext.button.Button}
45 * buttongroup {@link Ext.container.ButtonGroup}
46 * colorpalette {@link Ext.picker.Color}
47 * component {@link Ext.Component}
48 * container {@link Ext.container.Container}
49 * cycle {@link Ext.button.Cycle}
50 * dataview {@link Ext.view.View}
51 * datepicker {@link Ext.picker.Date}
52 * editor {@link Ext.Editor}
53 * editorgrid {@link Ext.grid.plugin.Editing}
54 * grid {@link Ext.grid.Panel}
55 * multislider {@link Ext.slider.Multi}
56 * panel {@link Ext.panel.Panel}
57 * progressbar {@link Ext.ProgressBar}
58 * slider {@link Ext.slider.Single}
59 * splitbutton {@link Ext.button.Split}
60 * tabpanel {@link Ext.tab.Panel}
61 * treepanel {@link Ext.tree.Panel}
62 * viewport {@link Ext.container.Viewport}
63 * window {@link Ext.window.Window}
64 *
65 * Toolbar components
66 * ---------------------------------------
67 * pagingtoolbar {@link Ext.toolbar.Paging}
68 * toolbar {@link Ext.toolbar.Toolbar}
69 * tbfill {@link Ext.toolbar.Fill}
70 * tbitem {@link Ext.toolbar.Item}
71 * tbseparator {@link Ext.toolbar.Separator}
72 * tbspacer {@link Ext.toolbar.Spacer}
73 * tbtext {@link Ext.toolbar.TextItem}
74 *
75 * Menu components
76 * ---------------------------------------
77 * menu {@link Ext.menu.Menu}
78 * menucheckitem {@link Ext.menu.CheckItem}
79 * menuitem {@link Ext.menu.Item}
80 * menuseparator {@link Ext.menu.Separator}
81 * menutextitem {@link Ext.menu.Item}
82 *
83 * Form components
84 * ---------------------------------------
85 * form {@link Ext.form.Panel}
86 * checkbox {@link Ext.form.field.Checkbox}
87 * combo {@link Ext.form.field.ComboBox}
88 * datefield {@link Ext.form.field.Date}
89 * displayfield {@link Ext.form.field.Display}
90 * field {@link Ext.form.field.Base}
91 * fieldset {@link Ext.form.FieldSet}
92 * hidden {@link Ext.form.field.Hidden}
93 * htmleditor {@link Ext.form.field.HtmlEditor}
94 * label {@link Ext.form.Label}
95 * numberfield {@link Ext.form.field.Number}
96 * radio {@link Ext.form.field.Radio}
97 * radiogroup {@link Ext.form.RadioGroup}
98 * textarea {@link Ext.form.field.TextArea}
99 * textfield {@link Ext.form.field.Text}
100 * timefield {@link Ext.form.field.Time}
101 * trigger {@link Ext.form.field.Trigger}
102 *
103 * Chart components
104 * ---------------------------------------
105 * chart {@link Ext.chart.Chart}
106 * barchart {@link Ext.chart.series.Bar}
107 * columnchart {@link Ext.chart.series.Column}
108 * linechart {@link Ext.chart.series.Line}
109 * piechart {@link Ext.chart.series.Pie}
110 *
111 * It should not usually be necessary to instantiate a Component because there are provided subclasses which implement
112 * specialized Component use cases which cover most application needs. However it is possible to instantiate a base
113 * Component, and it will be renderable, or will particpate in layouts as the child item of a Container:
114 *
115 * @example
116 * Ext.create('Ext.Component', {
117 * html: 'Hello world!',
118 * width: 300,
119 * height: 200,
120 * padding: 20,
121 * style: {
122 * color: '#FFFFFF',
123 * backgroundColor:'#000000'
124 * },
125 * renderTo: Ext.getBody()
126 * });
127 *
128 * The Component above creates its encapsulating `div` upon render, and use the configured HTML as content. More complex
129 * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived
130 * mass data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View}, or {@link
131 * Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
132 *
133 * [1]: http://sencha.com/learn/Tutorial:Creating_new_UI_controls
134 */
135Ext.define('Ext.Component', {
136
137 /* Begin Definitions */
138
139 alias: ['widget.component', 'widget.box'],
140
141 extend: 'Ext.AbstractComponent',
142
143 requires: [
144 'Ext.util.DelayedTask'
145 ],
146
147 uses: [
148 'Ext.Layer',
149 'Ext.resizer.Resizer',
150 'Ext.util.ComponentDragger'
151 ],
152
153 mixins: {
154 floating: 'Ext.util.Floating'
155 },
156
157 statics: {
158 // Collapse/expand directions
159 DIRECTION_TOP: 'top',
160 DIRECTION_RIGHT: 'right',
161 DIRECTION_BOTTOM: 'bottom',
162 DIRECTION_LEFT: 'left',
163
164 VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
165
166 // RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.
167 // This includes dot, comma and whitespace
168 INVALID_ID_CHARS_Re: /[\.,\s]/g
169 },
170
171 /* End Definitions */
172
173<span id='Ext-Component-cfg-resizable'> /**
174</span> * @cfg {Boolean/Object} resizable
175 * Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering.
176 *
177 * May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}
178 * to override any defaults. By default the Component passes its minimum and maximum size, and uses
179 * `{@link Ext.resizer.Resizer#dynamic}: false`
180 */
181
182<span id='Ext-Component-cfg-resizeHandles'> /**
183</span> * @cfg {String} resizeHandles
184 * A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true.
185 */
186 resizeHandles: 'all',
187
188<span id='Ext-Component-cfg-autoScroll'> /**
189</span> * @cfg {Boolean} [autoScroll=false]
190 * `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,
191 * `false` to clip any overflowing content.
192 */
193
194<span id='Ext-Component-cfg-floating'> /**
195</span> * @cfg {Boolean} floating
196 * Specify as true to float the Component outside of the document flow using CSS absolute positioning.
197 *
198 * Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default.
199 *
200 * Floating Components that are programatically {@link Ext.Component#render rendered} will register themselves with
201 * the global {@link Ext.WindowManager ZIndexManager}
202 *
203 * ### Floating Components as child items of a Container
204 *
205 * A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
206 * a ZIndexManager by examining the ownerCt chain.
207 *
208 * When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which
209 * manages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top
210 * of its stack when the Component's {@link #toFront} method is called.
211 *
212 * The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is
213 * floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown
214 * within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating
215 * ancestor Container.
216 *
217 * If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager
218 * ZIndexManager}.
219 *
220 * Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until
221 * you explicitly {@link #show} them.
222 *
223 * After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found
224 * floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will
225 * not be set.
226 */
227 floating: false,
228
229<span id='Ext-Component-cfg-toFrontOnShow'> /**
230</span> * @cfg {Boolean} toFrontOnShow
231 * True to automatically call {@link #toFront} when the {@link #show} method is called on an already visible,
232 * floating component.
233 */
234 toFrontOnShow: true,
235
236<span id='Ext-Component-property-zIndexManager'> /**
237</span> * @property {Ext.ZIndexManager} zIndexManager
238 * Only present for {@link #floating} Components after they have been rendered.
239 *
240 * A reference to the ZIndexManager which is managing this Component's z-index.
241 *
242 * The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides
243 * a single modal mask which is insert just beneath the topmost visible modal floating Component.
244 *
245 * Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the
246 * z-index stack.
247 *
248 * This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are
249 * programatically {@link Ext.Component#render rendered}.
250 *
251 * For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first
252 * ancestor Container found which is floating, or if not found the global {@link Ext.WindowManager ZIndexManager} is
253 * used.
254 *
255 * See {@link #floating} and {@link #floatParent}
256 */
257
258<span id='Ext-Component-property-floatParent'> /**
259</span> * @property {Ext.Container} floatParent
260 * Only present for {@link #floating} Components which were inserted as descendant items of floating Containers.
261 *
262 * Floating Components that are programatically {@link Ext.Component#render rendered} will not have a `floatParent`
263 * property.
264 *
265 * For {@link #floating} Components which are child items of a Container, the floatParent will be the floating
266 * ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides
267 * a {@link Ext.ZIndexManager ZIndexManager} which provides z-indexing services for all its descendant floating
268 * Components.
269 *
270 * For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the
271 * Window as its `floatParent`
272 *
273 * See {@link #floating} and {@link #zIndexManager}
274 */
275
276<span id='Ext-Component-cfg-draggable'> /**
277</span> * @cfg {Boolean/Object} [draggable=false]
278 * Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as
279 * the drag handle.
280 *
281 * This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is
282 * instantiated to perform dragging.
283 *
284 * For example to create a Component which may only be dragged around using a certain internal element as the drag
285 * handle, use the delegate option:
286 *
287 * new Ext.Component({
288 * constrain: true,
289 * floating: true,
290 * style: {
291 * backgroundColor: '#fff',
292 * border: '1px solid black'
293 * },
294 * html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
295 * draggable: {
296 * delegate: 'h1'
297 * }
298 * }).show();
299 */
300
301<span id='Ext-Component-cfg-maintainFlex'> /**
302</span> * @cfg {Boolean} [maintainFlex=false]
303 * **Only valid when a sibling element of a {@link Ext.resizer.Splitter Splitter} within a
304 * {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox} layout.**
305 *
306 * Specifies that if an immediate sibling Splitter is moved, the Component on the *other* side is resized, and this
307 * Component maintains its configured {@link Ext.layout.container.Box#flex flex} value.
308 */
309
310 hideMode: 'display',
311 // Deprecate 5.0
312 hideParent: false,
313
314 ariaRole: 'presentation',
315
316 bubbleEvents: [],
317
318 actionMode: 'el',
319 monPropRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
320
321 //renderTpl: new Ext.XTemplate(
322 // '<div id="{id}" class="{baseCls} {cls} {cmpCls}<tpl if="typeof ui !== \'undefined\'"> {uiBase}-{ui}</tpl>"<tpl if="typeof style !== \'undefined\'"> style="{style}"</tpl>></div>', {
323 // compiled: true,
324 // disableFormats: true
325 // }
326 //),
327
328<span id='Ext-Component-method-constructor'> /**
329</span> * Creates new Component.
330 * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
331 *
332 * - **an element** : it is set as the internal element and its id used as the component id
333 * - **a string** : it is assumed to be the id of an existing element and is used as the component id
334 * - **anything else** : it is assumed to be a standard config object and is applied to the component
335 */
336 constructor: function(config) {
337 var me = this;
338
339 config = config || {};
340 if (config.initialConfig) {
341
342 // Being initialized from an Ext.Action instance...
343 if (config.isAction) {
344 me.baseAction = config;
345 }
346 config = config.initialConfig;
347 // component cloning / action set up
348 }
349 else if (config.tagName || config.dom || Ext.isString(config)) {
350 // element object
351 config = {
352 applyTo: config,
353 id: config.id || config
354 };
355 }
356
357 me.callParent([config]);
358
359 // If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
360 // register this Component as one of its items
361 if (me.baseAction){
362 me.baseAction.addComponent(me);
363 }
364 },
365
366<span id='Ext-Component-method-initComponent'> /**
367</span> * The initComponent template method is an important initialization step for a Component. It is intended to be
368 * implemented by each subclass of Ext.Component to provide any needed constructor logic. The
369 * initComponent method of the class being created is called first, with each initComponent method
370 * up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,
371 * if needed, override the constructor logic of the Component at any step in the hierarchy.
372 *
373 * The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order
374 * to ensure that the parent class' initComponent method is also called.
375 *
376 * The following example demonstrates using a dynamic string for the text of a button at the time of
377 * instantiation of the class.
378 *
379 * Ext.define('DynamicButtonText', {
380 * extend: 'Ext.button.Button',
381 *
382 * initComponent: function() {
383 * this.text = new Date();
384 * this.renderTo = Ext.getBody();
385 * this.callParent();
386 * }
387 * });
388 *
389 * Ext.onReady(function() {
390 * Ext.create('DynamicButtonText');
391 * });
392 *
393 * @template
394 */
395 initComponent: function() {
396 var me = this;
397
398 me.callParent();
399
400 if (me.listeners) {
401 me.on(me.listeners);
402 delete me.listeners;
403 }
404 me.enableBubble(me.bubbleEvents);
405 me.mons = [];
406 },
407
408 // private
409 afterRender: function() {
410 var me = this,
411 resizable = me.resizable;
412
413 if (me.floating) {
414 me.makeFloating(me.floating);
415 } else {
416 me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
417 }
418
419 if (Ext.isDefined(me.autoScroll)) {
420 me.setAutoScroll(me.autoScroll);
421 }
422 me.callParent();
423
424 if (!(me.x && me.y) && (me.pageX || me.pageY)) {
425 me.setPagePosition(me.pageX, me.pageY);
426 }
427
428 if (resizable) {
429 me.initResizable(resizable);
430 }
431
432 if (me.draggable) {
433 me.initDraggable();
434 }
435
436 me.initAria();
437 },
438
439 initAria: function() {
440 var actionEl = this.getActionEl(),
441 role = this.ariaRole;
442 if (role) {
443 actionEl.dom.setAttribute('role', role);
444 }
445 },
446
447<span id='Ext-Component-method-setAutoScroll'> /**
448</span> * Sets the overflow on the content element of the component.
449 * @param {Boolean} scroll True to allow the Component to auto scroll.
450 * @return {Ext.Component} this
451 */
452 setAutoScroll : function(scroll){
453 var me = this,
454 targetEl;
455 scroll = !!scroll;
456 if (me.rendered) {
457 targetEl = me.getTargetEl();
458 targetEl.setStyle('overflow', scroll ? 'auto' : '');
459 if (scroll && (Ext.isIE6 || Ext.isIE7)) {
460 // The scrollable container element must be non-statically positioned or IE6/7 will make
461 // positioned children stay in place rather than scrolling with the rest of the content
462 targetEl.position();
463 }
464 }
465 me.autoScroll = scroll;
466 return me;
467 },
468
469 // private
470 makeFloating : function(cfg){
471 this.mixins.floating.constructor.call(this, cfg);
472 },
473
474 initResizable: function(resizable) {
475 var me = this;
476
477 resizable = Ext.apply({
478 target: me,
479 dynamic: false,
480 constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent()),
481 handles: me.resizeHandles
482 }, resizable);
483 resizable.target = me;
484 me.resizer = Ext.create('Ext.resizer.Resizer', resizable);
485 },
486
487 getDragEl: function() {
488 return this.el;
489 },
490
491 initDraggable: function() {
492 var me = this,
493 ddConfig = Ext.applyIf({
494 el: me.getDragEl(),
495 constrainTo: me.constrain ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent())) : undefined
496 }, me.draggable);
497
498 // Add extra configs if Component is specified to be constrained
499 if (me.constrain || me.constrainDelegate) {
500 ddConfig.constrain = me.constrain;
501 ddConfig.constrainDelegate = me.constrainDelegate;
502 }
503
504 me.dd = Ext.create('Ext.util.ComponentDragger', me, ddConfig);
505 },
506
507<span id='Ext-Component-method-setPosition'> /**
508</span> * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}. This
509 * method fires the {@link #move} event.
510 * @param {Number} left The new left
511 * @param {Number} top The new top
512 * @param {Boolean/Object} [animate] If true, the Component is _animated_ into its new position. You may also pass an
513 * animation configuration.
514 * @return {Ext.Component} this
515 */
516 setPosition: function(x, y, animate) {
517 var me = this,
518 el = me.el,
519 to = {},
520 adj, adjX, adjY, xIsNumber, yIsNumber;
521
522 if (Ext.isArray(x)) {
523 animate = y;
524 y = x[1];
525 x = x[0];
526 }
527 me.x = x;
528 me.y = y;
529
530 if (!me.rendered) {
531 return me;
532 }
533
534 adj = me.adjustPosition(x, y);
535 adjX = adj.x;
536 adjY = adj.y;
537 xIsNumber = Ext.isNumber(adjX);
538 yIsNumber = Ext.isNumber(adjY);
539
540 if (xIsNumber || yIsNumber) {
541 if (animate) {
542 if (xIsNumber) {
543 to.left = adjX;
544 }
545 if (yIsNumber) {
546 to.top = adjY;
547 }
548
549 me.stopAnimation();
550 me.animate(Ext.apply({
551 duration: 1000,
552 listeners: {
553 afteranimate: Ext.Function.bind(me.afterSetPosition, me, [adjX, adjY])
554 },
555 to: to
556 }, animate));
557 }
558 else {
559 if (!xIsNumber) {
560 el.setTop(adjY);
561 }
562 else if (!yIsNumber) {
563 el.setLeft(adjX);
564 }
565 else {
566 el.setLeftTop(adjX, adjY);
567 }
568 me.afterSetPosition(adjX, adjY);
569 }
570 }
571 return me;
572 },
573
574<span id='Ext-Component-method-afterSetPosition'> /**
575</span> * @private
576 * @template
577 * Template method called after a Component has been positioned.
578 */
579 afterSetPosition: function(ax, ay) {
580 this.onPosition(ax, ay);
581 this.fireEvent('move', this, ax, ay);
582 },
583
584<span id='Ext-Component-method-showAt'> /**
585</span> * Displays component at specific xy position.
586 * A floating component (like a menu) is positioned relative to its ownerCt if any.
587 * Useful for popping up a context menu:
588 *
589 * listeners: {
590 * itemcontextmenu: function(view, record, item, index, event, options) {
591 * Ext.create('Ext.menu.Menu', {
592 * width: 100,
593 * height: 100,
594 * margin: '0 0 10 0',
595 * items: [{
596 * text: 'regular item 1'
597 * },{
598 * text: 'regular item 2'
599 * },{
600 * text: 'regular item 3'
601 * }]
602 * }).showAt(event.getXY());
603 * }
604 * }
605 *
606 * @param {Number} x The new x position
607 * @param {Number} y The new y position
608 * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
609 * animation configuration.
610 */
611 showAt: function(x, y, animate) {
612 var me = this;
613
614 if (me.floating) {
615 me.setPosition(x, y, animate);
616 } else {
617 me.setPagePosition(x, y, animate);
618 }
619 me.show();
620 },
621
622<span id='Ext-Component-method-setPagePosition'> /**
623</span> * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
624 * This method fires the {@link #move} event.
625 * @param {Number} x The new x position
626 * @param {Number} y The new y position
627 * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
628 * animation configuration.
629 * @return {Ext.Component} this
630 */
631 setPagePosition: function(x, y, animate) {
632 var me = this,
633 p;
634
635 if (Ext.isArray(x)) {
636 y = x[1];
637 x = x[0];
638 }
639 me.pageX = x;
640 me.pageY = y;
641 if (me.floating && me.floatParent) {
642 // Floating Components being positioned in their ownerCt have to be made absolute
643 p = me.floatParent.getTargetEl().getViewRegion();
644 if (Ext.isNumber(x) && Ext.isNumber(p.left)) {
645 x -= p.left;
646 }
647 if (Ext.isNumber(y) && Ext.isNumber(p.top)) {
648 y -= p.top;
649 }
650 me.setPosition(x, y, animate);
651 }
652 else {
653 p = me.el.translatePoints(x, y);
654 me.setPosition(p.left, p.top, animate);
655 }
656 return me;
657 },
658
659<span id='Ext-Component-method-getBox'> /**
660</span> * Gets the current box measurements of the component's underlying element.
661 * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
662 * @return {Object} box An object in the format {x, y, width, height}
663 */
664 getBox : function(local){
665 var pos = this.getPosition(local),
666 size = this.getSize();
667
668 size.x = pos[0];
669 size.y = pos[1];
670 return size;
671 },
672
673<span id='Ext-Component-method-updateBox'> /**
674</span> * Sets the current box measurements of the component's underlying element.
675 * @param {Object} box An object in the format {x, y, width, height}
676 * @return {Ext.Component} this
677 */
678 updateBox : function(box){
679 this.setSize(box.width, box.height);
680 this.setPagePosition(box.x, box.y);
681 return this;
682 },
683
684 // Include margins
685 getOuterSize: function() {
686 var el = this.el;
687 return {
688 width: el.getWidth() + el.getMargin('lr'),
689 height: el.getHeight() + el.getMargin('tb')
690 };
691 },
692
693 // private
694 adjustPosition: function(x, y) {
695
696 // Floating Components being positioned in their ownerCt have to be made absolute
697 if (this.floating && this.floatParent) {
698 var o = this.floatParent.getTargetEl().getViewRegion();
699 x += o.left;
700 y += o.top;
701 }
702
703 return {
704 x: x,
705 y: y
706 };
707 },
708
709<span id='Ext-Component-method-getPosition'> /**
710</span> * Gets the current XY position of the component's underlying element.
711 * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
712 * @return {Number[]} The XY position of the element (e.g., [100, 200])
713 */
714 getPosition: function(local) {
715 var me = this,
716 el = me.el,
717 xy,
718 o;
719
720 // Floating Components which were just rendered with no ownerCt return local position.
721 if ((local === true) || (me.floating && !me.floatParent)) {
722 return [el.getLeft(true), el.getTop(true)];
723 }
724 xy = me.xy || el.getXY();
725
726 // Floating Components in an ownerCt have to have their positions made relative
727 if (me.floating) {
728 o = me.floatParent.getTargetEl().getViewRegion();
729 xy[0] -= o.left;
730 xy[1] -= o.top;
731 }
732 return xy;
733 },
734
735 getId: function() {
736 var me = this,
737 xtype;
738
739 if (!me.id) {
740 xtype = me.getXType();
741 xtype = xtype ? xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-') : 'ext-comp';
742 me.id = xtype + '-' + me.getAutoId();
743 }
744 return me.id;
745 },
746
747 onEnable: function() {
748 var actionEl = this.getActionEl();
749 actionEl.dom.removeAttribute('aria-disabled');
750 actionEl.dom.disabled = false;
751 this.callParent();
752 },
753
754 onDisable: function() {
755 var actionEl = this.getActionEl();
756 actionEl.dom.setAttribute('aria-disabled', true);
757 actionEl.dom.disabled = true;
758 this.callParent();
759 },
760
761<span id='Ext-Component-method-show'> /**
762</span> * Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are `true`.
763 *
764 * After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and
765 * brought to the front of its {@link #zIndexManager z-index stack}.
766 *
767 * @param {String/Ext.Element} [animateTarget=null] **only valid for {@link #floating} Components such as {@link
768 * Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured
769 * with `floating: true`.** The target from which the Component should animate from while opening.
770 * @param {Function} [callback] A callback function to call after the Component is displayed.
771 * Only necessary if animation was specified.
772 * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
773 * Defaults to this Component.
774 * @return {Ext.Component} this
775 */
776 show: function(animateTarget, cb, scope) {
777 var me = this;
778
779 if (me.rendered && me.isVisible()) {
780 if (me.toFrontOnShow && me.floating) {
781 me.toFront();
782 }
783 } else if (me.fireEvent('beforeshow', me) !== false) {
784 me.hidden = false;
785
786 // Render on first show if there is an autoRender config, or if this is a floater (Window, Menu, BoundList etc).
787 if (!me.rendered && (me.autoRender || me.floating)) {
788 me.doAutoRender();
789 }
790 if (me.rendered) {
791 me.beforeShow();
792 me.onShow.apply(me, arguments);
793
794 // Notify any owning Container unless it's suspended.
795 // Floating Components do not participate in layouts.
796 if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
797 me.ownerCt.doLayout();
798 }
799 me.afterShow.apply(me, arguments);
800 }
801 }
802 return me;
803 },
804
805 beforeShow: Ext.emptyFn,
806
807 // Private. Override in subclasses where more complex behaviour is needed.
808 onShow: function() {
809 var me = this;
810
811 me.el.show();
812 me.callParent(arguments);
813 if (me.floating && me.constrain) {
814 me.doConstrain();
815 }
816 },
817
818 afterShow: function(animateTarget, cb, scope) {
819 var me = this,
820 fromBox,
821 toBox,
822 ghostPanel;
823
824 // Default to configured animate target if none passed
825 animateTarget = animateTarget || me.animateTarget;
826
827 // Need to be able to ghost the Component
828 if (!me.ghost) {
829 animateTarget = null;
830 }
831 // If we're animating, kick of an animation of the ghost from the target to the *Element* current box
832 if (animateTarget) {
833 animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
834 toBox = me.el.getBox();
835 fromBox = animateTarget.getBox();
836 me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets');
837 ghostPanel = me.ghost();
838 ghostPanel.el.stopAnimation();
839
840 // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
841 ghostPanel.el.setX(-10000);
842
843 ghostPanel.el.animate({
844 from: fromBox,
845 to: toBox,
846 listeners: {
847 afteranimate: function() {
848 delete ghostPanel.componentLayout.lastComponentSize;
849 me.unghost();
850 me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets');
851 me.onShowComplete(cb, scope);
852 }
853 }
854 });
855 }
856 else {
857 me.onShowComplete(cb, scope);
858 }
859 },
860
861 onShowComplete: function(cb, scope) {
862 var me = this;
863 if (me.floating) {
864 me.toFront();
865 }
866 Ext.callback(cb, scope || me);
867 me.fireEvent('show', me);
868 },
869
870<span id='Ext-Component-method-hide'> /**
871</span> * Hides this Component, setting it to invisible using the configured {@link #hideMode}.
872 * @param {String/Ext.Element/Ext.Component} [animateTarget=null] **only valid for {@link #floating} Components
873 * such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have
874 * been configured with `floating: true`.**. The target to which the Component should animate while hiding.
875 * @param {Function} [callback] A callback function to call after the Component is hidden.
876 * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
877 * Defaults to this Component.
878 * @return {Ext.Component} this
879 */
880 hide: function() {
881 var me = this;
882
883 // Clear the flag which is set if a floatParent was hidden while this is visible.
884 // If a hide operation was subsequently called, that pending show must be hidden.
885 me.showOnParentShow = false;
886
887 if (!(me.rendered && !me.isVisible()) && me.fireEvent('beforehide', me) !== false) {
888 me.hidden = true;
889 if (me.rendered) {
890 me.onHide.apply(me, arguments);
891
892 // Notify any owning Container unless it's suspended.
893 // Floating Components do not participate in layouts.
894 if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
895 me.ownerCt.doLayout();
896 }
897 }
898 }
899 return me;
900 },
901
902 // Possibly animate down to a target element.
903 onHide: function(animateTarget, cb, scope) {
904 var me = this,
905 ghostPanel,
906 toBox;
907
908 // Default to configured animate target if none passed
909 animateTarget = animateTarget || me.animateTarget;
910
911 // Need to be able to ghost the Component
912 if (!me.ghost) {
913 animateTarget = null;
914 }
915 // If we're animating, kick off an animation of the ghost down to the target
916 if (animateTarget) {
917 animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
918 ghostPanel = me.ghost();
919 ghostPanel.el.stopAnimation();
920 toBox = animateTarget.getBox();
921 toBox.width += 'px';
922 toBox.height += 'px';
923 ghostPanel.el.animate({
924 to: toBox,
925 listeners: {
926 afteranimate: function() {
927 delete ghostPanel.componentLayout.lastComponentSize;
928 ghostPanel.el.hide();
929 me.afterHide(cb, scope);
930 }
931 }
932 });
933 }
934 me.el.hide();
935 if (!animateTarget) {
936 me.afterHide(cb, scope);
937 }
938 },
939
940 afterHide: function(cb, scope) {
941 Ext.callback(cb, scope || this);
942 this.fireEvent('hide', this);
943 },
944
945<span id='Ext-Component-method-onDestroy'> /**
946</span> * @private
947 * @template
948 * Template method to contribute functionality at destroy time.
949 */
950 onDestroy: function() {
951 var me = this;
952
953 // Ensure that any ancillary components are destroyed.
954 if (me.rendered) {
955 Ext.destroy(
956 me.proxy,
957 me.proxyWrap,
958 me.resizer
959 );
960 // Different from AbstractComponent
961 if (me.actionMode == 'container' || me.removeMode == 'container') {
962 me.container.remove();
963 }
964 }
965 delete me.focusTask;
966 me.callParent();
967 },
968
969 deleteMembers: function() {
970 var args = arguments,
971 len = args.length,
972 i = 0;
973 for (; i < len; ++i) {
974 delete this[args[i]];
975 }
976 },
977
978<span id='Ext-Component-method-focus'> /**
979</span> * Try to focus this component.
980 * @param {Boolean} [selectText] If applicable, true to also select the text in this component
981 * @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).
982 * @return {Ext.Component} this
983 */
984 focus: function(selectText, delay) {
985 var me = this,
986 focusEl;
987
988 if (delay) {
989 if (!me.focusTask) {
990 me.focusTask = Ext.create('Ext.util.DelayedTask', me.focus);
991 }
992 me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
993 return me;
994 }
995
996 if (me.rendered && !me.isDestroyed) {
997 // getFocusEl could return a Component.
998 focusEl = me.getFocusEl();
999 focusEl.focus();
1000 if (focusEl.dom && selectText === true) {
1001 focusEl.dom.select();
1002 }
1003
1004 // Focusing a floating Component brings it to the front of its stack.
1005 // this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.
1006 if (me.floating) {
1007 me.toFront(true);
1008 }
1009 }
1010 return me;
1011 },
1012
1013<span id='Ext-Component-method-getFocusEl'> /**
1014</span> * @private
1015 * Returns the focus holder element associated with this Component. By default, this is the Component's encapsulating
1016 * element. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use
1017 * by the {@link #focus} method.
1018 * @returns {Ext.Element} the focus holing element.
1019 */
1020 getFocusEl: function() {
1021 return this.el;
1022 },
1023
1024 // private
1025 blur: function() {
1026 if (this.rendered) {
1027 this.getFocusEl().blur();
1028 }
1029 return this;
1030 },
1031
1032 getEl: function() {
1033 return this.el;
1034 },
1035
1036 // Deprecate 5.0
1037 getResizeEl: function() {
1038 return this.el;
1039 },
1040
1041 // Deprecate 5.0
1042 getPositionEl: function() {
1043 return this.el;
1044 },
1045
1046 // Deprecate 5.0
1047 getActionEl: function() {
1048 return this.el;
1049 },
1050
1051 // Deprecate 5.0
1052 getVisibilityEl: function() {
1053 return this.el;
1054 },
1055
1056 // Deprecate 5.0
1057 onResize: Ext.emptyFn,
1058
1059 // private
1060 getBubbleTarget: function() {
1061 return this.ownerCt;
1062 },
1063
1064 // private
1065 getContentTarget: function() {
1066 return this.el;
1067 },
1068
1069<span id='Ext-Component-method-cloneConfig'> /**
1070</span> * Clone the current component using the original config values passed into this instance by default.
1071 * @param {Object} overrides A new config containing any properties to override in the cloned version.
1072 * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
1073 * @return {Ext.Component} clone The cloned copy of this component
1074 */
1075 cloneConfig: function(overrides) {
1076 overrides = overrides || {};
1077 var id = overrides.id || Ext.id(),
1078 cfg = Ext.applyIf(overrides, this.initialConfig),
1079 self;
1080
1081 cfg.id = id;
1082
1083 self = Ext.getClass(this);
1084
1085 // prevent dup id
1086 return new self(cfg);
1087 },
1088
1089<span id='Ext-Component-method-getXType'> /**
1090</span> * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available
1091 * xtypes, see the {@link Ext.Component} header. Example usage:
1092 *
1093 * var t = new Ext.form.field.Text();
1094 * alert(t.getXType()); // alerts 'textfield'
1095 *
1096 * @return {String} The xtype
1097 */
1098 getXType: function() {
1099 return this.self.xtype;
1100 },
1101
1102<span id='Ext-Component-method-findParentBy'> /**
1103</span> * Find a container above this component at any level by a custom function. If the passed function returns true, the
1104 * container will be returned.
1105 * @param {Function} fn The custom function to call with the arguments (container, this component).
1106 * @return {Ext.container.Container} The first Container for which the custom function returns true
1107 */
1108 findParentBy: function(fn) {
1109 var p;
1110
1111 // Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function.
1112 for (p = this.ownerCt; p && !fn(p, this); p = p.ownerCt);
1113 return p || null;
1114 },
1115
1116<span id='Ext-Component-method-findParentByType'> /**
1117</span> * Find a container above this component at any level by xtype or class
1118 *
1119 * See also the {@link Ext.Component#up up} method.
1120 *
1121 * @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly
1122 * @return {Ext.container.Container} The first Container which matches the given xtype or class
1123 */
1124 findParentByType: function(xtype) {
1125 return Ext.isFunction(xtype) ?
1126 this.findParentBy(function(p) {
1127 return p.constructor === xtype;
1128 })
1129 :
1130 this.up(xtype);
1131 },
1132
1133<span id='Ext-Component-method-bubble'> /**
1134</span> * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope
1135 * (*this*) of function call will be the scope provided or the current component. The arguments to the function will
1136 * be the args provided or the current component. If the function returns false at any point, the bubble is stopped.
1137 *
1138 * @param {Function} fn The function to call
1139 * @param {Object} [scope] The scope of the function. Defaults to current node.
1140 * @param {Array} [args] The args to call the function with. Defaults to passing the current component.
1141 * @return {Ext.Component} this
1142 */
1143 bubble: function(fn, scope, args) {
1144 var p = this;
1145 while (p) {
1146 if (fn.apply(scope || p, args || [p]) === false) {
1147 break;
1148 }
1149 p = p.ownerCt;
1150 }
1151 return this;
1152 },
1153
1154 getProxy: function() {
1155 var me = this,
1156 target;
1157
1158 if (!me.proxy) {
1159 target = Ext.getBody();
1160 if (Ext.scopeResetCSS) {
1161 me.proxyWrap = target = Ext.getBody().createChild({
1162 cls: Ext.baseCSSPrefix + 'reset'
1163 });
1164 }
1165 me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);
1166 }
1167 return me.proxy;
1168 }
1169
1170});
1171</pre>
1172</body>
1173</html>