-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-FocusManager'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <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>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-FocusManager'>/**
</span> * @class Ext.FocusManager
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}.
{@link #unsubscribe Ext.FocusManager.unsubscribe} to turn the navigation off.
* @singleton
- * @markdown
* @author Jarred Nicholls <jarred@sencha.com>
* @docauthor Jarred Nicholls <jarred@sencha.com>
*/
<span id='Ext-FocusManager-property-focusedCmp'> /**
</span> * @property {Ext.Component} focusedCmp
* The currently focused component. Defaults to `undefined`.
- * @markdown
*/
focusElementCls: Ext.baseCSSPrefix + 'focus-element',
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:
*
* 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'
* @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',
* @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',
<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;
],
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);
}
},
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) {
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();
}
<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;
<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,
<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,
safeSetFocus(container);
me.removeDOM();
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff