Editor.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:13k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.Editor
  9.  * @extends Ext.Component
  10.  * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
  11.  * @constructor
  12.  * Create a new Editor
  13.  * @param {Object} config The config object
  14.  * @xtype editor
  15.  */
  16. Ext.Editor = function(field, config){
  17.     if(field.field){
  18.         this.field = Ext.create(field.field, 'textfield');
  19.         config = Ext.apply({}, field); // copy so we don't disturb original config
  20.         delete config.field;
  21.     }else{
  22.         this.field = field;
  23.     }
  24.     Ext.Editor.superclass.constructor.call(this, config);
  25. };
  26. Ext.extend(Ext.Editor, Ext.Component, {
  27.     /**
  28.     * @cfg {Ext.form.Field} field
  29.     * The Field object (or descendant) or config object for field
  30.     */
  31.     /**
  32.      * @cfg {Boolean} allowBlur
  33.      * True to {@link #completeEdit complete the editing process} if in edit mode when the
  34.      * field is blurred. Defaults to <tt>false</tt>.
  35.      */
  36.     /**
  37.      * @cfg {Boolean/String} autoSize
  38.      * True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only,
  39.      * or "height" to adopt the height only (defaults to false)
  40.      */
  41.     /**
  42.      * @cfg {Boolean} revertInvalid
  43.      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
  44.      * validation fails (defaults to true)
  45.      */
  46.     /**
  47.      * @cfg {Boolean} ignoreNoChange
  48.      * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
  49.      * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
  50.      * will never be ignored.
  51.      */
  52.     /**
  53.      * @cfg {Boolean} hideEl
  54.      * False to keep the bound element visible while the editor is displayed (defaults to true)
  55.      */
  56.     /**
  57.      * @cfg {Mixed} value
  58.      * The data value of the underlying field (defaults to "")
  59.      */
  60.     value : "",
  61.     /**
  62.      * @cfg {String} alignment
  63.      * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
  64.      */
  65.     alignment: "c-c?",
  66.     /**
  67.      * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
  68.      * for bottom-right shadow (defaults to "frame")
  69.      */
  70.     shadow : "frame",
  71.     /**
  72.      * @cfg {Boolean} constrain True to constrain the editor to the viewport
  73.      */
  74.     constrain : false,
  75.     /**
  76.      * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
  77.      */
  78.     swallowKeys : true,
  79.     /**
  80.      * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
  81.      */
  82.     completeOnEnter : false,
  83.     /**
  84.      * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
  85.      */
  86.     cancelOnEsc : false,
  87.     /**
  88.      * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
  89.      */
  90.     updateEl : false,
  91.     initComponent : function(){
  92.         Ext.Editor.superclass.initComponent.call(this);
  93.         this.addEvents(
  94.             /**
  95.              * @event beforestartedit
  96.              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
  97.              * false from the handler of this event.
  98.              * @param {Editor} this
  99.              * @param {Ext.Element} boundEl The underlying element bound to this editor
  100.              * @param {Mixed} value The field value being set
  101.              */
  102.             "beforestartedit",
  103.             /**
  104.              * @event startedit
  105.              * Fires when this editor is displayed
  106.              * @param {Ext.Element} boundEl The underlying element bound to this editor
  107.              * @param {Mixed} value The starting field value
  108.              */
  109.             "startedit",
  110.             /**
  111.              * @event beforecomplete
  112.              * Fires after a change has been made to the field, but before the change is reflected in the underlying
  113.              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
  114.              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
  115.              * event will not fire since no edit actually occurred.
  116.              * @param {Editor} this
  117.              * @param {Mixed} value The current field value
  118.              * @param {Mixed} startValue The original field value
  119.              */
  120.             "beforecomplete",
  121.             /**
  122.              * @event complete
  123.              * Fires after editing is complete and any changed value has been written to the underlying field.
  124.              * @param {Editor} this
  125.              * @param {Mixed} value The current field value
  126.              * @param {Mixed} startValue The original field value
  127.              */
  128.             "complete",
  129.             /**
  130.              * @event canceledit
  131.              * Fires after editing has been canceled and the editor's value has been reset.
  132.              * @param {Editor} this
  133.              * @param {Mixed} value The user-entered field value that was discarded
  134.              * @param {Mixed} startValue The original field value that was set back into the editor after cancel
  135.              */
  136.             "canceledit",
  137.             /**
  138.              * @event specialkey
  139.              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
  140.              * {@link Ext.EventObject#getKey} to determine which key was pressed.
  141.              * @param {Ext.form.Field} this
  142.              * @param {Ext.EventObject} e The event object
  143.              */
  144.             "specialkey"
  145.         );
  146.     },
  147.     // private
  148.     onRender : function(ct, position){
  149.         this.el = new Ext.Layer({
  150.             shadow: this.shadow,
  151.             cls: "x-editor",
  152.             parentEl : ct,
  153.             shim : this.shim,
  154.             shadowOffset: this.shadowOffset || 4,
  155.             id: this.id,
  156.             constrain: this.constrain
  157.         });
  158.         if(this.zIndex){
  159.             this.el.setZIndex(this.zIndex);
  160.         }
  161.         this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
  162.         if(this.field.msgTarget != 'title'){
  163.             this.field.msgTarget = 'qtip';
  164.         }
  165.         this.field.inEditor = true;
  166.         this.field.render(this.el);
  167.         if(Ext.isGecko){
  168.             this.field.el.dom.setAttribute('autocomplete', 'off');
  169.         }
  170.         this.mon(this.field, "specialkey", this.onSpecialKey, this);
  171.         if(this.swallowKeys){
  172.             this.field.el.swallowEvent(['keydown','keypress']);
  173.         }
  174.         this.field.show();
  175.         this.mon(this.field, "blur", this.onBlur, this);
  176.         if(this.field.grow){
  177.          this.mon(this.field, "autosize", this.el.sync,  this.el, {delay:1});
  178.         }
  179.     },
  180.     // private
  181.     onSpecialKey : function(field, e){
  182.         var key = e.getKey();
  183.         if(this.completeOnEnter && key == e.ENTER){
  184.             e.stopEvent();
  185.             this.completeEdit();
  186.         }else if(this.cancelOnEsc && key == e.ESC){
  187.             this.cancelEdit();
  188.         }else{
  189.             this.fireEvent('specialkey', field, e);
  190.         }
  191.         if(this.field.triggerBlur && (key == e.ENTER || key == e.ESC || key == e.TAB)){
  192.             this.field.triggerBlur();
  193.         }
  194.     },
  195.     /**
  196.      * Starts the editing process and shows the editor.
  197.      * @param {Mixed} el The element to edit
  198.      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
  199.       * to the innerHTML of el.
  200.      */
  201.     startEdit : function(el, value){
  202.         if(this.editing){
  203.             this.completeEdit();
  204.         }
  205.         this.boundEl = Ext.get(el);
  206.         var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
  207.         if(!this.rendered){
  208.             this.render(this.parentEl || document.body);
  209.         }
  210.         if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
  211.             return;
  212.         }
  213.         this.startValue = v;
  214.         this.field.setValue(v);
  215.         this.doAutoSize();
  216.         this.el.alignTo(this.boundEl, this.alignment);
  217.         this.editing = true;
  218.         this.show();
  219.     },
  220.     // private
  221.     doAutoSize : function(){
  222.         if(this.autoSize){
  223.             var sz = this.boundEl.getSize();
  224.             switch(this.autoSize){
  225.                 case "width":
  226.                     this.setSize(sz.width,  "");
  227.                 break;
  228.                 case "height":
  229.                     this.setSize("",  sz.height);
  230.                 break;
  231.                 default:
  232.                     this.setSize(sz.width,  sz.height);
  233.             }
  234.         }
  235.     },
  236.     /**
  237.      * Sets the height and width of this editor.
  238.      * @param {Number} width The new width
  239.      * @param {Number} height The new height
  240.      */
  241.     setSize : function(w, h){
  242.         delete this.field.lastSize;
  243.         this.field.setSize(w, h);
  244.         if(this.el){
  245.             if(Ext.isGecko2 || Ext.isOpera){
  246.                 // prevent layer scrollbars
  247.                 this.el.setSize(w, h);
  248.             }
  249.             this.el.sync();
  250.         }
  251.     },
  252.     /**
  253.      * Realigns the editor to the bound field based on the current alignment config value.
  254.      */
  255.     realign : function(){
  256.         this.el.alignTo(this.boundEl, this.alignment);
  257.     },
  258.     /**
  259.      * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
  260.      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
  261.      */
  262.     completeEdit : function(remainVisible){
  263.         if(!this.editing){
  264.             return;
  265.         }
  266.         var v = this.getValue();
  267.         if(!this.field.isValid()){
  268.             if(this.revertInvalid !== false){
  269.                 this.cancelEdit(remainVisible);
  270.             }
  271.             return;
  272.         }
  273.         if(String(v) === String(this.startValue) && this.ignoreNoChange){
  274.             this.hideEdit(remainVisible);
  275.             return;
  276.         }
  277.         if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
  278.             v = this.getValue();
  279.             if(this.updateEl && this.boundEl){
  280.                 this.boundEl.update(v);
  281.             }
  282.             this.hideEdit(remainVisible);
  283.             this.fireEvent("complete", this, v, this.startValue);
  284.         }
  285.     },
  286.     // private
  287.     onShow : function(){
  288.         this.el.show();
  289.         if(this.hideEl !== false){
  290.             this.boundEl.hide();
  291.         }
  292.         this.field.show();
  293.         if(Ext.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
  294.             this.fixIEFocus = true;
  295.             this.deferredFocus.defer(50, this);
  296.         }else{
  297.             this.field.focus();
  298.         }
  299.         this.fireEvent("startedit", this.boundEl, this.startValue);
  300.     },
  301.     deferredFocus : function(){
  302.         if(this.editing){
  303.             this.field.focus();
  304.         }
  305.     },
  306.     /**
  307.      * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
  308.      * reverted to the original starting value.
  309.      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
  310.      * cancel (defaults to false)
  311.      */
  312.     cancelEdit : function(remainVisible){
  313.         if(this.editing){
  314.             var v = this.getValue();
  315.             this.setValue(this.startValue);
  316.             this.hideEdit(remainVisible);
  317.             this.fireEvent("canceledit", this, v, this.startValue);
  318.         }
  319.     },
  320.     
  321.     // private
  322.     hideEdit: function(remainVisible){
  323.         if(remainVisible !== true){
  324.             this.editing = false;
  325.             this.hide();
  326.         }
  327.     },
  328.     // private
  329.     onBlur : function(){
  330.         if(this.allowBlur !== true && this.editing){
  331.             this.completeEdit();
  332.         }
  333.     },
  334.     // private
  335.     onHide : function(){
  336.         if(this.editing){
  337.             this.completeEdit();
  338.             return;
  339.         }
  340.         this.field.blur();
  341.         if(this.field.collapse){
  342.             this.field.collapse();
  343.         }
  344.         this.el.hide();
  345.         if(this.hideEl !== false){
  346.             this.boundEl.show();
  347.         }
  348.     },
  349.     /**
  350.      * Sets the data value of the editor
  351.      * @param {Mixed} value Any valid value supported by the underlying field
  352.      */
  353.     setValue : function(v){
  354.         this.field.setValue(v);
  355.     },
  356.     /**
  357.      * Gets the data value of the editor
  358.      * @return {Mixed} The data value
  359.      */
  360.     getValue : function(){
  361.         return this.field.getValue();
  362.     },
  363.     beforeDestroy : function(){
  364.         Ext.destroy(this.field);
  365.         this.field = null;
  366.     }
  367. });
  368. Ext.reg('editor', Ext.Editor);