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
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js"><div id="method-Ext.ux.form.DateTime-SelectBox"></div>/**
\r
9 * Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
\r
10 * through the list, with item selection occurring when the mouse button is released.
\r
11 * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
\r
12 * on inner elements. Re-enabling editable after calling this will NOT work.
\r
14 * @author Corey Gilmore
\r
15 * http://extjs.com/forum/showthread.php?t=6392
\r
17 * @history 2007-07-08 jvs
\r
18 * Slight mods for Ext 2.0
\r
20 Ext.ux.SelectBox = function(config){
\r
21 this.searchResetDelay = 1000;
\r
22 config = config || {};
\r
23 config = Ext.apply(config || {}, {
\r
25 forceSelection: true,
\r
27 lastSearchTerm: false,
\r
28 triggerAction: 'all',
\r
32 Ext.ux.SelectBox.superclass.constructor.apply(this, arguments);
\r
34 this.lastSelectedIndex = this.selectedIndex || 0;
\r
37 Ext.extend(Ext.ux.SelectBox, Ext.form.ComboBox, {
\r
39 initEvents : function(){
\r
40 Ext.ux.SelectBox.superclass.initEvents.apply(this, arguments);
\r
41 // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
\r
42 this.el.on('keydown', this.keySearch, this, true);
\r
43 this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
\r
46 keySearch : function(e, target, options) {
\r
47 var raw = e.getKey();
\r
48 var key = String.fromCharCode(raw);
\r
51 if( !this.store.getCount() ) {
\r
56 case Ext.EventObject.HOME:
\r
61 case Ext.EventObject.END:
\r
66 case Ext.EventObject.PAGEDOWN:
\r
67 this.selectNextPage();
\r
71 case Ext.EventObject.PAGEUP:
\r
72 this.selectPrevPage();
\r
77 // skip special keys other than the shift key
\r
78 if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
\r
81 if( this.lastSearchTerm == key ) {
\r
82 startIndex = this.lastSelectedIndex;
\r
84 this.search(this.displayField, key, startIndex);
\r
85 this.cshTask.delay(this.searchResetDelay);
\r
88 onRender : function(ct, position) {
\r
89 this.store.on('load', this.calcRowsPerPage, this);
\r
90 Ext.ux.SelectBox.superclass.onRender.apply(this, arguments);
\r
91 if( this.mode == 'local' ) {
\r
92 this.calcRowsPerPage();
\r
96 onSelect : function(record, index, skipCollapse){
\r
97 if(this.fireEvent('beforeselect', this, record, index) !== false){
\r
98 this.setValue(record.data[this.valueField || this.displayField]);
\r
99 if( !skipCollapse ) {
\r
102 this.lastSelectedIndex = index + 1;
\r
103 this.fireEvent('select', this, record, index);
\r
107 render : function(ct) {
\r
108 Ext.ux.SelectBox.superclass.render.apply(this, arguments);
\r
109 if( Ext.isSafari ) {
\r
110 this.el.swallowEvent('mousedown', true);
\r
112 this.el.unselectable();
\r
113 this.innerList.unselectable();
\r
114 this.trigger.unselectable();
\r
115 this.innerList.on('mouseup', function(e, target, options) {
\r
116 if( target.id && target.id == this.innerList.id ) {
\r
119 this.onViewClick();
\r
122 this.innerList.on('mouseover', function(e, target, options) {
\r
123 if( target.id && target.id == this.innerList.id ) {
\r
126 this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
\r
127 this.cshTask.delay(this.searchResetDelay);
\r
130 this.trigger.un('click', this.onTriggerClick, this);
\r
131 this.trigger.on('mousedown', function(e, target, options) {
\r
132 e.preventDefault();
\r
133 this.onTriggerClick();
\r
136 this.on('collapse', function(e, target, options) {
\r
137 Ext.getDoc().un('mouseup', this.collapseIf, this);
\r
140 this.on('expand', function(e, target, options) {
\r
141 Ext.getDoc().on('mouseup', this.collapseIf, this);
\r
145 clearSearchHistory : function() {
\r
146 this.lastSelectedIndex = 0;
\r
147 this.lastSearchTerm = false;
\r
150 selectFirst : function() {
\r
151 this.focusAndSelect(this.store.data.first());
\r
154 selectLast : function() {
\r
155 this.focusAndSelect(this.store.data.last());
\r
158 selectPrevPage : function() {
\r
159 if( !this.rowHeight ) {
\r
162 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
\r
163 this.focusAndSelect(this.store.getAt(index));
\r
166 selectNextPage : function() {
\r
167 if( !this.rowHeight ) {
\r
170 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
\r
171 this.focusAndSelect(this.store.getAt(index));
\r
174 search : function(field, value, startIndex) {
\r
175 field = field || this.displayField;
\r
176 this.lastSearchTerm = value;
\r
177 var index = this.store.find.apply(this.store, arguments);
\r
178 if( index !== -1 ) {
\r
179 this.focusAndSelect(index);
\r
183 focusAndSelect : function(record) {
\r
184 var index = typeof record === 'number' ? record : this.store.indexOf(record);
\r
185 this.select(index, this.isExpanded());
\r
186 this.onSelect(this.store.getAt(record), index, this.isExpanded());
\r
189 calcRowsPerPage : function() {
\r
190 if( this.store.getCount() ) {
\r
191 this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
\r
192 this.rowsPerPage = this.maxHeight / this.rowHeight;
\r
194 this.rowHeight = false;
\r