DataViewModel.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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-selection-DataViewModel'>/**
  19. </span> * @private
  20. */
  21. Ext.define('Ext.selection.DataViewModel', {
  22. extend: 'Ext.selection.Model',
  23. requires: ['Ext.util.KeyNav'],
  24. deselectOnContainerClick: true,
  25. <span id='Ext-selection-DataViewModel-cfg-enableKeyNav'> /**
  26. </span> * @cfg {Boolean} enableKeyNav
  27. *
  28. * Turns on/off keyboard navigation within the DataView.
  29. */
  30. enableKeyNav: true,
  31. constructor: function(cfg){
  32. this.addEvents(
  33. <span id='Ext-selection-DataViewModel-event-beforedeselect'> /**
  34. </span> * @event beforedeselect
  35. * Fired before a record is deselected. If any listener returns false, the
  36. * deselection is cancelled.
  37. * @param {Ext.selection.DataViewModel} this
  38. * @param {Ext.data.Model} record The deselected record
  39. */
  40. 'beforedeselect',
  41. <span id='Ext-selection-DataViewModel-event-beforeselect'> /**
  42. </span> * @event beforeselect
  43. * Fired before a record is selected. If any listener returns false, the
  44. * selection is cancelled.
  45. * @param {Ext.selection.DataViewModel} this
  46. * @param {Ext.data.Model} record The selected record
  47. */
  48. 'beforeselect',
  49. <span id='Ext-selection-DataViewModel-event-deselect'> /**
  50. </span> * @event deselect
  51. * Fired after a record is deselected
  52. * @param {Ext.selection.DataViewModel} this
  53. * @param {Ext.data.Model} record The deselected record
  54. */
  55. 'deselect',
  56. <span id='Ext-selection-DataViewModel-event-select'> /**
  57. </span> * @event select
  58. * Fired after a record is selected
  59. * @param {Ext.selection.DataViewModel} this
  60. * @param {Ext.data.Model} record The selected record
  61. */
  62. 'select'
  63. );
  64. this.callParent(arguments);
  65. },
  66. bindComponent: function(view) {
  67. var me = this,
  68. eventListeners = {
  69. refresh: me.refresh,
  70. scope: me
  71. };
  72. me.view = view;
  73. me.bindStore(view.getStore());
  74. eventListeners[view.triggerEvent] = me.onItemClick;
  75. eventListeners[view.triggerCtEvent] = me.onContainerClick;
  76. view.on(eventListeners);
  77. if (me.enableKeyNav) {
  78. me.initKeyNav(view);
  79. }
  80. },
  81. onItemClick: function(view, record, item, index, e) {
  82. this.selectWithEvent(record, e);
  83. },
  84. onContainerClick: function() {
  85. if (this.deselectOnContainerClick) {
  86. this.deselectAll();
  87. }
  88. },
  89. initKeyNav: function(view) {
  90. var me = this;
  91. if (!view.rendered) {
  92. view.on({
  93. render: Ext.Function.bind(me.initKeyNav, me, [view]),
  94. single: true
  95. });
  96. return;
  97. }
  98. view.el.set({
  99. tabIndex: -1
  100. });
  101. me.keyNav = new Ext.util.KeyNav({
  102. target: view.el,
  103. ignoreInputFields: true,
  104. down: Ext.pass(me.onNavKey, [1], me),
  105. right: Ext.pass(me.onNavKey, [1], me),
  106. left: Ext.pass(me.onNavKey, [-1], me),
  107. up: Ext.pass(me.onNavKey, [-1], me),
  108. scope: me
  109. });
  110. },
  111. onNavKey: function(step) {
  112. step = step || 1;
  113. var me = this,
  114. view = me.view,
  115. selected = me.getSelection()[0],
  116. numRecords = me.view.store.getCount(),
  117. idx;
  118. if (selected) {
  119. idx = view.indexOf(view.getNode(selected)) + step;
  120. } else {
  121. idx = 0;
  122. }
  123. if (idx &lt; 0) {
  124. idx = numRecords - 1;
  125. } else if (idx &gt;= numRecords) {
  126. idx = 0;
  127. }
  128. me.select(idx);
  129. },
  130. // Allow the DataView to update the ui
  131. onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
  132. var me = this,
  133. view = me.view,
  134. eventName = isSelected ? 'select' : 'deselect';
  135. if ((suppressEvent || me.fireEvent('before' + eventName, me, record)) !== false &amp;&amp;
  136. commitFn() !== false) {
  137. if (view) {
  138. if (isSelected) {
  139. view.onItemSelect(record);
  140. } else {
  141. view.onItemDeselect(record);
  142. }
  143. }
  144. if (!suppressEvent) {
  145. me.fireEvent(eventName, me, record);
  146. }
  147. }
  148. },
  149. destroy: function(){
  150. Ext.destroy(this.keyNav);
  151. this.callParent();
  152. }
  153. });
  154. </pre>
  155. </body>
  156. </html>