← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/examples/ux/SelectBox.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/examples/ux/SelectBox.js
 
1
/*!
 
2
 * Ext JS Library 3.0.0
 
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');
 
8
 
 
9
/**
 
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
 
19
 * @xtype selectbox
 
20
 */
 
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 || {}, {
 
26
                        editable: false,
 
27
                        forceSelection: true,
 
28
                        rowHeight: false,
 
29
                        lastSearchTerm: false,
 
30
                        triggerAction: 'all',
 
31
                        mode: 'local'
 
32
                });
 
33
 
 
34
                Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
 
35
 
 
36
                this.lastSelectedIndex = this.selectedIndex || 0;
 
37
        },
 
38
 
 
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);
 
44
        },
 
45
 
 
46
        keySearch : function(e, target, options) {
 
47
                var raw = e.getKey();
 
48
                var key = String.fromCharCode(raw);
 
49
                var startIndex = 0;
 
50
 
 
51
                if( !this.store.getCount() ) {
 
52
                        return;
 
53
                }
 
54
 
 
55
                switch(raw) {
 
56
                        case Ext.EventObject.HOME:
 
57
                                e.stopEvent();
 
58
                                this.selectFirst();
 
59
                                return;
 
60
 
 
61
                        case Ext.EventObject.END:
 
62
                                e.stopEvent();
 
63
                                this.selectLast();
 
64
                                return;
 
65
 
 
66
                        case Ext.EventObject.PAGEDOWN:
 
67
                                this.selectNextPage();
 
68
                                e.stopEvent();
 
69
                                return;
 
70
 
 
71
                        case Ext.EventObject.PAGEUP:
 
72
                                this.selectPrevPage();
 
73
                                e.stopEvent();
 
74
                                return;
 
75
                }
 
76
 
 
77
                // skip special keys other than the shift key
 
78
                if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
 
79
                        return;
 
80
                }
 
81
                if( this.lastSearchTerm == key ) {
 
82
                        startIndex = this.lastSelectedIndex;
 
83
                }
 
84
                this.search(this.displayField, key, startIndex);
 
85
                this.cshTask.delay(this.searchResetDelay);
 
86
        },
 
87
 
 
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' ) {
 
92
                        this.calcRowsPerPage();
 
93
                }
 
94
        },
 
95
 
 
96
        onSelect : function(record, index, skipCollapse){
 
97
                if(this.fireEvent('beforeselect', this, record, index) !== false){
 
98
                        this.setValue(record.data[this.valueField || this.displayField]);
 
99
                        if( !skipCollapse ) {
 
100
                                this.collapse();
 
101
                        }
 
102
                        this.lastSelectedIndex = index + 1;
 
103
                        this.fireEvent('select', this, record, index);
 
104
                }
 
105
        },
 
106
 
 
107
        render : function(ct) {
 
108
                Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);
 
109
                if( Ext.isSafari ) {
 
110
                        this.el.swallowEvent('mousedown', true);
 
111
                }
 
112
                this.el.unselectable();
 
113
                this.innerList.unselectable();
 
114
                this.trigger.unselectable();
 
115
                this.innerList.on('mouseup', function(e, target, options) {
 
116
                        if( target.id && target.id == this.innerList.id ) {
 
117
                                return;
 
118
                        }
 
119
                        this.onViewClick();
 
120
                }, this);
 
121
 
 
122
                this.innerList.on('mouseover', function(e, target, options) {
 
123
                        if( target.id && target.id == this.innerList.id ) {
 
124
                                return;
 
125
                        }
 
126
                        this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
 
127
                        this.cshTask.delay(this.searchResetDelay);
 
128
                }, this);
 
129
 
 
130
                this.trigger.un('click', this.onTriggerClick, this);
 
131
                this.trigger.on('mousedown', function(e, target, options) {
 
132
                        e.preventDefault();
 
133
                        this.onTriggerClick();
 
134
                }, this);
 
135
 
 
136
                this.on('collapse', function(e, target, options) {
 
137
                        Ext.getDoc().un('mouseup', this.collapseIf, this);
 
138
                }, this, true);
 
139
 
 
140
                this.on('expand', function(e, target, options) {
 
141
                        Ext.getDoc().on('mouseup', this.collapseIf, this);
 
142
                }, this, true);
 
143
        },
 
144
 
 
145
        clearSearchHistory : function() {
 
146
                this.lastSelectedIndex = 0;
 
147
                this.lastSearchTerm = false;
 
148
        },
 
149
 
 
150
        selectFirst : function() {
 
151
                this.focusAndSelect(this.store.data.first());
 
152
        },
 
153
 
 
154
        selectLast : function() {
 
155
                this.focusAndSelect(this.store.data.last());
 
156
        },
 
157
 
 
158
        selectPrevPage : function() {
 
159
                if( !this.rowHeight ) {
 
160
                        return;
 
161
                }
 
162
                var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
 
163
                this.focusAndSelect(this.store.getAt(index));
 
164
        },
 
165
 
 
166
        selectNextPage : function() {
 
167
                if( !this.rowHeight ) {
 
168
                        return;
 
169
                }
 
170
                var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
 
171
                this.focusAndSelect(this.store.getAt(index));
 
172
        },
 
173
 
 
174
        search : function(field, value, startIndex) {
 
175
                field = field || this.displayField;
 
176
                this.lastSearchTerm = value;
 
177
                var index = this.store.find.apply(this.store, arguments);
 
178
                if( index !== -1 ) {
 
179
                        this.focusAndSelect(index);
 
180
                }
 
181
        },
 
182
 
 
183
        focusAndSelect : function(record) {
 
184
                var index = typeof record === 'number' ? record : this.store.indexOf(record);
 
185
                this.select(index, this.isExpanded());
 
186
                this.onSelect(this.store.getAt(record), index, this.isExpanded());
 
187
        },
 
188
 
 
189
        calcRowsPerPage : function() {
 
190
                if( this.store.getCount() ) {
 
191
                        this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
 
192
                        this.rowsPerPage = this.maxHeight / this.rowHeight;
 
193
                } else {
 
194
                        this.rowHeight = false;
 
195
                }
 
196
        }
 
197
 
 
198
});
 
199
 
 
200
Ext.reg('selectbox', Ext.ux.form.SelectBox);
 
201
 
 
202
//backwards compat
 
203
Ext.ux.SelectBox = Ext.ux.form.SelectBox;