examples/ux/SelectBox.js

   1 /*!
   2  * Ext JS Library 3.0.3
   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.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