Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / FocusManager.html
index e8bcac6..3bee789 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
@@ -24,8 +24,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}.
@@ -36,7 +36,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 &lt;jarred@sencha.com&gt;
  * @docauthor Jarred Nicholls &lt;jarred@sencha.com&gt;
  */
@@ -64,7 +63,6 @@ Ext.define('Ext.FocusManager', {
 <span id='Ext-FocusManager-property-focusedCmp'>    /**
 </span>     * @property {Ext.Component} focusedCmp
      * The currently focused component. Defaults to `undefined`.
-     * @markdown
      */
 
     focusElementCls: Ext.baseCSSPrefix + 'focus-element',
@@ -72,7 +70,7 @@ Ext.define('Ext.FocusManager', {
     focusFrameCls: Ext.baseCSSPrefix + 'focus-frame',
 
 <span id='Ext-FocusManager-property-whitelist'>    /**
-</span>     * @property {Array} whitelist
+</span>     * @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:
      *
@@ -86,9 +84,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'
@@ -120,7 +115,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',
 
@@ -131,7 +125,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',
 
@@ -245,7 +238,7 @@ Ext.define('Ext.FocusManager', {
 
 <span id='Ext-FocusManager-method-addXTypeToWhitelist'>    /**
 </span>     * 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;
@@ -390,8 +383,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);
         }
     },
@@ -563,10 +556,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();
         }
@@ -620,7 +613,7 @@ Ext.define('Ext.FocusManager', {
 
 <span id='Ext-FocusManager-method-removeXTypeFromWhitelist'>    /**
 </span>     * 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;
@@ -770,26 +763,25 @@ Ext.define('Ext.FocusManager', {
 <span id='Ext-FocusManager-method-subscribe'>    /**
 </span>     * 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,
@@ -845,7 +837,6 @@ Ext.define('Ext.FocusManager', {
 <span id='Ext-FocusManager-method-unsubscribe'>    /**
 </span>     * 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,