docs/source/BoundListKeyNav.html

   1 <!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-view.BoundListKeyNav'>/**
   2 </span> * @class Ext.view.BoundListKeyNav
   3  * @extends Ext.util.KeyNav
   4  * A specialized {@link Ext.util.KeyNav} implementation for navigating a {@link Ext.view.BoundList} using
   5  * the keyboard. The up, down, pageup, pagedown, home, and end keys move the active highlight
   6  * through the list. The enter key invokes the selection model's select action using the highlighted item.
   7  */
   8 Ext.define('Ext.view.BoundListKeyNav', {
   9     extend: 'Ext.util.KeyNav',
  10     requires: 'Ext.view.BoundList',
  11
  12 <span id='Ext-view.BoundListKeyNav-cfg-boundList'>    /**
  13 </span>     * @cfg {Ext.view.BoundList} boundList
  14      * @required
  15      * The {@link Ext.view.BoundList} instance for which key navigation will be managed. This is required.
  16      */
  17
  18     constructor: function(el, config) {
  19         var me = this;
  20         me.boundList = config.boundList;
  21         me.callParent([el, Ext.apply({}, config, me.defaultHandlers)]);
  22     },
  23
  24     defaultHandlers: {
  25         up: function() {
  26             var me = this,
  27                 boundList = me.boundList,
  28                 allItems = boundList.all,
  29                 oldItem = boundList.highlightedItem,
  30                 oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
  31                 newItemIdx = oldItemIdx &gt; 0 ? oldItemIdx - 1 : allItems.getCount() - 1; //wraps around
  32             me.highlightAt(newItemIdx);
  33         },
  34
  35         down: function() {
  36             var me = this,
  37                 boundList = me.boundList,
  38                 allItems = boundList.all,
  39                 oldItem = boundList.highlightedItem,
  40                 oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
  41                 newItemIdx = oldItemIdx &lt; allItems.getCount() - 1 ? oldItemIdx + 1 : 0; //wraps around
  42             me.highlightAt(newItemIdx);
  43         },
  44
  45         pageup: function() {
  46             //TODO
  47         },
  48
  49         pagedown: function() {
  50             //TODO
  51         },
  52
  53         home: function() {
  54             this.highlightAt(0);
  55         },
  56
  57         end: function() {
  58             var me = this;
  59             me.highlightAt(me.boundList.all.getCount() - 1);
  60         },
  61
  62         enter: function(e) {
  63             this.selectHighlighted(e);
  64         }
  65     },
  66
  67 <span id='Ext-view.BoundListKeyNav-method-highlightAt'>    /**
  68 </span>     * Highlights the item at the given index.
  69      * @param {Number} index
  70      */
  71     highlightAt: function(index) {
  72         var boundList = this.boundList,
  73             item = boundList.all.item(index);
  74         if (item) {
  75             item = item.dom;
  76             boundList.highlightItem(item);
  77             boundList.getTargetEl().scrollChildIntoView(item, false);
  78         }
  79     },
  80
  81 <span id='Ext-view.BoundListKeyNav-method-selectHighlighted'>    /**
  82 </span>     * Triggers selection of the currently highlighted item according to the behavior of
  83      * the configured SelectionModel.
  84      */
  85     selectHighlighted: function(e) {
  86         var me = this,
  87             boundList = me.boundList,
  88             highlighted = boundList.highlightedItem,
  89             selModel = boundList.getSelectionModel();
  90         if (highlighted) {
  91             selModel.selectWithEvent(boundList.getRecord(highlighted), e);
  92         }
  93     }
  94
  95 });</pre></pre></body></html>