oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/extjs/docs/output/Combo.jss.html

801 lines
No EOL
32 KiB
HTML
Raw Blame History

<html><head><title>Combo.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Combo.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.form.ComboBox
* @extends Ext.form.TriggerField
* A combobox control <b>with</b> support <b>for</b> autocomplete, remote-loading, paging and many other features.
* @constructor
* Create a <b>new</b> ComboBox.
* @param {Object} config Configuration options
*/</i>
Ext.form.ComboBox = <b>function</b>(config){
Ext.form.ComboBox.superclass.constructor.call(<b>this</b>, config);
<b>this</b>.addEvents({
<i>/**
* @event expand
* Fires when the dropdown list is expanded
* @param {Ext.form.ComboBox} combo This combo box
*/</i>
'expand' : true,
<i>/**
* @event collapse
* Fires when the dropdown list is collapsed
* @param {Ext.form.ComboBox} combo This combo box
*/</i>
'collapse' : true,
<i>/**
* @event beforeselect
* Fires before a list item is selected. Return false to cancel the selection.
* @param {Ext.form.ComboBox} combo This combo box
* @param {Ext.data.Record} record The data record returned from the underlying store
* @param {Number} index The index of the selected item <b>in</b> the dropdown list
*/</i>
'beforeselect' : true,
<i>/**
* @event select
* Fires when a list item is selected
* @param {Ext.form.ComboBox} combo This combo box
* @param {Ext.data.Record} record The data record returned from the underlying store
* @param {Number} index The index of the selected item <b>in</b> the dropdown list
*/</i>
'select' : true,
<i>/**
* @event beforequery
* Fires before all queries are processed. Return false to cancel the query or set cancel to true.
* The event object passed has these properties:
* &lt;ul style=&quot;padding:5px;padding-left:16px;&quot;&gt;
* &lt;li&gt;{Ext.form.ComboBox} combo - This combo box&lt;/li&gt;
* &lt;li&gt;{String} query - The query&lt;/li&gt;
* &lt;li&gt;{Boolean} forceAll - true to force &quot;all&quot; query&lt;/li&gt;
* &lt;li&gt;{Boolean} cancel - set to true to cancel the query.&lt;/li&gt;
* &lt;/ul&gt;
* @param {Object} e The query event object
*/</i>
'beforequery': true
});
<b>if</b>(this.transform){
<b>var</b> s = Ext.getDom(<b>this</b>.transform);
<b>if</b>(!<b>this</b>.hiddenName){
<b>this</b>.hiddenName = s.name;
}
<b>if</b>(!<b>this</b>.store){
<b>this</b>.mode = 'local';
<b>var</b> d = [], opts = s.options;
<b>for</b>(var i = 0, len = opts.length;i &lt; len; i++){
<b>var</b> o = opts[i];
<b>var</b> value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
<b>if</b>(o.selected) {
<b>this</b>.value = value;
}
d.push([value, o.text]);
}
<b>this</b>.store = <b>new</b> Ext.data.SimpleStore({
'id': 0,
fields: ['value', 'text'],
data : d
});
<b>this</b>.valueField = 'value';
<b>this</b>.displayField = 'text';
}
s.name = Ext.id(); <i>// wipe out the name <b>in</b> case somewhere <b>else</b> they have a reference</i>
<b>if</b>(!<b>this</b>.lazyRender){
<b>this</b>.target = true;
<b>this</b>.el = Ext.DomHelper.insertBefore(s, <b>this</b>.autoCreate || <b>this</b>.defaultAutoCreate);
s.parentNode.removeChild(s); <i>// remove it</i>
<b>this</b>.render(<b>this</b>.el.parentNode);
}<b>else</b>{
s.parentNode.removeChild(s); <i>// remove it</i>
}
}
<b>this</b>.selectedIndex = -1;
<b>if</b>(this.mode == 'local'){
<b>if</b>(config.queryDelay === undefined){
<b>this</b>.queryDelay = 10;
}
<b>if</b>(config.minChars === undefined){
<b>this</b>.minChars = 0;
}
}
};
Ext.extend(Ext.form.ComboBox, Ext.form.TriggerField, {
<i>/**
* @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
*/</i>
<i>// holder</i>
<i>/***
* @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
* rendering into an Ext.Editor, defaults to false)
*/</i>
<i>// holder</i>
<i>/***
* @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true <b>for</b> a <b>default</b> element spec (defaults to:
* {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;24&quot;, autocomplete: &quot;off&quot;})
*/</i>
<i>// private</i>
defaultAutoCreate : {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;24&quot;, autocomplete: &quot;off&quot;},
<i>/**
* @cfg {Number} listWidth The width <b>in</b> pixels of the dropdown list (defaults to the width of the ComboBox field)
*/</i>
listWidth: undefined,
<i>/**
* @cfg {String} displayField The underlying data field name to bind to <b>this</b> CombBox (defaults to undefined <b>if</b>
* mode = 'remote' or 'text' <b>if</b> mode = 'local')
*/</i>
displayField: undefined,
<i>/**
* @cfg {String} valueField The underlying data value name to bind to <b>this</b> CombBox (defaults to undefined <b>if</b>
* mode = 'remote' or 'value' <b>if</b> mode = 'local')
*/</i>
valueField: undefined,
<i>/**
* @cfg {String} hiddenName If specified, a hidden form field <b>with</b> this name is dynamically generated to store the
* field's data value (defaults to the underlying DOM element's name)
*/</i>
hiddenName: undefined,
<i>/**
* @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
*/</i>
listClass: '',
<i>/**
* @cfg {String} selectedClass CSS class to apply to the selected item <b>in</b> the dropdown list (defaults to 'x-combo-selected')
*/</i>
selectedClass: 'x-combo-selected',
<i>/**
* @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' and triggerClass will be &lt;b&gt;appended&lt;/b&gt; <b>if</b> specified (defaults to 'x-form-arrow-trigger'
* which displays a downward arrow icon).
*/</i>
triggerClass : 'x-form-arrow-trigger',
<i>/**
* @cfg {Boolean/String} shadow True or &quot;sides&quot; <b>for</b> the <b>default</b> effect, &quot;frame&quot; <b>for</b> 4-way shadow, and &quot;drop&quot; <b>for</b> bottom-right
*/</i>
shadow:'sides',
<i>/**
* @cfg {String} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} <b>for</b> details on supported
* anchor positions (defaults to 'tl-bl')
*/</i>
listAlign: 'tl-bl?',
<i>/**
* @cfg {Number} maxHeight The maximum height <b>in</b> pixels of the dropdown list before scrollbars are shown (defaults to 300)
*/</i>
maxHeight: 300,
<i>/**
* @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
* query specified by the allQuery config option (defaults to 'query')
*/</i>
triggerAction: 'query',
<i>/**
* @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
* (defaults to 4, does not apply <b>if</b> editable = false)
*/</i>
minChars : 4,
<i>/**
* @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
* delay (typeAheadDelay) <b>if</b> it matches a known value (defaults to false)
*/</i>
typeAhead: false,
<i>/**
* @cfg {Number} queryDelay The length of time <b>in</b> milliseconds to delay between the start of typing and sending the
* query to filter the dropdown list (defaults to 500 <b>if</b> mode = 'remote' or 10 <b>if</b> mode = 'local')
*/</i>
queryDelay: 500,
<i>/**
* @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed <b>in</b> the footer of the dropdown list and the
* filter queries will execute <b>with</b> page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
*/</i>
pageSize: 0,
<i>/**
* @cfg {Boolean} selectOnFocus True to select any existing text <b>in</b> the field immediately on focus. Only applies
* when editable = true (defaults to false)
*/</i>
selectOnFocus:false,
<i>/**
* @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
*/</i>
queryParam: 'query',
<i>/**
* @cfg {String} loadingText The text to display <b>in</b> the dropdown list <b>while</b> data is loading. Only applies
* when mode = 'remote' (defaults to 'Loading...')
*/</i>
loadingText: 'Loading...',
<i>/**
* @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
*/</i>
resizable: false,
<i>/**
* @cfg {Number} handleHeight The height <b>in</b> pixels of the dropdown list resize handle <b>if</b> resizable = true (defaults to 8)
*/</i>
handleHeight : 8,
<i>/**
* @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
* traditional select (defaults to true)
*/</i>
editable: true,
<i>/**
* @cfg {String} allQuery The text query to send to the server to <b>return</b> all records <b>for</b> the list <b>with</b> no filtering (defaults to '')
*/</i>
allQuery: '',
<i>/**
* @cfg {String} mode Set to 'local' <b>if</b> the ComboBox loads local data (defaults to 'remote' which loads from the server)
*/</i>
mode: 'remote',
<i>/**
* @cfg {Number} minListWidth The minimum width of the dropdown list <b>in</b> pixels (defaults to 70, will be ignored <b>if</b>
* listWidth has a higher value)
*/</i>
minListWidth : 70,
<i>/**
* @cfg {Boolean} forceSelection True to restrict the selected value to one of the values <b>in</b> the list, false to
* allow the user to set arbitrary text into the field (defaults to false)
*/</i>
forceSelection:false,
<i>/**
* @cfg {Number} typeAheadDelay The length of time <b>in</b> milliseconds to wait until the typeahead text is displayed
* <b>if</b> typeAhead = true (defaults to 250)
*/</i>
typeAheadDelay : 250,
<i>/**
* @cfg {String} valueNotFoundText When using a name/value combo, <b>if</b> the value passed to setValue is not found <b>in</b>
* the store, valueNotFoundText will be displayed as the field text <b>if</b> defined (defaults to undefined)
*/</i>
valueNotFoundText : undefined,
<i>// private</i>
onRender : <b>function</b>(ct, position){
Ext.form.ComboBox.superclass.onRender.call(<b>this</b>, ct, position);
<b>if</b>(this.hiddenName){
<b>this</b>.hiddenField = <b>this</b>.el.insertSibling({tag:'input', type:'hidden', name: <b>this</b>.hiddenName, id: <b>this</b>.hiddenName},
'before', true);
<b>this</b>.hiddenField.value =
<b>this</b>.hiddenValue !== undefined ? <b>this</b>.hiddenValue :
<b>this</b>.value !== undefined ? <b>this</b>.value : '';
<i>// prevent input submission</i>
<b>this</b>.el.dom.removeAttribute('name');
}
<b>if</b>(Ext.isGecko){
<b>this</b>.el.dom.setAttribute('autocomplete', 'off');
}
<b>var</b> cls = 'x-combo-list';
<b>this</b>.list = <b>new</b> Ext.Layer({
shadow: <b>this</b>.shadow, cls: [cls, <b>this</b>.listClass].join(' '), constrain:false
});
<b>this</b>.list.setWidth(<b>this</b>.listWidth || Math.max(<b>this</b>.wrap.getWidth(), <b>this</b>.minListWidth));
<b>this</b>.list.swallowEvent('mousewheel');
<b>this</b>.assetHeight = 0;
<b>if</b>(this.title){
<b>this</b>.header = <b>this</b>.list.createChild({cls:cls+'-hd', html: <b>this</b>.title});
<b>this</b>.assetHeight += <b>this</b>.header.getHeight();
}
<b>this</b>.innerList = <b>this</b>.list.createChild({cls:cls+'-inner'});
<b>this</b>.innerList.on('mouseover', <b>this</b>.onViewOver, <b>this</b>);
<b>this</b>.innerList.on('mousemove', <b>this</b>.onViewMove, <b>this</b>);
<b>if</b>(this.pageSize){
<b>this</b>.footer = <b>this</b>.list.createChild({cls:cls+'-ft'});
<b>this</b>.pageTb = <b>new</b> Ext.PagingToolbar(<b>this</b>.footer, <b>this</b>.store,
{pageSize: <b>this</b>.pageSize});
<b>this</b>.assetHeight += <b>this</b>.footer.getHeight();
}
<b>if</b>(!<b>this</b>.tpl){
<b>this</b>.tpl = '&lt;div class=&quot;'+cls+'-item&quot;&gt;{' + <b>this</b>.displayField + '}&lt;/div&gt;';
}
<b>this</b>.view = <b>new</b> Ext.View(<b>this</b>.innerList, <b>this</b>.tpl, {
singleSelect:true, store: <b>this</b>.store, selectedClass: <b>this</b>.selectedClass
});
<b>this</b>.view.on('click', <b>this</b>.onViewClick, <b>this</b>);
<b>this</b>.store.on('beforeload', <b>this</b>.onBeforeLoad, <b>this</b>);
<b>this</b>.store.on('load', <b>this</b>.onLoad, <b>this</b>);
<b>this</b>.store.on('loadexception', <b>this</b>.collapse, <b>this</b>);
<b>if</b>(this.resizable){
<b>this</b>.resizer = <b>new</b> Ext.Resizable(<b>this</b>.list, {
pinned:true, handles:'se'
});
<b>this</b>.resizer.on('resize', <b>function</b>(r, w, h){
<b>this</b>.maxHeight = h-<b>this</b>.handleHeight-<b>this</b>.list.getFrameWidth('tb')-<b>this</b>.assetHeight;
<b>this</b>.listWidth = w;
<b>this</b>.restrictHeight();
}, <b>this</b>);
<b>this</b>[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', <b>this</b>.handleHeight+'px');
}
<b>if</b>(!<b>this</b>.editable){
<b>this</b>.editable = true;
<b>this</b>.setEditable(false);
}
},
<i>// private</i>
initEvents : <b>function</b>(){
Ext.form.ComboBox.superclass.initEvents.call(<b>this</b>);
<b>this</b>.keyNav = <b>new</b> Ext.KeyNav(<b>this</b>.el, {
&quot;up&quot; : <b>function</b>(e){
<b>this</b>.inKeyMode = true;
<b>this</b>.selectPrev();
},
&quot;down&quot; : <b>function</b>(e){
<b>if</b>(!<b>this</b>.isExpanded()){
<b>this</b>.onTriggerClick();
}<b>else</b>{
<b>this</b>.inKeyMode = true;
<b>this</b>.selectNext();
}
},
&quot;enter&quot; : <b>function</b>(e){
<b>this</b>.onViewClick();
<i>//<b>return</b> true;</i>
},
&quot;esc&quot; : <b>function</b>(e){
<b>this</b>.collapse();
},
&quot;tab&quot; : <b>function</b>(e){
<b>this</b>.onViewClick(false);
<b>return</b> true;
},
scope : <b>this</b>,
doRelay : <b>function</b>(foo, bar, hname){
<b>if</b>(hname == 'down' || <b>this</b>.scope.isExpanded()){
<b>return</b> Ext.KeyNav.prototype.doRelay.apply(<b>this</b>, arguments);
}
<b>return</b> true;
}
});
<b>this</b>.queryDelay = Math.max(<b>this</b>.queryDelay || 10,
<b>this</b>.mode == 'local' ? 10 : 250);
<b>this</b>.dqTask = <b>new</b> Ext.util.DelayedTask(<b>this</b>.initQuery, <b>this</b>);
<b>if</b>(this.typeAhead){
<b>this</b>.taTask = <b>new</b> Ext.util.DelayedTask(<b>this</b>.onTypeAhead, <b>this</b>);
}
<b>if</b>(this.editable !== false){
<b>this</b>.el.on(&quot;keyup&quot;, <b>this</b>.onKeyUp, <b>this</b>);
}
<b>if</b>(this.forceSelection){
<b>this</b>.on('blur', <b>this</b>.doForce, <b>this</b>);
}
},
onDestroy : <b>function</b>(){
<b>if</b>(this.view){
<b>this</b>.view.setStore(null);
<b>this</b>.view.el.removeAllListeners();
<b>this</b>.view.el.remove();
<b>this</b>.view.purgeListeners();
}
<b>if</b>(this.list){
<b>this</b>.list.destroy();
}
<b>if</b>(this.store){
<b>this</b>.store.un('beforeload', <b>this</b>.onBeforeLoad, <b>this</b>);
<b>this</b>.store.un('load', <b>this</b>.onLoad, <b>this</b>);
<b>this</b>.store.un('loadexception', <b>this</b>.collapse, <b>this</b>);
}
Ext.form.ComboBox.superclass.onDestroy.call(<b>this</b>);
},
<i>// private</i>
fireKey : <b>function</b>(e){
<b>if</b>(e.isNavKeyPress() &amp;&amp; !<b>this</b>.list.isVisible()){
<b>this</b>.fireEvent(&quot;specialkey&quot;, <b>this</b>, e);
}
},
<i>// private</i>
onResize: <b>function</b>(w, h){
<b>if</b>(this.list &amp;&amp; <b>this</b>.listWidth === undefined){
<b>this</b>.list.setWidth(Math.max(w, <b>this</b>.minListWidth));
}
},
<i>/**
* Allow or prevent the user from directly editing the field text. If false is passed <b>in</b>,
* the user will only be able to select from the items defined <b>in</b> the dropdown list. This method
* is the runtime equivalent of setting the editable config option at config time.
*/</i>
setEditable : <b>function</b>(value){
<b>if</b>(value == <b>this</b>.editable){
<b>return</b>;
}
<b>this</b>.editable = value;
<b>if</b>(!value){
<b>this</b>.el.dom.setAttribute('readOnly', true);
<b>this</b>.el.on('mousedown', <b>this</b>.onTriggerClick, <b>this</b>);
<b>this</b>.el.addClass('x-combo-noedit');
}<b>else</b>{
<b>this</b>.el.dom.setAttribute('readOnly', false);
<b>this</b>.el.un('mousedown', <b>this</b>.onTriggerClick, <b>this</b>);
<b>this</b>.el.removeClass('x-combo-noedit');
}
},
<i>// private</i>
onBeforeLoad : <b>function</b>(){
<b>if</b>(!<b>this</b>.hasFocus){
<b>return</b>;
}
<b>this</b>.innerList.update(<b>this</b>.loadingText ?
'&lt;div class=&quot;loading-indicator&quot;&gt;'+<b>this</b>.loadingText+'&lt;/div&gt;' : '');
<b>this</b>.restrictHeight();
<b>this</b>.selectedIndex = -1;
},
<i>// private</i>
onLoad : <b>function</b>(){
<b>if</b>(!<b>this</b>.hasFocus){
<b>return</b>;
}
<b>if</b>(this.store.getCount() &gt; 0){
<b>this</b>.expand();
<b>this</b>.restrictHeight();
<b>if</b>(this.lastQuery == <b>this</b>.allQuery){
<b>if</b>(this.editable){
<b>this</b>.el.dom.select();
}
<b>if</b>(!<b>this</b>.selectByValue(<b>this</b>.value, true)){
<b>this</b>.select(0, true);
}
}<b>else</b>{
<b>this</b>.selectNext();
<b>if</b>(this.typeAhead &amp;&amp; <b>this</b>.lastKey != Ext.EventObject.BACKSPACE &amp;&amp; <b>this</b>.lastKey != Ext.EventObject.DELETE){
<b>this</b>.taTask.delay(<b>this</b>.typeAheadDelay);
}
}
}<b>else</b>{
<b>this</b>.onEmptyResults();
}
<i>//<b>this</b>.el.focus();</i>
},
<i>// private</i>
onTypeAhead : <b>function</b>(){
<b>if</b>(this.store.getCount() &gt; 0){
<b>var</b> r = <b>this</b>.store.getAt(0);
<b>var</b> newValue = r.data[<b>this</b>.displayField];
<b>var</b> len = newValue.length;
<b>var</b> selStart = <b>this</b>.getRawValue().length;
<b>if</b>(selStart != len){
<b>this</b>.setRawValue(newValue);
<b>this</b>.selectText(selStart, newValue.length);
}
}
},
<i>// private</i>
onSelect : <b>function</b>(record, index){
<b>if</b>(this.fireEvent('beforeselect', <b>this</b>, record, index) !== false){
<b>this</b>.setValue(record.data[<b>this</b>.valueField || <b>this</b>.displayField]);
<b>this</b>.collapse();
<b>this</b>.fireEvent('select', <b>this</b>, record, index);
}
},
<i>/**
* Returns the currently-selected field value or empty string <b>if</b> no value is set.
* @<b>return</b> {String} value The selected value
*/</i>
getValue : <b>function</b>(){
<b>if</b>(this.valueField){
<b>return</b> typeof <b>this</b>.value != 'undefined' ? <b>this</b>.value : '';
}<b>else</b>{
<b>return</b> Ext.form.ComboBox.superclass.getValue.call(<b>this</b>);
}
},
<i>/**
* Clears any text/value currently set <b>in</b> the field
*/</i>
clearValue : <b>function</b>(){
<b>if</b>(this.hiddenField){
<b>this</b>.hiddenField.value = '';
}
<b>this</b>.setRawValue('');
<b>this</b>.lastSelectionText = '';
},
<i>/**
* Sets the specified value into the field. If the value finds a match, the corresponding record text
* will be displayed <b>in</b> the field. If the value does not match the data value of an existing item,
* and the valueNotFoundText config option is defined, it will be displayed as the <b>default</b> field text.
* Otherwise the field will be blank (although the value will still be set).
* @param {String} value The value to match
*/</i>
setValue : <b>function</b>(v){
<b>var</b> text = v;
<b>if</b>(this.valueField){
<b>var</b> r = <b>this</b>.findRecord(<b>this</b>.valueField, v);
<b>if</b>(r){
text = r.data[<b>this</b>.displayField];
}<b>else</b> if(<b>this</b>.valueNotFoundText){
text = <b>this</b>.valueNotFoundText;
}
}
<b>this</b>.lastSelectionText = text;
<b>if</b>(this.hiddenField){
<b>this</b>.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(<b>this</b>, text);
<b>this</b>.value = v;
},
<i>// private</i>
findRecord : <b>function</b>(prop, value){
<b>var</b> record;
<b>if</b>(this.store.getCount() &gt; 0){
<b>this</b>.store.each(<b>function</b>(r){
<b>if</b>(r.data[prop] == value){
record = r;
<b>return</b> false;
}
});
}
<b>return</b> record;
},
<i>// private</i>
onViewMove : <b>function</b>(e, t){
<b>this</b>.inKeyMode = false;
},
<i>// private</i>
onViewOver : <b>function</b>(e, t){
<b>if</b>(this.inKeyMode){ <i>// prevent key nav and mouse over conflicts</i>
<b>return</b>;
}
<b>var</b> item = <b>this</b>.view.findItemFromChild(t);
<b>if</b>(item){
<b>var</b> index = <b>this</b>.view.indexOf(item);
<b>this</b>.select(index, false);
}
},
<i>// private</i>
onViewClick : <b>function</b>(doFocus){
<b>var</b> index = <b>this</b>.view.getSelectedIndexes()[0];
<b>var</b> r = <b>this</b>.store.getAt(index);
<b>if</b>(r){
<b>this</b>.onSelect(r, index);
}
<b>if</b>(doFocus !== false){
<b>this</b>.el.focus();
}
},
<i>// private</i>
restrictHeight : <b>function</b>(){
<b>this</b>.innerList.dom.style.height = '';
<b>var</b> inner = <b>this</b>.innerList.dom;
<b>var</b> h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
<b>this</b>.innerList.setHeight(h &lt; <b>this</b>.maxHeight ? 'auto' : <b>this</b>.maxHeight);
<b>this</b>.list.beginUpdate();
<b>this</b>.list.setHeight(<b>this</b>.innerList.getHeight()+<b>this</b>.list.getFrameWidth('tb')+(<b>this</b>.resizable?<b>this</b>.handleHeight:0)+<b>this</b>.assetHeight);
<b>this</b>.list.alignTo(<b>this</b>.el, <b>this</b>.listAlign);
<b>this</b>.list.endUpdate();
},
<i>// private</i>
onEmptyResults : <b>function</b>(){
<b>this</b>.collapse();
},
<i>/**
* Returns true <b>if</b> the dropdown list is expanded, <b>else</b> false.
*/</i>
isExpanded : <b>function</b>(){
<b>return</b> this.list.isVisible();
},
<i>/**
* Select an item <b>in</b> the dropdown list by its data value
* @param {String} value The data value of the item to select
* @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
* selected item <b>if</b> it is not currently <b>in</b> view (defaults to true)
* @<b>return</b> {Boolean} valueFound True <b>if</b> the value matched an item <b>in</b> the list, <b>else</b> false
*/</i>
selectByValue : <b>function</b>(v, scrollIntoView){
<b>if</b>(v !== undefined &amp;&amp; v !== null){
<b>var</b> r = <b>this</b>.findRecord(<b>this</b>.valueField || <b>this</b>.displayField, v);
<b>if</b>(r){
<b>this</b>.select(<b>this</b>.store.indexOf(r), scrollIntoView);
<b>return</b> true;
}
}
<b>return</b> false;
},
<i>/**
* Select an item <b>in</b> the dropdown list by its numeric index <b>in</b> the list
* @param {Number} index The zero-based index of the list item to select
* @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
* selected item <b>if</b> it is not currently <b>in</b> view (defaults to true)
*/</i>
select : <b>function</b>(index, scrollIntoView){
<b>this</b>.selectedIndex = index;
<b>this</b>.view.select(index);
<b>if</b>(scrollIntoView !== false){
<b>var</b> el = <b>this</b>.view.getNode(index);
<b>if</b>(el){
<b>this</b>.innerList.scrollChildIntoView(el);
}
}
},
<i>/**
* Select the next item <b>in</b> the dropdown list (selects the first item by <b>default</b> if no items are currently selected)
*/</i>
selectNext : <b>function</b>(){
<b>var</b> ct = <b>this</b>.store.getCount();
<b>if</b>(ct &gt; 0){
<b>if</b>(this.selectedIndex == -1){
<b>this</b>.select(0);
}<b>else</b> if(<b>this</b>.selectedIndex &lt; ct-1){
<b>this</b>.select(<b>this</b>.selectedIndex+1);
}
}
},
<i>/**
* Select the previous item <b>in</b> the dropdown list (selects the first item by <b>default</b> if no items are currently selected)
*/</i>
selectPrev : <b>function</b>(){
<b>var</b> ct = <b>this</b>.store.getCount();
<b>if</b>(ct &gt; 0){
<b>if</b>(this.selectedIndex == -1){
<b>this</b>.select(0);
}<b>else</b> if(<b>this</b>.selectedIndex != 0){
<b>this</b>.select(<b>this</b>.selectedIndex-1);
}
}
},
<i>// private</i>
onKeyUp : <b>function</b>(e){
<b>if</b>(this.editable !== false &amp;&amp; !e.isSpecialKey()){
<b>this</b>.lastKey = e.getKey();
<b>this</b>.dqTask.delay(<b>this</b>.queryDelay);
}
},
<i>// private</i>
validateBlur : <b>function</b>(){
<b>return</b> !<b>this</b>.list || !<b>this</b>.list.isVisible();
},
<i>// private</i>
initQuery : <b>function</b>(){
<b>this</b>.doQuery(<b>this</b>.getRawValue());
},
<i>// private</i>
doForce : <b>function</b>(){
<b>if</b>(this.el.dom.value.length &gt; 0){
<b>this</b>.el.dom.value =
<b>this</b>.lastSelectionText === undefined ? '' : <b>this</b>.lastSelectionText;
<b>this</b>.applyEmptyText();
}
},
<i>/**
* Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
* query allowing the query action to be canceled <b>if</b> needed.
* @param {String} query The sql query to execute
* @param {Boolean} forceAll True to force the query to execute even <b>if</b> there are currently fewer characters
* <b>in</b> the field than the minimum specified by the minChars config option. It also clears any filter previously
* saved <b>in</b> the current store (defaults to false)
*/</i>
doQuery : <b>function</b>(q, forceAll){
<b>if</b>(q === undefined || q === null){
q = '';
}
<b>var</b> qe = {
query: q,
forceAll: forceAll,
combo: <b>this</b>,
cancel:false
};
<b>if</b>(this.fireEvent('beforequery', qe)===false || qe.cancel){
<b>return</b> false;
}
q = qe.query;
forceAll = qe.forceAll;
<b>if</b>(forceAll === true || (q.length &gt;= <b>this</b>.minChars)){
<b>if</b>(this.lastQuery != q){
<b>this</b>.lastQuery = q;
<b>if</b>(this.mode == 'local'){
<b>this</b>.selectedIndex = -1;
<b>if</b>(forceAll){
<b>this</b>.store.clearFilter();
}<b>else</b>{
<b>this</b>.store.filter(<b>this</b>.displayField, q);
}
<b>this</b>.onLoad();
}<b>else</b>{
<b>this</b>.store.baseParams[<b>this</b>.queryParam] = q;
<b>this</b>.store.load({
params: <b>this</b>.getParams(q)
});
<b>this</b>.expand();
}
}<b>else</b>{
<b>this</b>.selectedIndex = -1;
<b>this</b>.onLoad();
}
}
},
<i>// private</i>
getParams : <b>function</b>(q){
<b>var</b> p = {};
<i>//p[<b>this</b>.queryParam] = q;</i>
<b>if</b>(this.pageSize){
p.start = 0;
p.limit = <b>this</b>.pageSize;
}
<b>return</b> p;
},
<i>/**
* Hides the dropdown list <b>if</b> it is currently expanded. Fires the 'collapse' event on completion.
*/</i>
collapse : <b>function</b>(){
<b>if</b>(!<b>this</b>.isExpanded()){
<b>return</b>;
}
<b>this</b>.list.hide();
Ext.get(document).un('mousedown', <b>this</b>.collapseIf, <b>this</b>);
<b>this</b>.fireEvent('collapse', <b>this</b>);
},
<i>// private</i>
collapseIf : <b>function</b>(e){
<b>if</b>(!e.within(<b>this</b>.wrap) &amp;&amp; !e.within(<b>this</b>.list)){
<b>this</b>.collapse();
}
},
<i>/**
* Expands the dropdown list <b>if</b> it is currently hidden. Fires the 'expand' event on completion.
*/</i>
expand : <b>function</b>(){
<b>if</b>(this.isExpanded() || !<b>this</b>.hasFocus){
<b>return</b>;
}
<b>this</b>.list.alignTo(<b>this</b>.el, <b>this</b>.listAlign);
<b>this</b>.list.show();
Ext.get(document).on('mousedown', <b>this</b>.collapseIf, <b>this</b>);
<b>this</b>.fireEvent('expand', <b>this</b>);
},
<i>// private</i>
<i>// Implements the <b>default</b> empty TriggerField.onTriggerClick <b>function</b></i>
onTriggerClick : <b>function</b>(){
<b>if</b>(this.disabled){
<b>return</b>;
}
<b>if</b>(this.isExpanded()){
<b>this</b>.collapse();
<b>this</b>.el.focus();
}<b>else</b>{
<b>this</b>.hasFocus = true;
<b>this</b>.doQuery(<b>this</b>.triggerAction == 'all' ?
<b>this</b>.doQuery(<b>this</b>.allQuery, true) : <b>this</b>.doQuery(<b>this</b>.getRawValue()));
<b>this</b>.el.focus();
}
}
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink