examples/ux/SelectBox.js

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