Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / src / FocusManager.js
index cf5645b..c9c8207 100644 (file)
@@ -1,3 +1,17 @@
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
 /**
  * @class Ext.FocusManager
 
@@ -7,8 +21,8 @@ The FocusManager is responsible for globally:
 2. Providing basic keyboard navigation
 3. (optional) Provide a visual cue for focused components, in the form of a focus ring/frame.
 
-To activate the FocusManager, simply call {@link #enable `Ext.FocusManager.enable();`}. In turn, you may
-deactivate the FocusManager by subsequently calling {@link #disable `Ext.FocusManager.disable();`}.  The
+To activate the FocusManager, simply call `Ext.FocusManager.enable();`. In turn, you may
+deactivate the FocusManager by subsequently calling `Ext.FocusManager.disable();.  The
 FocusManager is disabled by default.
 
 To enable the optional focus frame, pass `true` or `{focusFrame: true}` to {@link #enable}.
@@ -19,7 +33,6 @@ call {@link #subscribe Ext.FocusManager.subscribe} to take advantage of this fea
 {@link #unsubscribe Ext.FocusManager.unsubscribe} to turn the navigation off.
 
  * @singleton
- * @markdown
  * @author Jarred Nicholls <jarred@sencha.com>
  * @docauthor Jarred Nicholls <jarred@sencha.com>
  */
