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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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 (required)
  31      * The {@link Ext.view.BoundList} instance for which key navigation will be managed.
  32      */
  33
  34     constructor: function(el, config) {
  35         var me = this;
  36         me.boundList = config.boundList;
  37         me.callParent([el, Ext.apply({}, config, me.defaultHandlers)]);
  38     },
  39
  40     defaultHandlers: {
  41         up: function() {
  42             var me = this,
  43                 boundList = me.boundList,
  44                 allItems = boundList.all,
  45                 oldItem = boundList.highlightedItem,
  46                 oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
  47                 newItemIdx = oldItemIdx &gt; 0 ? oldItemIdx - 1 : allItems.getCount() - 1; //wraps around
  48             me.highlightAt(newItemIdx);
  49         },
  50
  51         down: function() {
  52             var me = this,
  53                 boundList = me.boundList,
  54                 allItems = boundList.all,
  55                 oldItem = boundList.highlightedItem,
  56                 oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
  57                 newItemIdx = oldItemIdx &lt; allItems.getCount() - 1 ? oldItemIdx + 1 : 0; //wraps around
  58             me.highlightAt(newItemIdx);
  59         },
  60
  61         pageup: function() {
  62             //TODO
  63         },
  64
  65         pagedown: function() {
  66             //TODO
  67         },
  68
  69         home: function() {
  70             this.highlightAt(0);
  71         },
  72
  73         end: function() {
  74             var me = this;
  75             me.highlightAt(me.boundList.all.getCount() - 1);
  76         },
  77
  78         enter: function(e) {
  79             this.selectHighlighted(e);
  80         }
  81     },
  82
  83 <span id='Ext-view-BoundListKeyNav-method-highlightAt'>    /**
  84 </span>     * Highlights the item at the given index.
  85      * @param {Number} index
  86      */
  87     highlightAt: function(index) {
  88         var boundList = this.boundList,
  89             item = boundList.all.item(index);
  90         if (item) {
  91             item = item.dom;
  92             boundList.highlightItem(item);
  93             boundList.getTargetEl().scrollChildIntoView(item, false);
  94         }
  95     },
  96
  97 <span id='Ext-view-BoundListKeyNav-method-selectHighlighted'>    /**
  98 </span>     * Triggers selection of the currently highlighted item according to the behavior of
  99      * the configured SelectionModel.
 100      */
 101     selectHighlighted: function(e) {
 102         var me = this,
 103             boundList = me.boundList,
 104             highlighted = boundList.highlightedItem,
 105             selModel = boundList.getSelectionModel();
 106         if (highlighted) {
 107             selModel.selectWithEvent(boundList.getRecord(highlighted), e);
 108         }
 109     }
 110
 111 });</pre>
 112 </body>
 113 </html>