docs/source/SelectBox1.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   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.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         render : function(ct) {\r
 109                 Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);\r
 110                 if( Ext.isSafari ) {\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 = typeof record === 'number' ? record : this.store.indexOf(record);\r
 186                 this.select(index, this.isExpanded());\r
 187                 this.onSelect(this.store.getAt(record), 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
 205 </pre>    \r
 206 </body>\r
 207 </html>