-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-form.field.ComboBox-method-constructor'><span id='Ext-form.field.ComboBox'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-form-field-ComboBox-method-constructor'><span id='Ext-form-field-ComboBox'>/**
</span></span> * @class Ext.form.field.ComboBox
* @extends Ext.form.field.Picker
*
* A combobox control with support for autocomplete, remote loading, and many other features.
*
- * A ComboBox is like a combination of a traditional HTML text `&lt;input&gt;` field and a `&lt;select&gt;`
+ * A ComboBox is like a combination of a traditional HTML text `<input>` field and a `<select>`
* field; the user is able to type freely into the field, and/or pick values from a dropdown selection
* list. The user can input any value by default, even if it does not appear in the selection list;
* to prevent free-form values and restrict them to items in the list, set {@link #forceSelection} to `true`.
alternateClassName: 'Ext.form.ComboBox',
alias: ['widget.combobox', 'widget.combo'],
-<span id='Ext-form.field.ComboBox-cfg-triggerCls'> /**
+<span id='Ext-form-field-ComboBox-cfg-triggerCls'> /**
</span> * @cfg {String} triggerCls
* An additional CSS class used to style the trigger button. The trigger will always get the
* {@link #triggerBaseCls} by default and <tt>triggerCls</tt> will be <b>appended</b> if specified.
*/
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
-<span id='Ext-form.field.ComboBox-cfg-store'> /**
+<span id='Ext-form-field-ComboBox-cfg-store'> /**
</span> * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to <tt>undefined</tt>).
* Acceptable values for this property are:
* <div class="mdetail-params"><ul>
* <p>See also <tt>{@link #queryMode}</tt>.</p>
*/
-<span id='Ext-form.field.ComboBox-cfg-multiSelect'> /**
+<span id='Ext-form-field-ComboBox-cfg-multiSelect'> /**
</span> * @cfg {Boolean} multiSelect
* If set to <tt>true</tt>, allows the combo field to hold more than one value at a time, and allows selecting
* multiple items from the dropdown list. The combo's text field will show all selected values separated by
*/
multiSelect: false,
-<span id='Ext-form.field.ComboBox-cfg-delimiter'> /**
+<span id='Ext-form-field-ComboBox-cfg-delimiter'> /**
</span> * @cfg {String} delimiter
* The character(s) used to separate the {@link #displayField display values} of multiple selected items
* when <tt>{@link #multiSelect} = true</tt>. Defaults to <tt>', '</tt>.
*/
delimiter: ', ',
-<span id='Ext-form.field.ComboBox-cfg-displayField'> /**
+<span id='Ext-form-field-ComboBox-cfg-displayField'> /**
</span> * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this
* ComboBox (defaults to 'text').
* <p>See also <tt>{@link #valueField}</tt>.</p>
*/
displayField: 'text',
-<span id='Ext-form.field.ComboBox-cfg-valueField'> /**
+<span id='Ext-form-field-ComboBox-cfg-valueField'> /**
</span> * @cfg {String} valueField
* @required
* The underlying {@link Ext.data.Field#name data value name} to bind to this ComboBox (defaults to match
* mapped. See also <tt>{@link #displayField}</tt>.</p>
*/
-<span id='Ext-form.field.ComboBox-cfg-triggerAction'> /**
+<span id='Ext-form-field-ComboBox-cfg-triggerAction'> /**
</span> * @cfg {String} triggerAction The action to execute when the trigger is clicked.
* <div class="mdetail-params"><ul>
* <li><b><tt>'all'</tt></b> : <b>Default</b>
*/
triggerAction: 'all',
-<span id='Ext-form.field.ComboBox-cfg-allQuery'> /**
+<span id='Ext-form-field-ComboBox-cfg-allQuery'> /**
</span> * @cfg {String} allQuery The text query to send to the server to return all records for the list
* with no filtering (defaults to '')
*/
allQuery: '',
-<span id='Ext-form.field.ComboBox-cfg-queryParam'> /**
-</span> * @cfg {String} queryParam Name of the query ({@link Ext.data.Store#baseParam baseParam} name for the store)
- * as it will be passed on the querystring (defaults to <tt>'query'</tt>)
+<span id='Ext-form-field-ComboBox-cfg-queryParam'> /**
+</span> * @cfg {String} queryParam Name of the query ({@link Ext.data.proxy.Proxy#extraParam extraParam} name for the store)
+ * as it will be passed on the querystring (defaults to <tt>'query'</tt>). If explicitly set to a falsey value it will
+ * not be send.
*/
queryParam: 'query',
-<span id='Ext-form.field.ComboBox-cfg-queryMode'> /**
+<span id='Ext-form-field-ComboBox-cfg-queryMode'> /**
</span> * @cfg {String} queryMode
* The mode for queries. Acceptable values are:
* <div class="mdetail-params"><ul>
queryCaching: true,
-<span id='Ext-form.field.ComboBox-cfg-pageSize'> /**
+<span id='Ext-form-field-ComboBox-cfg-pageSize'> /**
</span> * @cfg {Number} pageSize If greater than <tt>0</tt>, a {@link Ext.toolbar.Paging} is displayed in the
* footer of the dropdown list and the {@link #doQuery filter queries} will execute with page start and
* {@link Ext.toolbar.Paging#pageSize limit} parameters. Only applies when <tt>{@link #queryMode} = 'remote'</tt>
*/
pageSize: 0,
-<span id='Ext-form.field.ComboBox-cfg-queryDelay'> /**
+<span id='Ext-form-field-ComboBox-cfg-queryDelay'> /**
</span> * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and
* sending the query to filter the dropdown list (defaults to <tt>500</tt> if <tt>{@link #queryMode} = 'remote'</tt>
* or <tt>10</tt> if <tt>{@link #queryMode} = 'local'</tt>)
*/
-<span id='Ext-form.field.ComboBox-cfg-minChars'> /**
+<span id='Ext-form-field-ComboBox-cfg-minChars'> /**
</span> * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and
* {@link #typeAhead} activate (defaults to <tt>4</tt> if <tt>{@link #queryMode} = 'remote'</tt> or <tt>0</tt> if
* <tt>{@link #queryMode} = 'local'</tt>, does not apply if <tt>{@link Ext.form.field.Trigger#editable editable} = false</tt>).
*/
-<span id='Ext-form.field.ComboBox-cfg-autoSelect'> /**
-</span> * @cfg {Boolean} autoSelect <tt>true</tt> to select the first result gathered by the data store (defaults
- * to <tt>true</tt>). A false value would require a manual selection from the dropdown list to set the components value
- * unless the value of ({@link #typeAhead}) were true.
+<span id='Ext-form-field-ComboBox-cfg-autoSelect'> /**
+</span> * @cfg {Boolean} autoSelect <tt>true</tt> to automatically highlight the first result gathered by the data store
+ * in the dropdown list when it is opened. (Defaults to <tt>true</tt>). A false value would cause nothing in the
+ * list to be highlighted automatically, so the user would have to manually highlight an item before pressing
+ * the enter or {@link #selectOnTab tab} key to select it (unless the value of ({@link #typeAhead}) were true),
+ * or use the mouse to select a value.
*/
autoSelect: true,
-<span id='Ext-form.field.ComboBox-cfg-typeAhead'> /**
+<span id='Ext-form-field-ComboBox-cfg-typeAhead'> /**
</span> * @cfg {Boolean} typeAhead <tt>true</tt> to populate and autoselect the remainder of the text being
* typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults
* to <tt>false</tt>)
*/
typeAhead: false,
-<span id='Ext-form.field.ComboBox-cfg-typeAheadDelay'> /**
+<span id='Ext-form-field-ComboBox-cfg-typeAheadDelay'> /**
</span> * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
* if <tt>{@link #typeAhead} = true</tt> (defaults to <tt>250</tt>)
*/
typeAheadDelay: 250,
-<span id='Ext-form.field.ComboBox-cfg-selectOnTab'> /**
+<span id='Ext-form-field-ComboBox-cfg-selectOnTab'> /**
</span> * @cfg {Boolean} selectOnTab
* Whether the Tab key should select the currently highlighted item. Defaults to <tt>true</tt>.
*/
selectOnTab: true,
-<span id='Ext-form.field.ComboBox-cfg-forceSelection'> /**
+<span id='Ext-form-field-ComboBox-cfg-forceSelection'> /**
</span> * @cfg {Boolean} forceSelection <tt>true</tt> to restrict the selected value to one of the values in the list,
* <tt>false</tt> to allow the user to set arbitrary text into the field (defaults to <tt>false</tt>)
*/
forceSelection: false,
-<span id='Ext-form.field.ComboBox-cfg-valueNotFoundText'> /**
+<span id='Ext-form-field-ComboBox-cfg-valueNotFoundText'> /**
</span> * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
* the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this
* default text is used, it means there is no value set and no validation will occur on this field.
*/
-<span id='Ext-form.field.ComboBox-property-lastQuery'> /**
+<span id='Ext-form-field-ComboBox-property-lastQuery'> /**
</span> * The value of the match string used to filter the store. Delete this property to force a requery.
* Example use:
* <pre><code>
* @type String
*/
-<span id='Ext-form.field.ComboBox-cfg-defaultListConfig'> /**
+<span id='Ext-form-field-ComboBox-cfg-defaultListConfig'> /**
</span> * @cfg {Object} defaultListConfig
* Set of options that will be used as defaults for the user-configured {@link #listConfig} object.
*/
shadow: 'sides'
},
-<span id='Ext-form.field.ComboBox-cfg-transform'> /**
+<span id='Ext-form-field-ComboBox-cfg-transform'> /**
</span> * @cfg {Mixed} transform
* The id, DOM node or {@link Ext.core.Element} of an existing HTML <tt>&lt;select&gt;</tt> element to
* convert into a ComboBox. The target select's options will be used to build the options in the ComboBox
* dropdown; a configured {@link #store} will take precedence over this.
*/
-<span id='Ext-form.field.ComboBox-cfg-listConfig'> /**
+<span id='Ext-form-field-ComboBox-cfg-listConfig'> /**
</span> * @cfg {Object} listConfig
* <p>An optional set of configuration properties that will be passed to the {@link Ext.view.BoundList}'s
* constructor. Any configuration that is valid for BoundList can be included. Some of the more useful
this.addEvents(
// TODO need beforeselect?
-<span id='Ext-form.field.ComboBox-event-beforequery'> /**
+<span id='Ext-form-field-ComboBox-event-beforequery'> /**
</span> * @event beforequery
* Fires before all queries are processed. Return false to cancel the query or set the queryEvent's
* cancel property to true.
}
},
-<span id='Ext-form.field.ComboBox-method-doRawQuery'> /**
+<span id='Ext-form-field-ComboBox-method-doRawQuery'> /**
</span> * @private
* Execute the query with the raw contents within the textfield.
*/
this.doQuery(this.getRawValue());
},
-<span id='Ext-form.field.ComboBox-method-doQuery'> /**
+<span id='Ext-form-field-ComboBox-method-doQuery'> /**
</span> * Executes a query to filter the dropdown list. Fires the {@link #beforequery} event prior to performing the
* query allowing the query action to be canceled if needed.
* @param {String} queryString The SQL query to execute
// private
getParams: function(queryString) {
var p = {},
- pageSize = this.pageSize;
- p[this.queryParam] = queryString;
+ pageSize = this.pageSize,
+ param = this.queryParam;
+
+ if (param) {
+ p[param] = queryString;
+ }
+
if (pageSize) {
p.start = 0;
p.limit = pageSize;
return p;
},
-<span id='Ext-form.field.ComboBox-method-doAutoSelect'> /**
+<span id='Ext-form-field-ComboBox-method-doAutoSelect'> /**
</span> * @private
* If the autoSelect config is true, and the picker is open, highlights the first item.
*/
me.doQueryTask.delay(me.queryDelay);
}
}
+
+ if (me.enableKeyEvents) {
+ me.callParent(arguments);
+ }
},
initEvents: function() {
var me = this;
me.callParent();
- // setup keyboard handling
- me.mon(me.inputEl, 'keyup', me.onKeyUp, me);
+ /*
+ * Setup keyboard handling. If enableKeyEvents is true, we already have
+ * a listener on the inputEl for keyup, so don't create a second.
+ */
+ if (!me.enableKeyEvents) {
+ me.mon(me.inputEl, 'keyup', me.onKeyUp, me);
+ }
},
createPicker: function() {
}
},
-<span id='Ext-form.field.ComboBox-method-onExpand'> /**
+<span id='Ext-form-field-ComboBox-method-onExpand'> /**
</span> * @private
* Enables the key nav for the BoundList when it is expanded.
*/
me.inputEl.focus();
},
-<span id='Ext-form.field.ComboBox-method-onCollapse'> /**
+<span id='Ext-form-field-ComboBox-method-onCollapse'> /**
</span> * @private
* Disables the key nav for the BoundList when it is collapsed.
*/
}
},
-<span id='Ext-form.field.ComboBox-method-select'> /**
+<span id='Ext-form-field-ComboBox-method-select'> /**
</span> * Selects an item by a {@link Ext.data.Model Model}, or by a key value.
* @param r
*/
this.setValue(r, true);
},
-<span id='Ext-form.field.ComboBox-method-findRecord'> /**
+<span id='Ext-form-field-ComboBox-method-findRecord'> /**
</span> * Find the record by searching for a specific field/value combination
* Returns an Ext.data.Record or false
* @private
return this.findRecord(this.displayField, value);
},
-<span id='Ext-form.field.ComboBox-method-setValue'> /**
+<span id='Ext-form-field-ComboBox-method-setValue'> /**
</span> * Sets the specified value(s) into the field. For each value, if a record is found in the {@link #store} that
* matches based on the {@link #valueField}, then that record's {@link #displayField} will be displayed in the
* field. If no match is found, and the {@link #valueNotFoundText} config option is defined, then that will be
return me;
},
-<span id='Ext-form.field.ComboBox-method-getDisplayValue'> /**
+<span id='Ext-form-field-ComboBox-method-getDisplayValue'> /**
</span> * @private Generate the string value to be displayed in the text field for the currently stored value
*/
getDisplayValue: function() {
return true;
},
-<span id='Ext-form.field.ComboBox-method-clearValue'> /**
+<span id='Ext-form-field-ComboBox-method-clearValue'> /**
</span> * Clears any value currently set in the ComboBox.
*/
clearValue: function() {
this.setValue([]);
},
-<span id='Ext-form.field.ComboBox-method-syncSelection'> /**
+<span id='Ext-form-field-ComboBox-method-syncSelection'> /**
</span> * @private Synchronizes the selection in the picker to match the current value of the combobox.
*/
syncSelection: function() {
}
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>