SelectBox.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /*!
  2. * Ext JS Library 3.0.0
  3. * Copyright(c) 2006-2009 Ext JS, LLC
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. Ext.ns('Ext.ux.form');
  8. /**
  9. * @class Ext.ux.form.SelectBox
  10. * @extends Ext.form.ComboBox
  11. * <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
  12. * through the list, with item selection occurring when the mouse button is released.
  13. * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
  14. * on inner elements. Re-enabling editable after calling this will NOT work.</p>
  15. * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
  16. * @history 2007-07-08 jvs
  17. * Slight mods for Ext 2.0
  18. * @xtype selectbox
  19. */
  20. Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
  21. constructor: function(config){
  22. this.searchResetDelay = 1000;
  23. config = config || {};
  24. config = Ext.apply(config || {}, {
  25. editable: false,
  26. forceSelection: true,
  27. rowHeight: false,
  28. lastSearchTerm: false,
  29. triggerAction: 'all',
  30. mode: 'local'
  31. });
  32. Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
  33. this.lastSelectedIndex = this.selectedIndex || 0;
  34. },
  35. initEvents : function(){
  36. Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
  37. // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
  38. this.el.on('keydown', this.keySearch, this, true);
  39. this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
  40. },
  41. keySearch : function(e, target, options) {
  42. var raw = e.getKey();
  43. var key = String.fromCharCode(raw);
  44. var startIndex = 0;
  45. if( !this.store.getCount() ) {
  46. return;
  47. }
  48. switch(raw) {
  49. case Ext.EventObject.HOME:
  50. e.stopEvent();
  51. this.selectFirst();
  52. return;
  53. case Ext.EventObject.END:
  54. e.stopEvent();
  55. this.selectLast();
  56. return;
  57. case Ext.EventObject.PAGEDOWN:
  58. this.selectNextPage();
  59. e.stopEvent();
  60. return;
  61. case Ext.EventObject.PAGEUP:
  62. this.selectPrevPage();
  63. e.stopEvent();
  64. return;
  65. }
  66. // skip special keys other than the shift key
  67. if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
  68. return;
  69. }
  70. if( this.lastSearchTerm == key ) {
  71. startIndex = this.lastSelectedIndex;
  72. }
  73. this.search(this.displayField, key, startIndex);
  74. this.cshTask.delay(this.searchResetDelay);
  75. },
  76. onRender : function(ct, position) {
  77. this.store.on('load', this.calcRowsPerPage, this);
  78. Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
  79. if( this.mode == 'local' ) {
  80. this.calcRowsPerPage();
  81. }
  82. },
  83. onSelect : function(record, index, skipCollapse){
  84. if(this.fireEvent('beforeselect', this, record, index) !== false){
  85. this.setValue(record.data[this.valueField || this.displayField]);
  86. if( !skipCollapse ) {
  87. this.collapse();
  88. }
  89. this.lastSelectedIndex = index + 1;
  90. this.fireEvent('select', this, record, index);
  91. }
  92. },
  93. render : function(ct) {
  94. Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);
  95. if( Ext.isSafari ) {
  96. this.el.swallowEvent('mousedown', true);
  97. }
  98. this.el.unselectable();
  99. this.innerList.unselectable();
  100. this.trigger.unselectable();
  101. this.innerList.on('mouseup', function(e, target, options) {
  102. if( target.id && target.id == this.innerList.id ) {
  103. return;
  104. }
  105. this.onViewClick();
  106. }, this);
  107. this.innerList.on('mouseover', function(e, target, options) {
  108. if( target.id && target.id == this.innerList.id ) {
  109. return;
  110. }
  111. this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
  112. this.cshTask.delay(this.searchResetDelay);
  113. }, this);
  114. this.trigger.un('click', this.onTriggerClick, this);
  115. this.trigger.on('mousedown', function(e, target, options) {
  116. e.preventDefault();
  117. this.onTriggerClick();
  118. }, this);
  119. this.on('collapse', function(e, target, options) {
  120. Ext.getDoc().un('mouseup', this.collapseIf, this);
  121. }, this, true);
  122. this.on('expand', function(e, target, options) {
  123. Ext.getDoc().on('mouseup', this.collapseIf, this);
  124. }, this, true);
  125. },
  126. clearSearchHistory : function() {
  127. this.lastSelectedIndex = 0;
  128. this.lastSearchTerm = false;
  129. },
  130. selectFirst : function() {
  131. this.focusAndSelect(this.store.data.first());
  132. },
  133. selectLast : function() {
  134. this.focusAndSelect(this.store.data.last());
  135. },
  136. selectPrevPage : function() {
  137. if( !this.rowHeight ) {
  138. return;
  139. }
  140. var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
  141. this.focusAndSelect(this.store.getAt(index));
  142. },
  143. selectNextPage : function() {
  144. if( !this.rowHeight ) {
  145. return;
  146. }
  147. var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
  148. this.focusAndSelect(this.store.getAt(index));
  149. },
  150. search : function(field, value, startIndex) {
  151. field = field || this.displayField;
  152. this.lastSearchTerm = value;
  153. var index = this.store.find.apply(this.store, arguments);
  154. if( index !== -1 ) {
  155. this.focusAndSelect(index);
  156. }
  157. },
  158. focusAndSelect : function(record) {
  159. var index = typeof record === 'number' ? record : this.store.indexOf(record);
  160. this.select(index, this.isExpanded());
  161. this.onSelect(this.store.getAt(record), index, this.isExpanded());
  162. },
  163. calcRowsPerPage : function() {
  164. if( this.store.getCount() ) {
  165. this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
  166. this.rowsPerPage = this.maxHeight / this.rowHeight;
  167. } else {
  168. this.rowHeight = false;
  169. }
  170. }
  171. });
  172. Ext.reg('selectbox', Ext.ux.form.SelectBox);
  173. //backwards compat
  174. Ext.ux.SelectBox = Ext.ux.form.SelectBox;