docs/source/SelectBox.html

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