docs/source/BoundListKeyNav.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-view-BoundListKeyNav'>/**
  19 </span> * @class Ext.view.BoundListKeyNav
  20  * @extends Ext.util.KeyNav
  21  * A specialized {@link Ext.util.KeyNav} implementation for navigating a {@link Ext.view.BoundList} using
  22  * the keyboard. The up, down, pageup, pagedown, home, and end keys move the active highlight
  23  * through the list. The enter key invokes the selection model's select action using the highlighted item.
  24  */
  25 Ext.define('Ext.view.BoundListKeyNav', {
  26     extend: 'Ext.util.KeyNav',
  27     requires: 'Ext.view.BoundList',
  28
  29 <span id='Ext-view-BoundListKeyNav-cfg-boundList'>    /**
  30 </span>     * @cfg {Ext.view.BoundList} boundList
  31      * @required
  32      * The {@link Ext.view.BoundList} instance for which key navigation will be managed. This is required.
  33      */
  34
  35     constructor: function(el, config) {
  36         var me = this;
  37         me.boundList = config.boundList;
  38         me.callParent([el, Ext.apply({}, config, me.defaultHandlers)]);
  39     },
  40
  41     defaultHandlers: {
  42         up: function() {
  43             var me = this,
  44                 boundList = me.boundList,
  45                 allItems = boundList.all,
  46                 oldItem = boundList.highlightedItem,
  47                 oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
  48                 newItemIdx = oldItemIdx &gt; 0 ? oldItemIdx - 1 : allItems.getCount() - 1; //wraps around
  49             me.highlightAt(newItemIdx);
  50         },
  51
  52         down: function() {
  53             var me = this,
  54                 boundList = me.boundList,
  55                 allItems = boundList.all,
  56                 oldItem = boundList.highlightedItem,
  57                 oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
  58                 newItemIdx = oldItemIdx &lt; allItems.getCount() - 1 ? oldItemIdx + 1 : 0; //wraps around
  59             me.highlightAt(newItemIdx);
  60         },
  61
  62         pageup: function() {
  63             //TODO
  64         },
  65
  66         pagedown: function() {
  67             //TODO
  68         },
  69
  70         home: function() {
  71             this.highlightAt(0);
  72         },
  73
  74         end: function() {
  75             var me = this;
  76             me.highlightAt(me.boundList.all.getCount() - 1);
  77         },
  78
  79         enter: function(e) {
  80             this.selectHighlighted(e);
  81         }
  82     },
  83
  84 <span id='Ext-view-BoundListKeyNav-method-highlightAt'>    /**
  85 </span>     * Highlights the item at the given index.
  86      * @param {Number} index
  87      */
  88     highlightAt: function(index) {
  89         var boundList = this.boundList,
  90             item = boundList.all.item(index);
  91         if (item) {
  92             item = item.dom;
  93             boundList.highlightItem(item);
  94             boundList.getTargetEl().scrollChildIntoView(item, false);
  95         }
  96     },
  97
  98 <span id='Ext-view-BoundListKeyNav-method-selectHighlighted'>    /**
  99 </span>     * Triggers selection of the currently highlighted item according to the behavior of
 100      * the configured SelectionModel.
 101      */
 102     selectHighlighted: function(e) {
 103         var me = this,
 104             boundList = me.boundList,
 105             highlighted = boundList.highlightedItem,
 106             selModel = boundList.getSelectionModel();
 107         if (highlighted) {
 108             selModel.selectWithEvent(boundList.getRecord(highlighted), e);
 109         }
 110     }
 111
 112 });</pre>
 113 </body>
 114 </html>