examples/ux/SelectBox.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 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.initList();\r
  93                         this.calcRowsPerPage();\r
  94                 }\r
  95         },\r
  96 \r
  97         onSelect : function(record, index, skipCollapse){\r
  98                 if(this.fireEvent('beforeselect', this, record, index) !== false){\r
  99                         this.setValue(record.data[this.valueField || this.displayField]);\r
 100                         if( !skipCollapse ) {\r
 101                                 this.collapse();\r
 102                         }\r
 103                         this.lastSelectedIndex = index + 1;\r
 104                         this.fireEvent('select', this, record, index);\r
 105                 }\r
 106         },\r
 107 \r
 108         afterRender : function() {\r
 109                 Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);\r
 110                 if(Ext.isWebKit) {\r
 111                         this.el.swallowEvent('mousedown', true);\r
 112                 }\r
 113                 this.el.unselectable();\r
 114                 this.innerList.unselectable();\r
 115                 this.trigger.unselectable();\r
 116                 this.innerList.on('mouseup', function(e, target, options) {\r
 117                         if( target.id && target.id == this.innerList.id ) {\r
 118                                 return;\r
 119                         }\r
 120                         this.onViewClick();\r
 121                 }, this);\r
 122 \r
 123                 this.innerList.on('mouseover', function(e, target, options) {\r
 124                         if( target.id && target.id == this.innerList.id ) {\r
 125                                 return;\r
 126                         }\r
 127                         this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;\r
 128                         this.cshTask.delay(this.searchResetDelay);\r
 129                 }, this);\r
 130 \r
 131                 this.trigger.un('click', this.onTriggerClick, this);\r
 132                 this.trigger.on('mousedown', function(e, target, options) {\r
 133                         e.preventDefault();\r
 134                         this.onTriggerClick();\r
 135                 }, this);\r
 136 \r
 137                 this.on('collapse', function(e, target, options) {\r
 138                         Ext.getDoc().un('mouseup', this.collapseIf, this);\r
 139                 }, this, true);\r
 140 \r
 141                 this.on('expand', function(e, target, options) {\r
 142                         Ext.getDoc().on('mouseup', this.collapseIf, this);\r
 143                 }, this, true);\r
 144         },\r
 145 \r
 146         clearSearchHistory : function() {\r
 147                 this.lastSelectedIndex = 0;\r
 148                 this.lastSearchTerm = false;\r
 149         },\r
 150 \r
 151         selectFirst : function() {\r
 152                 this.focusAndSelect(this.store.data.first());\r
 153         },\r
 154 \r
 155         selectLast : function() {\r
 156                 this.focusAndSelect(this.store.data.last());\r
 157         },\r
 158 \r
 159         selectPrevPage : function() {\r
 160                 if( !this.rowHeight ) {\r
 161                         return;\r
 162                 }\r
 163                 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);\r
 164                 this.focusAndSelect(this.store.getAt(index));\r
 165         },\r
 166 \r
 167         selectNextPage : function() {\r
 168                 if( !this.rowHeight ) {\r
 169                         return;\r
 170                 }\r
 171                 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);\r
 172                 this.focusAndSelect(this.store.getAt(index));\r
 173         },\r
 174 \r
 175         search : function(field, value, startIndex) {\r
 176                 field = field || this.displayField;\r
 177                 this.lastSearchTerm = value;\r
 178                 var index = this.store.find.apply(this.store, arguments);\r
 179                 if( index !== -1 ) {\r
 180                         this.focusAndSelect(index);\r
 181                 }\r
 182         },\r
 183 \r
 184         focusAndSelect : function(record) {\r
 185         var index = Ext.isNumber(record) ? record : this.store.indexOf(record);\r
 186         this.select(index, this.isExpanded());\r
 187         this.onSelect(this.store.getAt(index), index, this.isExpanded());\r
 188         },\r
 189 \r
 190         calcRowsPerPage : function() {\r
 191                 if( this.store.getCount() ) {\r
 192                         this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();\r
 193                         this.rowsPerPage = this.maxHeight / this.rowHeight;\r
 194                 } else {\r
 195                         this.rowHeight = false;\r
 196                 }\r
 197         }\r
 198 \r
 199 });\r
 200 \r
 201 Ext.reg('selectbox', Ext.ux.form.SelectBox);\r
 202 \r
 203 //backwards compat\r
 204 Ext.ux.SelectBox = Ext.ux.form.SelectBox;\r