- Replaced color picker form control with a more robust version.
This commit is contained in:
JT Smith
parent
6fe068e42d
commit
6e0470771e
1193 changed files with 342 additions and 223 deletions
801
www/extras/extjs/docs/output/Combo.jss.html
vendored
Normal file
801
www/extras/extjs/docs/output/Combo.jss.html
vendored
Normal file
|
|
@ -0,0 +1,801 @@
|
|||
<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:
|
||||
* <ul style="padding:5px;padding-left:16px;">
|
||||
* <li>{Ext.form.ComboBox} combo - This combo box</li>
|
||||
* <li>{String} query - The query</li>
|
||||
* <li>{Boolean} forceAll - true to force "all" query</li>
|
||||
* <li>{Boolean} cancel - set to true to cancel the query.</li>
|
||||
* </ul>
|
||||
* @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 < 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: "input", type: "text", size: "24", autocomplete: "off"})
|
||||
*/</i>
|
||||
|
||||
<i>// private</i>
|
||||
defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
|
||||
<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 <b>appended</b> <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 "sides" <b>for</b> the <b>default</b> effect, "frame" <b>for</b> 4-way shadow, and "drop" <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 = '<div class="'+cls+'-item">{' + <b>this</b>.displayField + '}</div>';
|
||||
}
|
||||
|
||||
<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, {
|
||||
"up" : <b>function</b>(e){
|
||||
<b>this</b>.inKeyMode = true;
|
||||
<b>this</b>.selectPrev();
|
||||
},
|
||||
|
||||
"down" : <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();
|
||||
}
|
||||
},
|
||||
|
||||
"enter" : <b>function</b>(e){
|
||||
<b>this</b>.onViewClick();
|
||||
<i>//<b>return</b> true;</i>
|
||||
},
|
||||
|
||||
"esc" : <b>function</b>(e){
|
||||
<b>this</b>.collapse();
|
||||
},
|
||||
|
||||
"tab" : <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("keyup", <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() && !<b>this</b>.list.isVisible()){
|
||||
<b>this</b>.fireEvent("specialkey", <b>this</b>, e);
|
||||
}
|
||||
},
|
||||
|
||||
<i>// private</i>
|
||||
onResize: <b>function</b>(w, h){
|
||||
<b>if</b>(this.list && <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 ?
|
||||
'<div class="loading-indicator">'+<b>this</b>.loadingText+'</div>' : '');
|
||||
<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() > 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 && <b>this</b>.lastKey != Ext.EventObject.BACKSPACE && <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() > 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() > 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 < <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 && 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 > 0){
|
||||
<b>if</b>(this.selectedIndex == -1){
|
||||
<b>this</b>.select(0);
|
||||
}<b>else</b> if(<b>this</b>.selectedIndex < 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 > 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 && !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 > 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 >= <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) && !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 © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue