271 lines
No EOL
10 KiB
HTML
271 lines
No EOL
10 KiB
HTML
<html><head><title>Editor.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Editor.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.Editor
|
|
* @extends Ext.Component
|
|
* A base editor field that handles displaying/hiding on demand and has some built-<b>in</b> sizing and event handling logic.
|
|
* @constructor
|
|
* Create a <b>new</b> Editor
|
|
* @param {Object} config The config object
|
|
*/</i>
|
|
Ext.Editor = <b>function</b>(field, config){
|
|
Ext.Editor.superclass.constructor.call(<b>this</b>, config);
|
|
<b>this</b>.field = field;
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event beforestartedit
|
|
* Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
|
|
* false from the handler of <b>this</b> event.
|
|
* @param {Editor} <b>this</b>
|
|
* @param {Ext.Element} boundEl The underlying element bound to <b>this</b> editor
|
|
* @param {Mixed} value The field value being set
|
|
*/</i>
|
|
"beforestartedit" : true,
|
|
<i>/**
|
|
* @event startedit
|
|
* Fires when <b>this</b> editor is displayed
|
|
* @param {Ext.Element} boundEl The underlying element bound to <b>this</b> editor
|
|
* @param {Mixed} value The starting field value
|
|
*/</i>
|
|
"startedit" : true,
|
|
<i>/**
|
|
* @event beforecomplete
|
|
* Fires after a change has been made to the field, but before the change is reflected <b>in</b> the underlying
|
|
* field. Saving the change to the field can be canceled by returning false from the handler of <b>this</b> event.
|
|
* Note that <b>if</b> the value has not changed and ignoreNoChange = true, the editing will still end but <b>this</b>
|
|
* event will not fire since no edit actually occurred.
|
|
* @param {Editor} <b>this</b>
|
|
* @param {Mixed} value The current field value
|
|
* @param {Mixed} startValue The original field value
|
|
*/</i>
|
|
"beforecomplete" : true,
|
|
<i>/**
|
|
* @event complete
|
|
* Fires after editing is complete and any changed value has been written to the underlying field.
|
|
* @param {Editor} <b>this</b>
|
|
* @param {Mixed} value The current field value
|
|
* @param {Mixed} startValue The original field value
|
|
*/</i>
|
|
"complete" : true,
|
|
<i>/**
|
|
* @event specialkey
|
|
* Fires when special key is pressed
|
|
*/</i>
|
|
"specialkey" : true
|
|
});
|
|
};
|
|
|
|
Ext.extend(Ext.Editor, Ext.Component, {
|
|
<i>/**
|
|
* @cfg {Boolean/String} autosize
|
|
* True <b>for</b> the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
|
|
* or "height" to adopt the height only (defaults to false)
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @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)
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Boolean} ignoreNoChange
|
|
* True to skip the the edit completion process (no save, no events fired) <b>if</b> the user completes an edit and
|
|
* the value has not changed (defaults to false). Applies only to string values - edits <b>for</b> other data types
|
|
* will never be ignored.
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Mixed} value
|
|
* The data value of the underlying field (defaults to "")
|
|
*/</i>
|
|
value : "",
|
|
<i>/**
|
|
* @cfg {String} alignment
|
|
* The position to align to (see {@link Ext.Element#alignTo} <b>for</b> more details, defaults to "c-c?").
|
|
*/</i>
|
|
alignment: "c-c?",
|
|
<i>/**
|
|
* @cfg {Boolean/String} shadow "sides" <b>for</b> sides/bottom only, "frame" <b>for</b> 4-way shadow, and "drop"
|
|
* <b>for</b> bottom-right shadow (defaults to "frame")
|
|
*/</i>
|
|
shadow : "frame",
|
|
|
|
<i>// private</i>
|
|
updateEl : false,
|
|
|
|
<i>// private</i>
|
|
onRender : <b>function</b>(ct, position){
|
|
<b>this</b>.el = <b>new</b> Ext.Layer({
|
|
shadow: <b>this</b>.shadow,
|
|
cls: "x-editor",
|
|
parentEl : ct,
|
|
shim : <b>this</b>.shim,
|
|
shadowOffset:3,
|
|
id: <b>this</b>.id
|
|
});
|
|
<b>this</b>.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
|
|
<b>this</b>.field.render(<b>this</b>.el);
|
|
<b>if</b>(Ext.isGecko){
|
|
<b>this</b>.field.el.dom.setAttribute('autocomplete', 'off');
|
|
}
|
|
<b>this</b>.field.show();
|
|
<b>this</b>.field.on("blur", <b>this</b>.onBlur, <b>this</b>);
|
|
<b>this</b>.relayEvents(<b>this</b>.field, ["specialkey"]);
|
|
<b>if</b>(this.field.grow){
|
|
<b>this</b>.field.on("autosize", <b>this</b>.el.sync, <b>this</b>.el, {delay:1});
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
startEdit : <b>function</b>(el, value){
|
|
<b>if</b>(this.editing){
|
|
<b>this</b>.completeEdit();
|
|
}
|
|
<b>this</b>.boundEl = Ext.get(el);
|
|
<b>var</b> v = value !== undefined ? value : <b>this</b>.boundEl.dom.innerHTML;
|
|
<b>if</b>(!<b>this</b>.rendered){
|
|
<b>this</b>.render(<b>this</b>.parentEl || document.body);
|
|
}
|
|
<b>if</b>(this.fireEvent("beforestartedit", <b>this</b>, <b>this</b>.boundEl, v) === false){
|
|
<b>return</b>;
|
|
}
|
|
<b>this</b>.startValue = v;
|
|
<b>this</b>.field.setValue(v);
|
|
<b>if</b>(this.autoSize){
|
|
<b>var</b> sz = <b>this</b>.boundEl.getSize();
|
|
<b>switch</b>(this.autoSize){
|
|
<b>case</b> "width":
|
|
<b>this</b>.setSize(sz.width, "");
|
|
<b>break</b>;
|
|
<b>case</b> "height":
|
|
<b>this</b>.setSize("", sz.height);
|
|
<b>break</b>;
|
|
<b>default</b>:
|
|
<b>this</b>.setSize(sz.width, sz.height);
|
|
}
|
|
}
|
|
<b>this</b>.el.alignTo(<b>this</b>.boundEl, <b>this</b>.alignment);
|
|
<b>this</b>.editing = true;
|
|
<b>if</b>(Ext.QuickTips){
|
|
Ext.QuickTips.disable();
|
|
}
|
|
<b>this</b>.show();
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the height and width of <b>this</b> editor
|
|
* @param {Number} width The <b>new</b> width
|
|
* @param {Number} height The <b>new</b> height
|
|
*/</i>
|
|
setSize : <b>function</b>(w, h){
|
|
<b>this</b>.field.setSize(w, h);
|
|
<b>if</b>(this.el){
|
|
<b>this</b>.el.sync();
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Realigns the editor to the bound field based on the current alignment config value.
|
|
*/</i>
|
|
realign : <b>function</b>(){
|
|
<b>this</b>.el.alignTo(<b>this</b>.boundEl, <b>this</b>.alignment);
|
|
},
|
|
|
|
<i>/**
|
|
* Ends the editing process, persist the changed value to the underlying field and hides the editor.
|
|
* @param {Boolean} remainVisible Override the <b>default</b> behavior and keep the editor visible after edit (defaults to false)
|
|
*/</i>
|
|
completeEdit : <b>function</b>(remainVisible){
|
|
<b>if</b>(!<b>this</b>.editing){
|
|
<b>return</b>;
|
|
}
|
|
<b>var</b> v = <b>this</b>.getValue();
|
|
<b>if</b>(this.revertInvalid !== false && !<b>this</b>.field.isValid()){
|
|
v = <b>this</b>.startValue;
|
|
<b>this</b>.cancelEdit(true);
|
|
}
|
|
<b>if</b>(String(v) == String(<b>this</b>.startValue) && <b>this</b>.ignoreNoChange){
|
|
<b>this</b>.editing = false;
|
|
<b>this</b>.hide();
|
|
<b>return</b>;
|
|
}
|
|
<b>if</b>(this.fireEvent("beforecomplete", <b>this</b>, v, <b>this</b>.startValue) !== false){
|
|
<b>this</b>.editing = false;
|
|
<b>if</b>(this.updateEl && <b>this</b>.boundEl){
|
|
<b>this</b>.boundEl.update(v);
|
|
}
|
|
<b>if</b>(remainVisible !== true){
|
|
<b>this</b>.hide();
|
|
}
|
|
<b>this</b>.fireEvent("complete", <b>this</b>, v, <b>this</b>.startValue);
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
onShow : <b>function</b>(){
|
|
<b>this</b>.el.show();
|
|
<b>if</b>(this.hideEl !== false){
|
|
<b>this</b>.boundEl.hide();
|
|
}
|
|
<b>this</b>.field.show();
|
|
<b>this</b>.field.focus();
|
|
<b>this</b>.fireEvent("startedit", <b>this</b>.boundEl, <b>this</b>.startValue);
|
|
},
|
|
|
|
<i>/**
|
|
* 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 <b>default</b> behavior and keep the editor visible after
|
|
* cancel (defaults to false)
|
|
*/</i>
|
|
cancelEdit : <b>function</b>(remainVisible){
|
|
<b>if</b>(this.editing){
|
|
<b>this</b>.setValue(<b>this</b>.startValue);
|
|
<b>if</b>(remainVisible !== true){
|
|
<b>this</b>.hide();
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
onBlur : <b>function</b>(){
|
|
<b>if</b>(this.allowBlur !== true && <b>this</b>.editing){
|
|
<b>this</b>.completeEdit();
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
onHide : <b>function</b>(){
|
|
<b>if</b>(this.editing){
|
|
<b>this</b>.completeEdit();
|
|
<b>return</b>;
|
|
}
|
|
<b>this</b>.field.blur();
|
|
<b>if</b>(this.field.collapse){
|
|
<b>this</b>.field.collapse();
|
|
}
|
|
<b>this</b>.el.hide();
|
|
<b>if</b>(this.hideEl !== false){
|
|
<b>this</b>.boundEl.show();
|
|
}
|
|
<b>if</b>(Ext.QuickTips){
|
|
Ext.QuickTips.enable();
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the data value of the editor
|
|
* @param {Mixed} value Any valid value supported by the underlying field
|
|
*/</i>
|
|
setValue : <b>function</b>(v){
|
|
<b>this</b>.field.setValue(v);
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the data value of the editor
|
|
* @<b>return</b> {Mixed} value The data value
|
|
*/</i>
|
|
getValue : <b>function</b>(){
|
|
<b>return</b> this.field.getValue();
|
|
}
|
|
});</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> |