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>
*/
/**
* @property {Ext.Component} focusedCmp
* The currently focused component. Defaults to `undefined`.
- * @markdown
*/
focusElementCls: Ext.baseCSSPrefix + 'focus-element',
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:
*
* 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',
/**
* 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);
}
},
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();
}
/**
* 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;
/**
* 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,
/**
* 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,
git.ithinksw.org / extjs.git / blobdiff