BoundListKeyNav.html 3.7 KB

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