@@ -47,7 +60,6 @@ Ext.define('Ext.FocusManager', {
     /**
      * @property {Ext.Component} focusedCmp
      * The currently focused component. Defaults to `undefined`.
-     * @markdown
      */
 
     focusElementCls: Ext.baseCSSPrefix + 'focus-element',
@@ -55,7 +67,7 @@ Ext.define('Ext.FocusManager', {
     focusFrameCls: Ext.baseCSSPrefix + 'focus-frame',
 
     /**
-     * @property {Array} whitelist
+     * @property {String[]} whitelist
      * A list of xtypes that should ignore certain navigation input keys and
      * allow for the default browser event/behavior. These input keys include:
      *
@@ -69,9 +81,6 @@ Ext.define('Ext.FocusManager', {
      * The FocusManager will not attempt to navigate when a component is an xtype (or descendents thereof)
      * that belongs to this whitelist. E.g., an {@link Ext.form.field.Text} should allow
      * the user to move the input cursor left and right, and to delete characters, etc.
-     *
-     * This whitelist currently defaults to `['textfield']`.
-     * @markdown
      */
     whitelist: [
         'textfield'
@@ -103,7 +112,6 @@ Ext.define('Ext.FocusManager', {
              * @param {Ext.Component} cmp The component that is being focused
              * @param {Ext.Component} previousCmp The component that was previously focused,
              * or `undefined` if there was no previously focused component.
-             * @markdown
              */
             'beforecomponentfocus',
 
@@ -114,7 +122,6 @@ Ext.define('Ext.FocusManager', {
              * @param {Ext.Component} cmp The component that has been focused
              * @param {Ext.Component} previousCmp The component that was previously focused,
              * or `undefined` if there was no previously focused component.
-             * @markdown
              */
             'componentfocus',
 
@@ -228,7 +235,7 @@ Ext.define('Ext.FocusManager', {
 
     /**
      * Adds the specified xtype to the {@link #whitelist}.
-     * @param {String/Array} xtype Adds the xtype(s) to the {@link #whitelist}.
+     * @param {String/String[]} xtype Adds the xtype(s) to the {@link #whitelist}.
      */
     addXTypeToWhitelist: function(xtype) {
         var me = this;
@@ -373,8 +380,8 @@ Ext.define('Ext.FocusManager', {
                 ],
                 style: 'top: -100px; left: -100px;'
             });
-            me.focusFrame.setVisibilityMode(Ext.core.Element.DISPLAY);
-            me.focusFrameWidth = me.focusFrame.child('.' + cls + '-top').getHeight();
+            me.focusFrame.setVisibilityMode(Ext.Element.DISPLAY);
+            me.focusFrameWidth = 2;
             me.focusFrame.hide().setLeftTop(0, 0);
         }
     },
@@ -420,10 +427,14 @@ Ext.define('Ext.FocusManager', {
 
         if (!me.focusedCmp || !(parent = me.focusedCmp.up(':focusable'))) {
             me.focusEl.focus();
-            return;
+        } else {
+            parent.focus();
         }
 
-        parent.focus();
+        // In some browsers (Chrome) FocusManager can handle this before other
+        // handlers. Ext Windows have their own Esc key handling, so we need to
+        // return true here to allow the event to bubble.
+        return true;
     },
 
     navigateSiblings: function(e, source, parent) {
@@ -542,10 +553,10 @@ Ext.define('Ext.FocusManager', {
                 fl = ff.child(cls + 'left'),
                 fr = ff.child(cls + 'right');
 
-            ft.setWidth(bw - 2).setLeftTop(bl + 1, bt);
-            fb.setWidth(bw - 2).setLeftTop(bl + 1, bt + bh - fw);
-            fl.setHeight(bh - 2).setLeftTop(bl, bt + 1);
-            fr.setHeight(bh - 2).setLeftTop(bl + bw - fw, bt + 1);
+            ft.setWidth(bw).setLeftTop(bl, bt);
+            fb.setWidth(bw).setLeftTop(bl, bt + bh - fw);
+            fl.setHeight(bh - fw - fw).setLeftTop(bl, bt + fw);
+            fr.setHeight(bh - fw - fw).setLeftTop(bl + bw - fw, bt + fw);
 
             ff.show();
         }
@@ -599,7 +610,7 @@ Ext.define('Ext.FocusManager', {
 
     /**
      * Removes the specified xtype from the {@link #whitelist}.
-     * @param {String/Array} xtype Removes the xtype(s) from the {@link #whitelist}.
+     * @param {String/String[]} xtype Removes the xtype(s) from the {@link #whitelist}.
      */
     removeXTypeFromWhitelist: function(xtype) {
         var me = this;
@@ -749,26 +760,25 @@ Ext.define('Ext.FocusManager', {
     /**
      * Subscribes an {@link Ext.container.Container} to provide basic keyboard focus navigation between its child {@link Ext.Component}'s.
      * @param {Ext.container.Container} container A reference to the {@link Ext.container.Container} on which to enable keyboard functionality and focus management.
-     * @param {Boolean/Object} options An object of the following options:
-        - keys : Array/Object
-            An array containing the string names of navigation keys to be supported. The allowed values are:
-
-            - 'left'
-            - 'right'
-            - 'up'
-            - 'down'
-
-            Or, an object containing those key names as keys with `true` or a callback function as their value. A scope may also be passed. E.g.:
-
-                {
-                    left: this.onLeftKey,
-                    right: this.onRightKey,
-                    scope: this
-                }
-
-        - focusFrame : Boolean (optional)
-            `true` to show the focus frame around a component when it is focused. Defaults to `false`.
-     * @markdown
+     * @param {Boolean/Object} options An object of the following options
+     * @param {Array/Object} options.keys
+     * An array containing the string names of navigation keys to be supported. The allowed values are:
+     *
+     *   - 'left'
+     *   - 'right'
+     *   - 'up'
+     *   - 'down'
+     *
+     * Or, an object containing those key names as keys with `true` or a callback function as their value. A scope may also be passed. E.g.:
+     *
+     *     {
+     *         left: this.onLeftKey,
+     *         right: this.onRightKey,
+     *         scope: this
+     *     }
+     *
+     * @param {Boolean} options.focusFrame
+     * `true` to show the focus frame around a component when it is focused. Defaults to `false`.
      */
     subscribe: function(container, options) {
         var me = this,
@@ -824,7 +834,6 @@ Ext.define('Ext.FocusManager', {
     /**
      * Unsubscribes an {@link Ext.container.Container} from keyboard focus management.
      * @param {Ext.container.Container} container A reference to the {@link Ext.container.Container} to unsubscribe from the FocusManager.
-     * @markdown
      */
     unsubscribe: function(container) {
         var me = this,
@@ -856,4 +865,4 @@ Ext.define('Ext.FocusManager', {
         safeSetFocus(container);
         me.removeDOM();
     }
-});
\ No newline at end of file
+});