415 lines
16 KiB
HTML
415 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/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-Editor-method-constructor'><span id='Ext-Editor'>/**
|
|
</span></span> * @class Ext.Editor
|
|
* @extends Ext.Component
|
|
* A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
|
|
* @constructor
|
|
* Create a new Editor
|
|
* @param {Object} config The config object
|
|
* @xtype editor
|
|
*/
|
|
Ext.Editor = function(field, config){
|
|
if(field.field){
|
|
this.field = Ext.create(field.field, 'textfield');
|
|
config = Ext.apply({}, field); // copy so we don't disturb original config
|
|
delete config.field;
|
|
}else{
|
|
this.field = field;
|
|
}
|
|
Ext.Editor.superclass.constructor.call(this, config);
|
|
};
|
|
|
|
Ext.extend(Ext.Editor, Ext.Component, {
|
|
<span id='Ext-Editor-cfg-field'> /**
|
|
</span> * @cfg {Ext.form.Field} field
|
|
* The Field object (or descendant) or config object for field
|
|
*/
|
|
<span id='Ext-Editor-cfg-allowBlur'> /**
|
|
</span> * @cfg {Boolean} allowBlur
|
|
* True to {@link #completeEdit complete the editing process} if in edit mode when the
|
|
* field is blurred. Defaults to <tt>true</tt>.
|
|
*/
|
|
allowBlur: true,
|
|
<span id='Ext-Editor-cfg-autoSize'> /**
|
|
</span> * @cfg {Boolean/String} autoSize
|
|
* True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
|
|
* or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false)
|
|
*/
|
|
<span id='Ext-Editor-cfg-revertInvalid'> /**
|
|
</span> * @cfg {Boolean} revertInvalid
|
|
* True to automatically revert the field value and cancel the edit when the user completes an edit and the field
|
|
* validation fails (defaults to true)
|
|
*/
|
|
<span id='Ext-Editor-cfg-ignoreNoChange'> /**
|
|
</span> * @cfg {Boolean} ignoreNoChange
|
|
* True to skip the edit completion process (no save, no events fired) if the user completes an edit and
|
|
* the value has not changed (defaults to false). Applies only to string values - edits for other data types
|
|
* will never be ignored.
|
|
*/
|
|
<span id='Ext-Editor-cfg-hideEl'> /**
|
|
</span> * @cfg {Boolean} hideEl
|
|
* False to keep the bound element visible while the editor is displayed (defaults to true)
|
|
*/
|
|
<span id='Ext-Editor-cfg-value'> /**
|
|
</span> * @cfg {Mixed} value
|
|
* The data value of the underlying field (defaults to "")
|
|
*/
|
|
value : "",
|
|
<span id='Ext-Editor-cfg-alignment'> /**
|
|
</span> * @cfg {String} alignment
|
|
* The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
|
|
*/
|
|
alignment: "c-c?",
|
|
<span id='Ext-Editor-cfg-offsets'> /**
|
|
</span> * @cfg {Array} offsets
|
|
* The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to <tt>[0, 0]</tt>.
|
|
*/
|
|
offsets: [0, 0],
|
|
<span id='Ext-Editor-cfg-shadow'> /**
|
|
</span> * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
|
|
* for bottom-right shadow (defaults to "frame")
|
|
*/
|
|
shadow : "frame",
|
|
<span id='Ext-Editor-cfg-constrain'> /**
|
|
</span> * @cfg {Boolean} constrain True to constrain the editor to the viewport
|
|
*/
|
|
constrain : false,
|
|
<span id='Ext-Editor-cfg-swallowKeys'> /**
|
|
</span> * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
|
|
*/
|
|
swallowKeys : true,
|
|
<span id='Ext-Editor-cfg-completeOnEnter'> /**
|
|
</span> * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to <tt>true</tt>.
|
|
*/
|
|
completeOnEnter : true,
|
|
<span id='Ext-Editor-cfg-cancelOnEsc'> /**
|
|
</span> * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to <tt>true</tt>.
|
|
*/
|
|
cancelOnEsc : true,
|
|
<span id='Ext-Editor-cfg-updateEl'> /**
|
|
</span> * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
|
|
*/
|
|
updateEl : false,
|
|
|
|
initComponent : function(){
|
|
Ext.Editor.superclass.initComponent.call(this);
|
|
this.addEvents(
|
|
<span id='Ext-Editor-event-beforestartedit'> /**
|
|
</span> * @event beforestartedit
|
|
* Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
|
|
* false from the handler of this event.
|
|
* @param {Editor} this
|
|
* @param {Ext.Element} boundEl The underlying element bound to this editor
|
|
* @param {Mixed} value The field value being set
|
|
*/
|
|
"beforestartedit",
|
|
<span id='Ext-Editor-event-startedit'> /**
|
|
</span> * @event startedit
|
|
* Fires when this editor is displayed
|
|
* @param {Ext.Element} boundEl The underlying element bound to this editor
|
|
* @param {Mixed} value The starting field value
|
|
*/
|
|
"startedit",
|
|
<span id='Ext-Editor-event-beforecomplete'> /**
|
|
</span> * @event beforecomplete
|
|
* Fires after a change has been made to the field, but before the change is reflected in the underlying
|
|
* field. Saving the change to the field can be canceled by returning false from the handler of this event.
|
|
* Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
|
|
* event will not fire since no edit actually occurred.
|
|
* @param {Editor} this
|
|
* @param {Mixed} value The current field value
|
|
* @param {Mixed} startValue The original field value
|
|
*/
|
|
"beforecomplete",
|
|
<span id='Ext-Editor-event-complete'> /**
|
|
</span> * @event complete
|
|
* Fires after editing is complete and any changed value has been written to the underlying field.
|
|
* @param {Editor} this
|
|
* @param {Mixed} value The current field value
|
|
* @param {Mixed} startValue The original field value
|
|
*/
|
|
"complete",
|
|
<span id='Ext-Editor-event-canceledit'> /**
|
|
</span> * @event canceledit
|
|
* Fires after editing has been canceled and the editor's value has been reset.
|
|
* @param {Editor} this
|
|
* @param {Mixed} value The user-entered field value that was discarded
|
|
* @param {Mixed} startValue The original field value that was set back into the editor after cancel
|
|
*/
|
|
"canceledit",
|
|
<span id='Ext-Editor-event-specialkey'> /**
|
|
</span> * @event specialkey
|
|
* Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
|
|
* {@link Ext.EventObject#getKey} to determine which key was pressed.
|
|
* @param {Ext.form.Field} this
|
|
* @param {Ext.EventObject} e The event object
|
|
*/
|
|
"specialkey"
|
|
);
|
|
},
|
|
|
|
// private
|
|
onRender : function(ct, position){
|
|
this.el = new Ext.Layer({
|
|
shadow: this.shadow,
|
|
cls: "x-editor",
|
|
parentEl : ct,
|
|
shim : this.shim,
|
|
shadowOffset: this.shadowOffset || 4,
|
|
id: this.id,
|
|
constrain: this.constrain
|
|
});
|
|
if(this.zIndex){
|
|
this.el.setZIndex(this.zIndex);
|
|
}
|
|
this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
|
|
if(this.field.msgTarget != 'title'){
|
|
this.field.msgTarget = 'qtip';
|
|
}
|
|
this.field.inEditor = true;
|
|
this.mon(this.field, {
|
|
scope: this,
|
|
blur: this.onBlur,
|
|
specialkey: this.onSpecialKey
|
|
});
|
|
if(this.field.grow){
|
|
this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1});
|
|
}
|
|
this.field.render(this.el).show();
|
|
this.field.getEl().dom.name = '';
|
|
if(this.swallowKeys){
|
|
this.field.el.swallowEvent([
|
|
'keypress', // *** Opera
|
|
'keydown' // *** all other browsers
|
|
]);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onSpecialKey : function(field, e){
|
|
var key = e.getKey(),
|
|
complete = this.completeOnEnter && key == e.ENTER,
|
|
cancel = this.cancelOnEsc && key == e.ESC;
|
|
if(complete || cancel){
|
|
e.stopEvent();
|
|
if(complete){
|
|
this.completeEdit();
|
|
}else{
|
|
this.cancelEdit();
|
|
}
|
|
if(field.triggerBlur){
|
|
field.triggerBlur();
|
|
}
|
|
}
|
|
this.fireEvent('specialkey', field, e);
|
|
},
|
|
|
|
<span id='Ext-Editor-method-startEdit'> /**
|
|
</span> * Starts the editing process and shows the editor.
|
|
* @param {Mixed} el The element to edit
|
|
* @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
|
|
* to the innerHTML of el.
|
|
*/
|
|
startEdit : function(el, value){
|
|
if(this.editing){
|
|
this.completeEdit();
|
|
}
|
|
this.boundEl = Ext.get(el);
|
|
var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
|
|
if(!this.rendered){
|
|
this.render(this.parentEl || document.body);
|
|
}
|
|
if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){
|
|
this.startValue = v;
|
|
this.field.reset();
|
|
this.field.setValue(v);
|
|
this.realign(true);
|
|
this.editing = true;
|
|
this.show();
|
|
}
|
|
},
|
|
|
|
// private
|
|
doAutoSize : function(){
|
|
if(this.autoSize){
|
|
var sz = this.boundEl.getSize(),
|
|
fs = this.field.getSize();
|
|
|
|
switch(this.autoSize){
|
|
case "width":
|
|
this.setSize(sz.width, fs.height);
|
|
break;
|
|
case "height":
|
|
this.setSize(fs.width, sz.height);
|
|
break;
|
|
case "none":
|
|
this.setSize(fs.width, fs.height);
|
|
break;
|
|
default:
|
|
this.setSize(sz.width, sz.height);
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-Editor-method-setSize'> /**
|
|
</span> * Sets the height and width of this editor.
|
|
* @param {Number} width The new width
|
|
* @param {Number} height The new height
|
|
*/
|
|
setSize : function(w, h){
|
|
delete this.field.lastSize;
|
|
this.field.setSize(w, h);
|
|
if(this.el){
|
|
// IE7 in strict mode doesn't size properly.
|
|
if(Ext.isGecko2 || Ext.isOpera || (Ext.isIE7 && Ext.isStrict)){
|
|
// prevent layer scrollbars
|
|
this.el.setSize(w, h);
|
|
}
|
|
this.el.sync();
|
|
}
|
|
},
|
|
|
|
<span id='Ext-Editor-method-realign'> /**
|
|
</span> * Realigns the editor to the bound field based on the current alignment config value.
|
|
* @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
|
|
*/
|
|
realign : function(autoSize){
|
|
if(autoSize === true){
|
|
this.doAutoSize();
|
|
}
|
|
this.el.alignTo(this.boundEl, this.alignment, this.offsets);
|
|
},
|
|
|
|
<span id='Ext-Editor-method-completeEdit'> /**
|
|
</span> * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
|
|
* @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
|
|
*/
|
|
completeEdit : function(remainVisible){
|
|
if(!this.editing){
|
|
return;
|
|
}
|
|
// Assert combo values first
|
|
if (this.field.assertValue) {
|
|
this.field.assertValue();
|
|
}
|
|
var v = this.getValue();
|
|
if(!this.field.isValid()){
|
|
if(this.revertInvalid !== false){
|
|
this.cancelEdit(remainVisible);
|
|
}
|
|
return;
|
|
}
|
|
if(String(v) === String(this.startValue) && this.ignoreNoChange){
|
|
this.hideEdit(remainVisible);
|
|
return;
|
|
}
|
|
if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
|
|
v = this.getValue();
|
|
if(this.updateEl && this.boundEl){
|
|
this.boundEl.update(v);
|
|
}
|
|
this.hideEdit(remainVisible);
|
|
this.fireEvent("complete", this, v, this.startValue);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onShow : function(){
|
|
this.el.show();
|
|
if(this.hideEl !== false){
|
|
this.boundEl.hide();
|
|
}
|
|
this.field.show().focus(false, true);
|
|
this.fireEvent("startedit", this.boundEl, this.startValue);
|
|
},
|
|
|
|
<span id='Ext-Editor-method-cancelEdit'> /**
|
|
</span> * Cancels the editing process and hides the editor without persisting any changes. The field value will be
|
|
* reverted to the original starting value.
|
|
* @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
|
|
* cancel (defaults to false)
|
|
*/
|
|
cancelEdit : function(remainVisible){
|
|
if(this.editing){
|
|
var v = this.getValue();
|
|
this.setValue(this.startValue);
|
|
this.hideEdit(remainVisible);
|
|
this.fireEvent("canceledit", this, v, this.startValue);
|
|
}
|
|
},
|
|
|
|
// private
|
|
hideEdit: function(remainVisible){
|
|
if(remainVisible !== true){
|
|
this.editing = false;
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
// private
|
|
onBlur : function(){
|
|
// selectSameEditor flag allows the same editor to be started without onBlur firing on itself
|
|
if(this.allowBlur === true && this.editing && this.selectSameEditor !== true){
|
|
this.completeEdit();
|
|
}
|
|
},
|
|
|
|
// private
|
|
onHide : function(){
|
|
if(this.editing){
|
|
this.completeEdit();
|
|
return;
|
|
}
|
|
this.field.blur();
|
|
if(this.field.collapse){
|
|
this.field.collapse();
|
|
}
|
|
this.el.hide();
|
|
if(this.hideEl !== false){
|
|
this.boundEl.show();
|
|
}
|
|
},
|
|
|
|
<span id='Ext-Editor-method-setValue'> /**
|
|
</span> * Sets the data value of the editor
|
|
* @param {Mixed} value Any valid value supported by the underlying field
|
|
*/
|
|
setValue : function(v){
|
|
this.field.setValue(v);
|
|
},
|
|
|
|
<span id='Ext-Editor-method-getValue'> /**
|
|
</span> * Gets the data value of the editor
|
|
* @return {Mixed} The data value
|
|
*/
|
|
getValue : function(){
|
|
return this.field.getValue();
|
|
},
|
|
|
|
beforeDestroy : function(){
|
|
Ext.destroyMembers(this, 'field');
|
|
|
|
delete this.parentEl;
|
|
delete this.boundEl;
|
|
}
|
|
});
|
|
Ext.reg('editor', Ext.Editor);
|
|
</pre>
|
|
</body>
|
|
</html>
|