X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/BoundListKeyNav.html diff --git a/docs/source/BoundListKeyNav.html b/docs/source/BoundListKeyNav.html new file mode 100644 index 00000000..ee8dcd99 --- /dev/null +++ b/docs/source/BoundListKeyNav.html @@ -0,0 +1,95 @@ +
\ No newline at end of file* @class Ext.view.BoundListKeyNav + * @extends Ext.util.KeyNav + * A specialized {@link Ext.util.KeyNav} implementation for navigating a {@link Ext.view.BoundList} using + * the keyboard. The up, down, pageup, pagedown, home, and end keys move the active highlight + * through the list. The enter key invokes the selection model's select action using the highlighted item. + */ +Ext.define('Ext.view.BoundListKeyNav', { + extend: 'Ext.util.KeyNav', + requires: 'Ext.view.BoundList', + + * @cfg {Ext.view.BoundList} boundList + * @required + * The {@link Ext.view.BoundList} instance for which key navigation will be managed. This is required. + */ + + constructor: function(el, config) { + var me = this; + me.boundList = config.boundList; + me.callParent([el, Ext.apply({}, config, me.defaultHandlers)]); + }, + + defaultHandlers: { + up: function() { + var me = this, + boundList = me.boundList, + allItems = boundList.all, + oldItem = boundList.highlightedItem, + oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1, + newItemIdx = oldItemIdx > 0 ? oldItemIdx - 1 : allItems.getCount() - 1; //wraps around + me.highlightAt(newItemIdx); + }, + + down: function() { + var me = this, + boundList = me.boundList, + allItems = boundList.all, + oldItem = boundList.highlightedItem, + oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1, + newItemIdx = oldItemIdx < allItems.getCount() - 1 ? oldItemIdx + 1 : 0; //wraps around + me.highlightAt(newItemIdx); + }, + + pageup: function() { + //TODO + }, + + pagedown: function() { + //TODO + }, + + home: function() { + this.highlightAt(0); + }, + + end: function() { + var me = this; + me.highlightAt(me.boundList.all.getCount() - 1); + }, + + enter: function(e) { + this.selectHighlighted(e); + } + }, + + * Highlights the item at the given index. + * @param {Number} index + */ + highlightAt: function(index) { + var boundList = this.boundList, + item = boundList.all.item(index); + if (item) { + item = item.dom; + boundList.highlightItem(item); + boundList.getTargetEl().scrollChildIntoView(item, false); + } + }, + + * Triggers selection of the currently highlighted item according to the behavior of + * the configured SelectionModel. + */ + selectHighlighted: function(e) { + var me = this, + boundList = me.boundList, + highlighted = boundList.highlightedItem, + selModel = boundList.getSelectionModel(); + if (highlighted) { + selModel.selectWithEvent(boundList.getRecord(highlighted), e); + } + } + +});