examples/ux/SelectBox.js

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