Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / 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>