3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
10 * @class Ext.ux.form.SelectBox
11 * @extends Ext.form.ComboBox
12 * <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
13 * through the list, with item selection occurring when the mouse button is released.
14 * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
15 * on inner elements. Re-enabling editable after calling this will NOT work.</p>
16 * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
17 * @history 2007-07-08 jvs
18 * Slight mods for Ext 2.0
21 Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
22 constructor: function(config){
23 this.searchResetDelay = 1000;
24 config = config || {};
25 config = Ext.apply(config || {}, {
29 lastSearchTerm: false,
34 Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
36 this.lastSelectedIndex = this.selectedIndex || 0;
39 initEvents : function(){
40 Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
41 // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
42 this.el.on('keydown', this.keySearch, this, true);
43 this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
46 keySearch : function(e, target, options) {
48 var key = String.fromCharCode(raw);
51 if( !this.store.getCount() ) {
56 case Ext.EventObject.HOME:
61 case Ext.EventObject.END:
66 case Ext.EventObject.PAGEDOWN:
67 this.selectNextPage();
71 case Ext.EventObject.PAGEUP:
72 this.selectPrevPage();
77 // skip special keys other than the shift key
78 if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
81 if( this.lastSearchTerm == key ) {
82 startIndex = this.lastSelectedIndex;
84 this.search(this.displayField, key, startIndex);
85 this.cshTask.delay(this.searchResetDelay);
88 onRender : function(ct, position) {
89 this.store.on('load', this.calcRowsPerPage, this);
90 Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
91 if( this.mode == 'local' ) {
93 this.calcRowsPerPage();
97 onSelect : function(record, index, skipCollapse){
98 if(this.fireEvent('beforeselect', this, record, index) !== false){
99 this.setValue(record.data[this.valueField || this.displayField]);
100 if( !skipCollapse ) {
103 this.lastSelectedIndex = index + 1;
104 this.fireEvent('select', this, record, index);
108 afterRender : function() {
109 Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
111 this.el.swallowEvent('mousedown', true);
113 this.el.unselectable();
114 this.innerList.unselectable();
115 this.trigger.unselectable();
116 this.innerList.on('mouseup', function(e, target, options) {
117 if( target.id && target.id == this.innerList.id ) {
123 this.innerList.on('mouseover', function(e, target, options) {
124 if( target.id && target.id == this.innerList.id ) {
127 this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
128 this.cshTask.delay(this.searchResetDelay);
131 this.trigger.un('click', this.onTriggerClick, this);
132 this.trigger.on('mousedown', function(e, target, options) {
134 this.onTriggerClick();
137 this.on('collapse', function(e, target, options) {
138 Ext.getDoc().un('mouseup', this.collapseIf, this);
141 this.on('expand', function(e, target, options) {
142 Ext.getDoc().on('mouseup', this.collapseIf, this);
146 clearSearchHistory : function() {
147 this.lastSelectedIndex = 0;
148 this.lastSearchTerm = false;
151 selectFirst : function() {
152 this.focusAndSelect(this.store.data.first());
155 selectLast : function() {
156 this.focusAndSelect(this.store.data.last());
159 selectPrevPage : function() {
160 if( !this.rowHeight ) {
163 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
164 this.focusAndSelect(this.store.getAt(index));
167 selectNextPage : function() {
168 if( !this.rowHeight ) {
171 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
172 this.focusAndSelect(this.store.getAt(index));
175 search : function(field, value, startIndex) {
176 field = field || this.displayField;
177 this.lastSearchTerm = value;
178 var index = this.store.find.apply(this.store, arguments);
180 this.focusAndSelect(index);
184 focusAndSelect : function(record) {
185 var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
186 this.select(index, this.isExpanded());
187 this.onSelect(this.store.getAt(index), index, this.isExpanded());
190 calcRowsPerPage : function() {
191 if( this.store.getCount() ) {
192 this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
193 this.rowsPerPage = this.maxHeight / this.rowHeight;
195 this.rowHeight = false;
201 Ext.reg('selectbox', Ext.ux.form.SelectBox);
204 Ext.ux.SelectBox = Ext.ux.form.SelectBox;