examples/docs/source/SelectBox.html

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