SelectBox.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:6k
源码类别:

中间件编程

开发平台:

JavaScript

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