git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / HtmlEditor.html
diff --git a/docs/source/HtmlEditor.html b/docs/source/HtmlEditor.html
index 12cbebb..0e8f8ec 100644 (file)
--- a/docs/source/HtmlEditor.html
+++ b/docs/source/HtmlEditor.html
@@ -1,103 +1,140 @@
+<!DOCTYPE html>
 <html>
 <head>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
   <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>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../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>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<div id="cls-Ext.form.HtmlEditor"></div>/**
- * @class Ext.form.HtmlEditor
- * @extends Ext.form.Field
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-form-field-HtmlEditor-method-constructor'><span id='Ext-form-field-HtmlEditor'>/**
+</span></span> * @class Ext.form.field.HtmlEditor
+ * @extends Ext.Component
+ *
  * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
  * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
- * automatically hidden when needed.  These are noted in the config options where appropriate.
- * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
- * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
- * supported by this editor.</b>
- * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * automatically hidden when needed. These are noted in the config options where appropriate.
+ * 
+ * The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
+ * enabled by default unless the global {@link Ext.tip.QuickTipManager} singleton is {@link Ext.tip.QuickTipManager#init initialized}.
+ * 
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
  * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
  * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
- * <br><br>Example usage:
- * <pre><code>
-// Simple example rendered with default options:
-Ext.QuickTips.init();  // enable tooltips
-new Ext.form.HtmlEditor({
-    renderTo: Ext.getBody(),
-    width: 800,
-    height: 300
-});
-
-// Passed via xtype into a container and with custom options:
-Ext.QuickTips.init();  // enable tooltips
-new Ext.Panel({
-    title: 'HTML Editor',
-    renderTo: Ext.getBody(),
-    width: 600,
-    height: 300,
-    frame: true,
-    layout: 'fit',
-    items: {
-        xtype: 'htmleditor',
-        enableColors: false,
-        enableAlignments: false
-    }
-});
-</code></pre>
+ *
+ * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor1.png Ext.form.HtmlEditor component}
+ *
+ * ## Example usage
+ *
+ * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor2.png Ext.form.HtmlEditor component}
+ *
+ *     // Simple example rendered with default options:
+ *     Ext.tip.QuickTips.init();  // enable tooltips
+ *     Ext.create('Ext.form.HtmlEditor', {
+ *         width: 580,
+ *         height: 250,
+ *         renderTo: Ext.getBody()        
+ *     });
+ * 
+ * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor2.png Ext.form.HtmlEditor component}
+ * 
+ *     // Passed via xtype into a container and with custom options:
+ *     Ext.tip.QuickTips.init();  // enable tooltips
+ *     new Ext.panel.Panel({
+ *         title: 'HTML Editor',
+ *         renderTo: Ext.getBody(),
+ *         width: 550,
+ *         height: 250,
+ *         frame: true,
+ *         layout: 'fit',
+ *         items: {
+ *             xtype: 'htmleditor',
+ *             enableColors: false,
+ *             enableAlignments: false
+ *         }
+ *     });
+ *
  * @constructor
  * Create a new HtmlEditor
  * @param {Object} config
  * @xtype htmleditor
  */
  * @constructor
  * Create a new HtmlEditor
  * @param {Object} config
  * @xtype htmleditor
  */
+Ext.define('Ext.form.field.HtmlEditor', {
+    extend:'Ext.Component',
+    mixins: {
+        labelable: 'Ext.form.Labelable',
+        field: 'Ext.form.field.Field'
+    },
+    alias: 'widget.htmleditor',
+    alternateClassName: 'Ext.form.HtmlEditor',
+    requires: [
+        'Ext.tip.QuickTipManager',
+        'Ext.picker.Color',
+        'Ext.toolbar.Item',
+        'Ext.toolbar.Toolbar',
+        'Ext.util.Format',
+        'Ext.layout.component.field.HtmlEditor'
+    ],
+
+    fieldSubTpl: [
+        '&lt;div class=&quot;{toolbarWrapCls}&quot;&gt;&lt;/div&gt;',
+        '&lt;textarea id=&quot;{id}&quot; name=&quot;{name}&quot; tabIndex=&quot;-1&quot; class=&quot;{textareaCls}&quot; ',
+            'style=&quot;{size}&quot; autocomplete=&quot;off&quot;&gt;&lt;/textarea&gt;',
+        '&lt;iframe name=&quot;{iframeName}&quot; frameBorder=&quot;0&quot; style=&quot;overflow:auto;{size}&quot; src=&quot;{iframeSrc}&quot;&gt;&lt;/iframe&gt;',
+        {
+            compiled: true,
+            disableFormats: true
+        }
+    ],
 
 
-Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
-    <div id="cfg-Ext.form.HtmlEditor-enableFormat"></div>/**
-     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableFormat'>    /**
+</span>     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
      */
     enableFormat : true,
      */
     enableFormat : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableFontSize"></div>/**
-     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableFontSize'>    /**
+</span>     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
      */
     enableFontSize : true,
      */
     enableFontSize : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableColors"></div>/**
-     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableColors'>    /**
+</span>     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
      */
     enableColors : true,
      */
     enableColors : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableAlignments"></div>/**
-     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableAlignments'>    /**
+</span>     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
      */
     enableAlignments : true,
      */
     enableAlignments : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableLists"></div>/**
-     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableLists'>    /**
+</span>     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
      */
     enableLists : true,
      */
     enableLists : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableSourceEdit"></div>/**
-     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableSourceEdit'>    /**
+</span>     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
      */
     enableSourceEdit : true,
      */
     enableSourceEdit : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableLinks"></div>/**
-     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableLinks'>    /**
+</span>     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
      */
     enableLinks : true,
      */
     enableLinks : true,
-    <div id="cfg-Ext.form.HtmlEditor-enableFont"></div>/**
-     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableFont'>    /**
+</span>     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
      */
     enableFont : true,
      */
     enableFont : true,
-    <div id="cfg-Ext.form.HtmlEditor-createLinkText"></div>/**
-     * @cfg {String} createLinkText The default text for the create link prompt
+<span id='Ext-form-field-HtmlEditor-cfg-createLinkText'>    /**
+</span>     * @cfg {String} createLinkText The default text for the create link prompt
      */
     createLinkText : 'Please enter the URL for the link:',
      */
     createLinkText : 'Please enter the URL for the link:',
-    <div id="cfg-Ext.form.HtmlEditor-defaultLinkValue"></div>/**
-     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+<span id='Ext-form-field-HtmlEditor-cfg-defaultLinkValue'>    /**
+</span>     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
      */
     defaultLinkValue : 'http:/'+'/',
      */
     defaultLinkValue : 'http:/'+'/',
-    <div id="cfg-Ext.form.HtmlEditor-fontFamilies"></div>/**
-     * @cfg {Array} fontFamilies An array of available font families
+<span id='Ext-form-field-HtmlEditor-cfg-fontFamilies'>    /**
+</span>     * @cfg {Array} fontFamilies An array of available font families
      */
     fontFamilies : [
         'Arial',
      */
     fontFamilies : [
         'Arial',
@@ -107,134 +144,148 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         'Verdana'
     ],
     defaultFont: 'tahoma',
         'Verdana'
     ],
     defaultFont: 'tahoma',
-    <div id="cfg-Ext.form.HtmlEditor-defaultValue"></div>/**
-     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &#160; (Non-breaking space) in Opera and IE6, &#8203; (Zero-width space) in all other browsers).
+<span id='Ext-form-field-HtmlEditor-cfg-defaultValue'>    /**
+</span>     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &amp;#160; (Non-breaking space) in Opera and IE6, &amp;#8203; (Zero-width space) in all other browsers).
      */
      */
-    defaultValue: (Ext.isOpera || Ext.isIE6) ? '&#160;' : '&#8203;',
+    defaultValue: (Ext.isOpera || Ext.isIE6) ? '&amp;#160;' : '&amp;#8203;',
+
+    fieldBodyCls: Ext.baseCSSPrefix + 'html-editor-wrap',
+
+    componentLayout: 'htmleditor',
 
     // private properties
 
     // private properties
-    actionMode: 'wrap',
-    validationEvent : false,
-    deferHeight: true,
     initialized : false,
     activated : false,
     sourceEditMode : false,
     initialized : false,
     activated : false,
     sourceEditMode : false,
-    onFocus : Ext.emptyFn,
     iframePad:3,
     hideMode:'offsets',
     iframePad:3,
     hideMode:'offsets',
-    defaultAutoCreate : {
-        tag: "textarea",
-        style:"width:500px;height:300px;",
-        autocomplete: "off"
-    },
 
 
+    maskOnDisable: true,
+    
     // private
     initComponent : function(){
     // private
     initComponent : function(){
-        this.addEvents(
-            <div id="event-Ext.form.HtmlEditor-initialize"></div>/**
-             * @event initialize
+        var me = this;
+
+        me.addEvents(
+<span id='Ext-form-field-HtmlEditor-event-initialize'>            /**
+</span>             * @event initialize
              * Fires when the editor is fully initialized (including the iframe)
              * Fires when the editor is fully initialized (including the iframe)
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              */
             'initialize',
              */
             'initialize',
-            <div id="event-Ext.form.HtmlEditor-activate"></div>/**
-             * @event activate
+<span id='Ext-form-field-HtmlEditor-event-activate'>            /**
+</span>             * @event activate
              * Fires when the editor is first receives the focus. Any insertion must wait
              * until after this event.
              * Fires when the editor is first receives the focus. Any insertion must wait
              * until after this event.
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              */
             'activate',
              */
             'activate',
-             <div id="event-Ext.form.HtmlEditor-beforesync"></div>/**
-             * @event beforesync
+<span id='Ext-form-field-HtmlEditor-event-beforesync'>             /**
+</span>             * @event beforesync
              * Fires before the textarea is updated with content from the editor iframe. Return false
              * to cancel the sync.
              * Fires before the textarea is updated with content from the editor iframe. Return false
              * to cancel the sync.
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'beforesync',
              * @param {String} html
              */
             'beforesync',
-             <div id="event-Ext.form.HtmlEditor-beforepush"></div>/**
-             * @event beforepush
+<span id='Ext-form-field-HtmlEditor-event-beforepush'>             /**
+</span>             * @event beforepush
              * Fires before the iframe editor is updated with content from the textarea. Return false
              * to cancel the push.
              * Fires before the iframe editor is updated with content from the textarea. Return false
              * to cancel the push.
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'beforepush',
              * @param {String} html
              */
             'beforepush',
-             <div id="event-Ext.form.HtmlEditor-sync"></div>/**
-             * @event sync
+<span id='Ext-form-field-HtmlEditor-event-sync'>             /**
+</span>             * @event sync
              * Fires when the textarea is updated with content from the editor iframe.
              * Fires when the textarea is updated with content from the editor iframe.
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'sync',
              * @param {String} html
              */
             'sync',
-             <div id="event-Ext.form.HtmlEditor-push"></div>/**
-             * @event push
+<span id='Ext-form-field-HtmlEditor-event-push'>             /**
+</span>             * @event push
              * Fires when the iframe editor is updated with content from the textarea.
              * Fires when the iframe editor is updated with content from the textarea.
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'push',
              * @param {String} html
              */
             'push',
-             <div id="event-Ext.form.HtmlEditor-editmodechange"></div>/**
-             * @event editmodechange
+<span id='Ext-form-field-HtmlEditor-event-editmodechange'>             /**
+</span>             * @event editmodechange
              * Fires when the editor switches edit modes
              * Fires when the editor switches edit modes
-             * @param {HtmlEditor} this
+             * @param {Ext.form.field.HtmlEditor} this
              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
              */
             'editmodechange'
         );
              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
              */
             'editmodechange'
         );
-        Ext.form.HtmlEditor.superclass.initComponent.call(this);
-    },
 
 
-    // private
-    createFontOptions : function(){
-        var buf = [], fs = this.fontFamilies, ff, lc;
-        for(var i = 0, len = fs.length; i< len; i++){
-            ff = fs[i];
-            lc = ff.toLowerCase();
-            buf.push(
-                '<option value="',lc,'" style="font-family:',ff,';"',
-                    (this.defaultFont == lc ? ' selected="true">' : '>'),
-                    ff,
-                '</option>'
-            );
-        }
-        return buf.join('');
+        me.callParent(arguments);
+
+        // Init mixins
+        me.initLabelable();
+        me.initField();
     },
 
     /*
      * Protected method that will not generally be called directly. It
      * is called when the editor creates its toolbar. Override this method if you need to
      * add custom toolbar buttons.
     },
 
     /*
      * Protected method that will not generally be called directly. It
      * is called when the editor creates its toolbar. Override this method if you need to
      * add custom toolbar buttons.
-     * @param {HtmlEditor} editor
+     * @param {Ext.form.field.HtmlEditor} editor
      */
     createToolbar : function(editor){
      */
     createToolbar : function(editor){
-        var items = [];
-        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
-
+        var me = this,
+            items = [],
+            tipsEnabled = Ext.tip.QuickTipManager &amp;&amp; Ext.tip.QuickTipManager.isEnabled(),
+            baseCSSPrefix = Ext.baseCSSPrefix,
+            fontSelectItem, toolbar, undef;
 
         function btn(id, toggle, handler){
             return {
                 itemId : id,
 
         function btn(id, toggle, handler){
             return {
                 itemId : id,
-                cls : 'x-btn-icon',
-                iconCls: 'x-edit-'+id,
+                cls : baseCSSPrefix + 'btn-icon',
+                iconCls: baseCSSPrefix + 'edit-'+id,
                 enableToggle:toggle !== false,
                 scope: editor,
                 handler:handler||editor.relayBtnCmd,
                 clickEvent:'mousedown',
                 enableToggle:toggle !== false,
                 scope: editor,
                 handler:handler||editor.relayBtnCmd,
                 clickEvent:'mousedown',
-                tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
-                overflowText: editor.buttonTips[id].title || undefined,
+                tooltip: tipsEnabled ? editor.buttonTips[id] || undef : undef,
+                overflowText: editor.buttonTips[id].title || undef,
                 tabIndex:-1
             };
         }
 
 
                 tabIndex:-1
             };
         }
 
 
-        if(this.enableFont && !Ext.isSafari2){
-            var fontSelectItem = new Ext.Toolbar.Item({
-               autoEl: {
-                    tag:'select',
-                    cls:'x-font-select',
-                    html: this.createFontOptions()
-               }
+        if (me.enableFont &amp;&amp; !Ext.isSafari2) {
+            fontSelectItem = Ext.widget('component', {
+                renderTpl: [
+                    '&lt;select class=&quot;{cls}&quot;&gt;',
+                        '&lt;tpl for=&quot;fonts&quot;&gt;',
+                            '&lt;option value=&quot;{[values.toLowerCase()]}&quot; style=&quot;font-family:{.}&quot;&lt;tpl if=&quot;values.toLowerCase()==parent.defaultFont&quot;&gt; selected&lt;/tpl&gt;&gt;{.}&lt;/option&gt;',
+                        '&lt;/tpl&gt;',
+                    '&lt;/select&gt;'
+                ],
+                renderData: {
+                    cls: baseCSSPrefix + 'font-select',
+                    fonts: me.fontFamilies,
+                    defaultFont: me.defaultFont
+                },
+                renderSelectors: {
+                    selectEl: 'select'
+                },
+                onDisable: function() {
+                    var selectEl = this.selectEl;
+                    if (selectEl) {
+                        selectEl.dom.disabled = true;
+                    }
+                    Ext.Component.superclass.onDisable.apply(this, arguments);
+                },
+                onEnable: function() {
+                    var selectEl = this.selectEl;
+                    if (selectEl) {
+                        selectEl.dom.disabled = false;
+                    }
+                    Ext.Component.superclass.onEnable.apply(this, arguments);
+                }
             });
 
             items.push(
             });
 
             items.push(
@@ -243,7 +294,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             );
         }
 
             );
         }
 
-        if(this.enableFormat){
+        if (me.enableFormat) {
             items.push(
                 btn('bold'),
                 btn('italic'),
             items.push(
                 btn('bold'),
                 btn('italic'),
@@ -251,70 +302,74 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             );
         }
 
             );
         }
 
-        if(this.enableFontSize){
+        if (me.enableFontSize) {
             items.push(
                 '-',
             items.push(
                 '-',
-                btn('increasefontsize', false, this.adjustFont),
-                btn('decreasefontsize', false, this.adjustFont)
+                btn('increasefontsize', false, me.adjustFont),
+                btn('decreasefontsize', false, me.adjustFont)
             );
         }
 
             );
         }
 
-        if(this.enableColors){
+        if (me.enableColors) {
             items.push(
                 '-', {
             items.push(
                 '-', {
-                    itemId:'forecolor',
-                    cls:'x-btn-icon',
-                    iconCls: 'x-edit-forecolor',
-                    clickEvent:'mousedown',
-                    tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
+                    itemId: 'forecolor',
+                    cls: baseCSSPrefix + 'btn-icon',
+                    iconCls: baseCSSPrefix + 'edit-forecolor',
+                    overflowText: editor.buttonTips.forecolor.title,
+                    tooltip: tipsEnabled ? editor.buttonTips.forecolor || undef : undef,
                     tabIndex:-1,
                     tabIndex:-1,
-                    menu : new Ext.menu.ColorMenu({
-                        allowReselect: true,
-                        focus: Ext.emptyFn,
-                        value:'000000',
-                        plain:true,
-                        listeners: {
-                            scope: this,
-                            select: function(cp, color){
-                                this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
-                                this.deferFocus();
+                    menu : Ext.widget('menu', {
+                        plain: true,
+                        items: [{
+                            xtype: 'colorpicker',
+                            allowReselect: true,
+                            focus: Ext.emptyFn,
+                            value: '000000',
+                            plain: true,
+                            clickEvent: 'mousedown',
+                            handler: function(cp, color) {
+                                me.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+                                me.deferFocus();
+                                this.up('menu').hide();
                             }
                             }
-                        },
-                        clickEvent:'mousedown'
+                        }]
                     })
                 }, {
                     })
                 }, {
-                    itemId:'backcolor',
-                    cls:'x-btn-icon',
-                    iconCls: 'x-edit-backcolor',
-                    clickEvent:'mousedown',
-                    tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
+                    itemId: 'backcolor',
+                    cls: baseCSSPrefix + 'btn-icon',
+                    iconCls: baseCSSPrefix + 'edit-backcolor',
+                    overflowText: editor.buttonTips.backcolor.title,
+                    tooltip: tipsEnabled ? editor.buttonTips.backcolor || undef : undef,
                     tabIndex:-1,
                     tabIndex:-1,
-                    menu : new Ext.menu.ColorMenu({
-                        focus: Ext.emptyFn,
-                        value:'FFFFFF',
-                        plain:true,
-                        allowReselect: true,
-                        listeners: {
-                            scope: this,
-                            select: function(cp, color){
-                                if(Ext.isGecko){
-                                    this.execCmd('useCSS', false);
-                                    this.execCmd('hilitecolor', color);
-                                    this.execCmd('useCSS', true);
-                                    this.deferFocus();
-                                }else{
-                                    this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
-                                    this.deferFocus();
+                    menu : Ext.widget('menu', {
+                        plain: true,
+                        items: [{
+                            xtype: 'colorpicker',
+                            focus: Ext.emptyFn,
+                            value: 'FFFFFF',
+                            plain: true,
+                            allowReselect: true,
+                            clickEvent: 'mousedown',
+                            handler: function(cp, color) {
+                                if (Ext.isGecko) {
+                                    me.execCmd('useCSS', false);
+                                    me.execCmd('hilitecolor', color);
+                                    me.execCmd('useCSS', true);
+                                    me.deferFocus();
+                                } else {
+                                    me.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+                                    me.deferFocus();
                                 }
                                 }
+                                this.up('menu').hide();
                             }
                             }
-                        },
-                        clickEvent:'mousedown'
+                        }]
                     })
                 }
             );
         }
 
                     })
                 }
             );
         }
 
-        if(this.enableAlignments){
+        if (me.enableAlignments) {
             items.push(
                 '-',
                 btn('justifyleft'),
             items.push(
                 '-',
                 btn('justifyleft'),
@@ -323,343 +378,330 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             );
         }
 
             );
         }
 
-        if(!Ext.isSafari2){
-            if(this.enableLinks){
+        if (!Ext.isSafari2) {
+            if (me.enableLinks) {
                 items.push(
                     '-',
                 items.push(
                     '-',
-                    btn('createlink', false, this.createLink)
+                    btn('createlink', false, me.createLink)
                 );
             }
 
                 );
             }
 
-            if(this.enableLists){
+            if (me.enableLists) {
                 items.push(
                     '-',
                     btn('insertorderedlist'),
                     btn('insertunorderedlist')
                 );
             }
                 items.push(
                     '-',
                     btn('insertorderedlist'),
                     btn('insertunorderedlist')
                 );
             }
-            if(this.enableSourceEdit){
+            if (me.enableSourceEdit) {
                 items.push(
                     '-',
                     btn('sourceedit', true, function(btn){
                 items.push(
                     '-',
                     btn('sourceedit', true, function(btn){
-                        this.toggleSourceEdit(!this.sourceEditMode);
+                        me.toggleSourceEdit(!me.sourceEditMode);
                     })
                 );
             }
         }
 
         // build the toolbar
                     })
                 );
             }
         }
 
         // build the toolbar
-        var tb = new Ext.Toolbar({
-            renderTo: this.wrap.dom.firstChild,
+        toolbar = Ext.widget('toolbar', {
+            renderTo: me.toolbarWrap,
+            enableOverflow: true,
             items: items
         });
 
         if (fontSelectItem) {
             items: items
         });
 
         if (fontSelectItem) {
-            this.fontSelect = fontSelectItem.el;
+            me.fontSelect = fontSelectItem.selectEl;
 
 
-            this.mon(this.fontSelect, 'change', function(){
-                var font = this.fontSelect.dom.value;
-                this.relayCmd('fontname', font);
-                this.deferFocus();
-            }, this);
+            me.mon(me.fontSelect, 'change', function(){
+                me.relayCmd('fontname', me.fontSelect.dom.value);
+                me.deferFocus();
+            });
         }
 
         // stop form submits
         }
 
         // stop form submits
-        this.mon(tb.el, 'click', function(e){
+        me.mon(toolbar.el, 'click', function(e){
             e.preventDefault();
         });
 
             e.preventDefault();
         });
 
-        this.tb = tb;
-        this.tb.doLayout();
+        me.toolbar = toolbar;
     },
 
     },
 
-    onDisable: function(){
-        this.wrap.mask();
-        Ext.form.HtmlEditor.superclass.onDisable.call(this);
+    onDisable: function() {
+        this.bodyEl.mask();
+        this.callParent(arguments);
     },
 
     },
 
-    onEnable: function(){
-        this.wrap.unmask();
-        Ext.form.HtmlEditor.superclass.onEnable.call(this);
+    onEnable: function() {
+        this.bodyEl.unmask();
+        this.callParent(arguments);
     },
 
     },
 
-    setReadOnly: function(readOnly){
+<span id='Ext-form-field-HtmlEditor-method-setReadOnly'>    /**
+</span>     * Sets the read only state of this field.
+     * @param {Boolean} readOnly Whether the field should be read only.
+     */
+    setReadOnly: function(readOnly) {
+        var me = this,
+            textareaEl = me.textareaEl,
+            iframeEl = me.iframeEl,
+            body;
 
 
-        Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
-        if(this.initialized){
-            if(Ext.isIE){
-                this.getEditorBody().contentEditable = !readOnly;
-            }else{
-                this.setDesignMode(!readOnly);
+        me.readOnly = readOnly;
+
+        if (textareaEl) {
+            textareaEl.dom.readOnly = readOnly;
+        }
+
+        if (me.initialized) {
+            body = me.getEditorBody();
+            if (Ext.isIE) {
+                // Hide the iframe while setting contentEditable so it doesn't grab focus
+                iframeEl.setDisplayed(false);
+                body.contentEditable = !readOnly;
+                iframeEl.setDisplayed(true);
+            } else {
+                me.setDesignMode(!readOnly);
             }
             }
-            var bd = this.getEditorBody();
-            if(bd){
-                bd.style.cursor = this.readOnly ? 'default' : 'text';
+            if (body) {
+                body.style.cursor = readOnly ? 'default' : 'text';
             }
             }
-            this.disableItems(readOnly);
+            me.disableItems(readOnly);
         }
     },
 
         }
     },
 
-    <div id="method-Ext.form.HtmlEditor-getDocMarkup"></div>/**
-     * Protected method that will not generally be called directly. It
+<span id='Ext-form-field-HtmlEditor-method-getDocMarkup'>    /**
+</span>     * Protected method that will not generally be called directly. It
      * is called when the editor initializes the iframe with HTML contents. Override this method if you
      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
      *
      * is called when the editor initializes the iframe with HTML contents. Override this method if you
      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
      *
-     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
+     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility.
+     * Also note that forcing IE7 mode works when the page is loaded normally, but if you are using IE's Web
+     * Developer Tools to manually set the document mode, that will take precedence and override what this
+     * code sets by default. This can be confusing when developing, but is not a user-facing issue.
      */
      */
-    getDocMarkup : function(){
-        var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
-        return String.format('<html><head><style type="text/css">body{border: 0; margin: 0; padding: {0}px; height: {1}px; cursor: text}</style></head><body></body></html>', this.iframePad, h);
+    getDocMarkup: function() {
+        var me = this,
+            h = me.iframeEl.getHeight() - me.iframePad * 2;
+        return Ext.String.format('&lt;html&gt;&lt;head&gt;&lt;style type=&quot;text/css&quot;&gt;body{border:0;margin:0;padding:{0}px;height:{1}px;cursor:text}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;', me.iframePad, h);
     },
 
     // private
     },
 
     // private
-    getEditorBody : function(){
+    getEditorBody: function() {
         var doc = this.getDoc();
         return doc.body || doc.documentElement;
     },
 
     // private
         var doc = this.getDoc();
         return doc.body || doc.documentElement;
     },
 
     // private
-    getDoc : function(){
-        return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
+    getDoc: function() {
+        return (!Ext.isIE &amp;&amp; this.iframeEl.dom.contentDocument) || this.getWin().document;
     },
 
     // private
     },
 
     // private
-    getWin : function(){
-        return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
+    getWin: function() {
+        return Ext.isIE ? this.iframeEl.dom.contentWindow : window.frames[this.iframeEl.dom.name];
     },
 
     // private
     },
 
     // private
-    onRender : function(ct, position){
-        Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
-        this.el.dom.style.border = '0 none';
-        this.el.dom.setAttribute('tabIndex', -1);
-        this.el.addClass('x-hidden');
-        if(Ext.isIE){ // fix IE 1px bogus margin
-            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;');
-        }
-        this.wrap = this.el.wrap({
-            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+    onRender: function() {
+        var me = this,
+            renderSelectors = me.renderSelectors;
+
+        Ext.applyIf(renderSelectors, me.getLabelableSelectors());
+
+        Ext.applyIf(renderSelectors, {
+            toolbarWrap: 'div.' + Ext.baseCSSPrefix + 'html-editor-tb',
+            iframeEl: 'iframe',
+            textareaEl: 'textarea'
         });
 
         });
 
-        this.createToolbar(this);
+        me.callParent(arguments);
 
 
-        this.disableItems(true);
+        me.textareaEl.dom.value = me.value || '';
 
 
-        this.tb.doLayout();
+        // Start polling for when the iframe document is ready to be manipulated
+        me.monitorTask = Ext.TaskManager.start({
+            run: me.checkDesignMode,
+            scope: me,
+            interval:100
+        });
 
 
-        this.createIFrame();
+        me.createToolbar(me);
+        me.disableItems(true);
+    },
 
 
-        if(!this.width){
-            var sz = this.el.getSize();
-            this.setSize(sz.width, this.height || sz.height);
+    initRenderTpl: function() {
+        var me = this;
+        if (!me.hasOwnProperty('renderTpl')) {
+            me.renderTpl = me.getTpl('labelableRenderTpl');
         }
         }
-        this.resizeEl = this.positionEl = this.wrap;
+        return me.callParent();
     },
 
     },
 
-    createIFrame: function(){
-        var iframe = document.createElement('iframe');
-        iframe.name = Ext.id();
-        iframe.frameBorder = '0';
-        iframe.style.overflow = 'auto';
-        iframe.src = Ext.SSL_SECURE_URL;
+    initRenderData: function() {
+        return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
+    },
 
 
-        this.wrap.dom.appendChild(iframe);
-        this.iframe = iframe;
+    getSubTplData: function() {
+        var cssPrefix = Ext.baseCSSPrefix;
+        return {
+            toolbarWrapCls: cssPrefix + 'html-editor-tb',
+            textareaCls: cssPrefix + 'hidden',
+            iframeName: Ext.id(),
+            iframeSrc: Ext.SSL_SECURE_URL,
+            size: 'height:100px;'
+        };
+    },
 
 
-        this.monitorTask = Ext.TaskMgr.start({
-            run: this.checkDesignMode,
-            scope: this,
-            interval:100
-        });
+    getSubTplMarkup: function() {
+        return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
     },
 
     },
 
-    initFrame : function(){
-        Ext.TaskMgr.stop(this.monitorTask);
-        var doc = this.getDoc();
-        this.win = this.getWin();
+    getBodyNaturalWidth: function() {
+        return 565;
+    },
+
+    initFrameDoc: function() {
+        var me = this,
+            doc, task;
+
+        Ext.TaskManager.stop(me.monitorTask);
+
+        doc = me.getDoc();
+        me.win = me.getWin();
 
         doc.open();
 
         doc.open();
-        doc.write(this.getDocMarkup());
+        doc.write(me.getDocMarkup());
         doc.close();
 
         doc.close();
 
-        var task = { // must defer to wait for browser to be ready
-            run : function(){
-                var doc = this.getDoc();
-                if(doc.body || doc.readyState == 'complete'){
-                    Ext.TaskMgr.stop(task);
-                    this.setDesignMode(true);
-                    this.initEditor.defer(10, this);
+        task = { // must defer to wait for browser to be ready
+            run: function() {
+                var doc = me.getDoc();
+                if (doc.body || doc.readyState === 'complete') {
+                    Ext.TaskManager.stop(task);
+                    me.setDesignMode(true);
+                    Ext.defer(me.initEditor, 10, me);
                 }
             },
             interval : 10,
             duration:10000,
                 }
             },
             interval : 10,
             duration:10000,
-            scope: this
+            scope: me
         };
         };
-        Ext.TaskMgr.start(task);
+        Ext.TaskManager.start(task);
     },
 
     },
 
-
-    checkDesignMode : function(){
-        if(this.wrap && this.wrap.dom.offsetWidth){
-            var doc = this.getDoc();
-            if(!doc){
-                return;
-            }
-            if(!doc.editorInitialized || this.getDesignMode() != 'on'){
-                this.initFrame();
-            }
+    checkDesignMode: function() {
+        var me = this,
+            doc = me.getDoc();
+        if (doc &amp;&amp; (!doc.editorInitialized || me.getDesignMode() !== 'on')) {
+            me.initFrameDoc();
         }
     },
 
     /* private
      * set current design mode. To enable, mode can be true or 'on', off otherwise
      */
         }
     },
 
     /* private
      * set current design mode. To enable, mode can be true or 'on', off otherwise
      */
-    setDesignMode : function(mode){
-        var doc = this.getDoc();
+    setDesignMode: function(mode) {
+        var me = this,
+            doc = me.getDoc();
         if (doc) {
         if (doc) {
-            if(this.readOnly){
+            if (me.readOnly) {
                 mode = false;
             }
             doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
         }
                 mode = false;
             }
             doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
         }
-
     },
 
     // private
     },
 
     // private
-    getDesignMode : function(){
+    getDesignMode: function() {
         var doc = this.getDoc();
         var doc = this.getDoc();
-        if(!doc){ return ''; }
-        return String(doc.designMode).toLowerCase();
-
+        return !doc ? '' : String(doc.designMode).toLowerCase();
     },
 
     },
 
-    disableItems: function(disabled){
-        if(this.fontSelect){
-            this.fontSelect.dom.disabled = disabled;
-        }
-        this.tb.items.each(function(item){
-            if(item.getItemId() != 'sourceedit'){
+    disableItems: function(disabled) {
+        this.getToolbar().items.each(function(item){
+            if(item.getItemId() !== 'sourceedit'){
                 item.setDisabled(disabled);
             }
         });
     },
 
                 item.setDisabled(disabled);
             }
         });
     },
 
-    // private
-    onResize : function(w, h){
-        Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
-        if(this.el && this.iframe){
-            if(Ext.isNumber(w)){
-                var aw = w - this.wrap.getFrameWidth('lr');
-                this.el.setWidth(aw);
-                this.tb.setWidth(aw);
-                this.iframe.style.width = Math.max(aw, 0) + 'px';
-            }
-            if(Ext.isNumber(h)){
-                var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
-                this.el.setHeight(ah);
-                this.iframe.style.height = Math.max(ah, 0) + 'px';
-                var bd = this.getEditorBody();
-                if(bd){
-                    bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
-                }
-            }
-        }
-    },
-
-    <div id="method-Ext.form.HtmlEditor-toggleSourceEdit"></div>/**
-     * Toggles the editor between standard and source edit mode.
-     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+<span id='Ext-form-field-HtmlEditor-method-toggleSourceEdit'>    /**
+</span>     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEditMode (optional) True for source edit, false for standard
      */
      */
-    toggleSourceEdit : function(sourceEditMode){
-        var iframeHeight,
-            elHeight;
-
-        if (sourceEditMode === undefined) {
-            sourceEditMode = !this.sourceEditMode;
+    toggleSourceEdit: function(sourceEditMode) {
+        var me = this,
+            iframe = me.iframeEl,
+            textarea = me.textareaEl,
+            hiddenCls = Ext.baseCSSPrefix + 'hidden',
+            btn = me.getToolbar().getComponent('sourceedit');
+
+        if (!Ext.isBoolean(sourceEditMode)) {
+            sourceEditMode = !me.sourceEditMode;
         }
         }
-        this.sourceEditMode = sourceEditMode === true;
-        var btn = this.tb.getComponent('sourceedit');
+        me.sourceEditMode = sourceEditMode;
 
 
-        if (btn.pressed !== this.sourceEditMode) {
-            btn.toggle(this.sourceEditMode);
-            if (!btn.xtbHidden) {
-                return;
-            }
+        if (btn.pressed !== sourceEditMode) {
+            btn.toggle(sourceEditMode);
         }
         }
-        if (this.sourceEditMode) {
-            // grab the height of the containing panel before we hide the iframe
-            this.previousSize = this.getSize();
-
-            iframeHeight = Ext.get(this.iframe).getHeight();
-
-            this.disableItems(true);
-            this.syncValue();
-            this.iframe.className = 'x-hidden';
-            this.el.removeClass('x-hidden');
-            this.el.dom.removeAttribute('tabIndex');
-            this.el.focus();
-            this.el.dom.style.height = iframeHeight + 'px';
+        if (sourceEditMode) {
+            me.disableItems(true);
+            me.syncValue();
+            iframe.addCls(hiddenCls);
+            textarea.removeCls(hiddenCls);
+            textarea.dom.removeAttribute('tabIndex');
+            textarea.focus();
         }
         else {
         }
         else {
-            elHeight = parseInt(this.el.dom.style.height, 10);
-            if (this.initialized) {
-                this.disableItems(this.readOnly);
+            if (me.initialized) {
+                me.disableItems(me.readOnly);
             }
             }
-            this.pushValue();
-            this.iframe.className = '';
-            this.el.addClass('x-hidden');
-            this.el.dom.setAttribute('tabIndex', -1);
-            this.deferFocus();
-
-            this.setSize(this.previousSize);
-            delete this.previousSize;
-            this.iframe.style.height = elHeight + 'px';
+            me.pushValue();
+            iframe.removeCls(hiddenCls);
+            textarea.addCls(hiddenCls);
+            textarea.dom.setAttribute('tabIndex', -1);
+            me.deferFocus();
         }
         }
-        this.fireEvent('editmodechange', this, this.sourceEditMode);
+        me.fireEvent('editmodechange', me, sourceEditMode);
+        me.doComponentLayout();
     },
 
     // private used internally
     createLink : function() {
         var url = prompt(this.createLinkText, this.defaultLinkValue);
     },
 
     // private used internally
     createLink : function() {
         var url = prompt(this.createLinkText, this.defaultLinkValue);
-        if(url && url != 'http:/'+'/'){
+        if (url &amp;&amp; url !== 'http:/'+'/') {
             this.relayCmd('createlink', url);
         }
     },
 
             this.relayCmd('createlink', url);
         }
     },
 
-    // private
-    initEvents : function(){
-        this.originalValue = this.getValue();
-    },
-
-    <div id="method-Ext.form.HtmlEditor-markInvalid"></div>/**
-     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
-     * @method
-     */
-    markInvalid : Ext.emptyFn,
-
-    <div id="method-Ext.form.HtmlEditor-clearInvalid"></div>/**
-     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
-     * @method
-     */
-    clearInvalid : Ext.emptyFn,
+    clearInvalid: Ext.emptyFn,
 
     // docs inherit from Field
 
     // docs inherit from Field
-    setValue : function(v){
-        Ext.form.HtmlEditor.superclass.setValue.call(this, v);
-        this.pushValue();
+    setValue: function(value) {
+        var me = this,
+            textarea = me.textareaEl;
+        me.mixins.field.setValue.call(me, value);
+        if (value === null || value === undefined) {
+            value = '';
+        }
+        if (textarea) {
+            textarea.dom.value = value;
+        }
+        me.pushValue();
         return this;
     },
 
         return this;
     },
 
-    <div id="method-Ext.form.HtmlEditor-cleanHtml"></div>/**
-     * Protected method that will not generally be called directly. If you need/want
+<span id='Ext-form-field-HtmlEditor-method-cleanHtml'>    /**
+</span>     * Protected method that will not generally be called directly. If you need/want
      * custom HTML cleanup, this is the method you should override.
      * @param {String} html The HTML to be cleaned
      * @return {String} The cleaned HTML
      */
     cleanHtml: function(html) {
         html = String(html);
      * custom HTML cleanup, this is the method you should override.
      * @param {String} html The HTML to be cleaned
      * @return {String} The cleaned HTML
      */
     cleanHtml: function(html) {
         html = String(html);
-        if(Ext.isWebKit){ // strip safari nonsense
-            html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+        if (Ext.isWebKit) { // strip safari nonsense
+            html = html.replace(/\sclass=&quot;(?:Apple-style-span|khtml-block-placeholder)&quot;/gi, '');
         }
 
         /*
         }
 
         /*
@@ -667,98 +709,105 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
          * value and compares it to the character code of the first character in the string
          * because it can cause encoding issues when posted to the server.
          */
          * value and compares it to the character code of the first character in the string
          * because it can cause encoding issues when posted to the server.
          */
-        if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
+        if (html.charCodeAt(0) === this.defaultValue.replace(/\D/g, '')) {
             html = html.substring(1);
         }
         return html;
     },
 
             html = html.substring(1);
         }
         return html;
     },
 
-    <div id="method-Ext.form.HtmlEditor-syncValue"></div>/**
-     * Protected method that will not generally be called directly. Syncs the contents
+<span id='Ext-form-field-HtmlEditor-method-syncValue'>    /**
+</span>     * @protected method that will not generally be called directly. Syncs the contents
      * of the editor iframe with the textarea.
      */
     syncValue : function(){
      * of the editor iframe with the textarea.
      */
     syncValue : function(){
-        if(this.initialized){
-            var bd = this.getEditorBody();
-            var html = bd.innerHTML;
-            if(Ext.isWebKit){
-                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
-                var m = bs.match(/text-align:(.*?);/i);
-                if(m && m[1]){
-                    html = '<div style="'+m[0]+'">' + html + '</div>';
+        var me = this,
+            body, html, bodyStyle, match;
+        if (me.initialized) {
+            body = me.getEditorBody();
+            html = body.innerHTML;
+            if (Ext.isWebKit) {
+                bodyStyle = body.getAttribute('style'); // Safari puts text-align styles on the body element!
+                match = bodyStyle.match(/text-align:(.*?);/i);
+                if (match &amp;&amp; match[1]) {
+                    html = '&lt;div style=&quot;' + match[0] + '&quot;&gt;' + html + '&lt;/div&gt;';
                 }
             }
                 }
             }
-            html = this.cleanHtml(html);
-            if(this.fireEvent('beforesync', this, html) !== false){
-                this.el.dom.value = html;
-                this.fireEvent('sync', this, html);
+            html = me.cleanHtml(html);
+            if (me.fireEvent('beforesync', me, html) !== false) {
+                me.textareaEl.dom.value = html;
+                me.fireEvent('sync', me, html);
             }
         }
     },
 
     //docs inherit from Field
     getValue : function() {
             }
         }
     },
 
     //docs inherit from Field
     getValue : function() {
-        this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
-        return Ext.form.HtmlEditor.superclass.getValue.call(this);
+        var me = this,
+            value;
+        if (!me.sourceEditMode) {
+            me.syncValue();
+        }
+        value = me.rendered ? me.textareaEl.dom.value : me.value;
+        me.value = value;
+        return value;
     },
 
     },
 
-    <div id="method-Ext.form.HtmlEditor-pushValue"></div>/**
-     * Protected method that will not generally be called directly. Pushes the value of the textarea
+<span id='Ext-form-field-HtmlEditor-method-pushValue'>    /**
+</span>     * @protected method that will not generally be called directly. Pushes the value of the textarea
      * into the iframe editor.
      */
      * into the iframe editor.
      */
-    pushValue : function(){
-        if(this.initialized){
-            var v = this.el.dom.value;
-            if(!this.activated && v.length < 1){
-                v = this.defaultValue;
+    pushValue: function() {
+        var me = this,
+            v;
+        if(me.initialized){
+            v = me.textareaEl.dom.value || '';
+            if (!me.activated &amp;&amp; v.length &lt; 1) {
+                v = me.defaultValue;
             }
             }
-            if(this.fireEvent('beforepush', this, v) !== false){
-                this.getEditorBody().innerHTML = v;
-                if(Ext.isGecko){
+            if (me.fireEvent('beforepush', me, v) !== false) {
+                me.getEditorBody().innerHTML = v;
+                if (Ext.isGecko) {
                     // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
                     // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
-                    this.setDesignMode(false);  //toggle off first
-                    this.setDesignMode(true);
+                    me.setDesignMode(false);  //toggle off first
+                    me.setDesignMode(true);
                 }
                 }
-                this.fireEvent('push', this, v);
+                me.fireEvent('push', me, v);
             }
             }
-
         }
     },
 
     // private
     deferFocus : function(){
         }
     },
 
     // private
     deferFocus : function(){
-        this.focus.defer(10, this);
+         this.focus(false, true);
     },
 
     },
 
-    // docs inherit from Field
-    focus : function(){
-        if(this.win && !this.sourceEditMode){
-            this.win.focus();
-        }else{
-            this.el.focus();
-        }
+    getFocusEl: function() {
+        var me = this,
+            win = me.win;
+        return win &amp;&amp; !me.sourceEditMode ? win : me.textareaEl;
     },
 
     // private
     initEditor : function(){
         //Destroying the component during/before initEditor can cause issues.
     },
 
     // private
     initEditor : function(){
         //Destroying the component during/before initEditor can cause issues.
-        try{
-            var dbody = this.getEditorBody(),
-                ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
+        try {
+            var me = this,
+                dbody = me.getEditorBody(),
+                ss = me.textareaEl.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
                 doc,
                 fn;
 
             ss['background-attachment'] = 'fixed'; // w3c
             dbody.bgProperties = 'fixed'; // ie
 
                 doc,
                 fn;
 
             ss['background-attachment'] = 'fixed'; // w3c
             dbody.bgProperties = 'fixed'; // ie
 
-            Ext.DomHelper.applyStyles(dbody, ss);
+            Ext.core.DomHelper.applyStyles(dbody, ss);
 
 
-            doc = this.getDoc();
+            doc = me.getDoc();
 
 
-            if(doc){
-                try{
+            if (doc) {
+                try {
                     Ext.EventManager.removeAll(doc);
                     Ext.EventManager.removeAll(doc);
-                }catch(e){}
+                } catch(e) {}
             }
 
             /*
             }
 
             /*
@@ -767,7 +816,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
              * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
              * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
              */
              * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
              * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
              */
-            fn = this.onEditorEvent.createDelegate(this);
+            fn = Ext.Function.bind(me.onEditorEvent, me);
             Ext.EventManager.on(doc, {
                 mousedown: fn,
                 dblclick: fn,
             Ext.EventManager.on(doc, {
                 mousedown: fn,
                 dblclick: fn,
@@ -776,185 +825,246 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
                 buffer:100
             });
 
                 buffer:100
             });
 
-            if(Ext.isGecko){
-                Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
+            // These events need to be relayed from the inner document (where they stop
+            // bubbling) up to the outer document. This has to be done at the DOM level so
+            // the event reaches listeners on elements like the document body. The effected
+            // mechanisms that depend on this bubbling behavior are listed to the right
+            // of the event.
+            fn = me.onRelayedEvent;
+            Ext.EventManager.on(doc, {
+                mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
+                mousemove: fn, // window resize drag detection
+                mouseup: fn,   // window resize termination
+                click: fn,     // not sure, but just to be safe
+                dblclick: fn,  // not sure again
+                scope: me
+            });
+
+            if (Ext.isGecko) {
+                Ext.EventManager.on(doc, 'keypress', me.applyCommand, me);
             }
             }
-            if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
-                Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
+            if (me.fixKeys) {
+                Ext.EventManager.on(doc, 'keydown', me.fixKeys, me);
             }
             }
+
+            // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
+            Ext.EventManager.on(window, 'unload', me.beforeDestroy, me);
             doc.editorInitialized = true;
             doc.editorInitialized = true;
-            this.initialized = true;
-            this.pushValue();
-            this.setReadOnly(this.readOnly);
-            this.fireEvent('initialize', this);
-        }catch(e){}
+
+            me.initialized = true;
+            me.pushValue();
+            me.setReadOnly(me.readOnly);
+            me.fireEvent('initialize', me);
+        } catch(ex) {
+            // ignore (why?)
+        }
     },
 
     // private
     beforeDestroy : function(){
     },
 
     // private
     beforeDestroy : function(){
-        if(this.monitorTask){
-            Ext.TaskMgr.stop(this.monitorTask);
+        var me = this,
+            monitorTask = me.monitorTask,
+            doc, prop;
+
+        if (monitorTask) {
+            Ext.TaskManager.stop(monitorTask);
         }
         }
-        if(this.rendered){
-            Ext.destroy(this.tb);
-            var doc = this.getDoc();
-            if(doc){
-                try{
+        if (me.rendered) {
+            try {
+                doc = me.getDoc();
+                if (doc) {
                     Ext.EventManager.removeAll(doc);
                     Ext.EventManager.removeAll(doc);
-                    for (var prop in doc){
-                        delete doc[prop];
+                    for (prop in doc) {
+                        if (doc.hasOwnProperty(prop)) {
+                            delete doc[prop];
+                        }
                     }
                     }
-                }catch(e){}
-            }
-            if(this.wrap){
-                this.wrap.dom.innerHTML = '';
-                this.wrap.remove();
+                }
+            } catch(e) {
+                // ignore (why?)
             }
             }
+            Ext.destroyMembers('tb', 'toolbarWrap', 'iframeEl', 'textareaEl');
         }
         }
-        Ext.form.HtmlEditor.superclass.beforeDestroy.call(this);
+        me.callParent();
+    },
+
+    // private
+    onRelayedEvent: function (event) {
+        // relay event from the iframe's document to the document that owns the iframe...
+
+        var iframeEl = this.iframeEl,
+            iframeXY = iframeEl.getXY(),
+            eventXY = event.getXY();
+
+        // the event from the inner document has XY relative to that document's origin,
+        // so adjust it to use the origin of the iframe in the outer document:
+        event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
+
+        event.injectEvent(iframeEl); // blame the iframe for the event...
+
+        event.xy = eventXY; // restore the original XY (just for safety)
     },
 
     // private
     onFirstFocus : function(){
     },
 
     // private
     onFirstFocus : function(){
-        this.activated = true;
-        this.disableItems(this.readOnly);
-        if(Ext.isGecko){ // prevent silly gecko errors
-            this.win.focus();
-            var s = this.win.getSelection();
-            if(!s.focusNode || s.focusNode.nodeType != 3){
-                var r = s.getRangeAt(0);
-                r.selectNodeContents(this.getEditorBody());
-                r.collapse(true);
-                this.deferFocus();
+        var me = this,
+            selection, range;
+        me.activated = true;
+        me.disableItems(me.readOnly);
+        if (Ext.isGecko) { // prevent silly gecko errors
+            me.win.focus();
+            selection = me.win.getSelection();
+            if (!selection.focusNode || selection.focusNode.nodeType !== 3) {
+                range = selection.getRangeAt(0);
+                range.selectNodeContents(me.getEditorBody());
+                range.collapse(true);
+                me.deferFocus();
+            }
+            try {
+                me.execCmd('useCSS', true);
+                me.execCmd('styleWithCSS', false);
+            } catch(e) {
+                // ignore (why?)
             }
             }
-            try{
-                this.execCmd('useCSS', true);
-                this.execCmd('styleWithCSS', false);
-            }catch(e){}
         }
         }
-        this.fireEvent('activate', this);
+        me.fireEvent('activate', me);
     },
 
     // private
     },
 
     // private
-    adjustFont: function(btn){
-        var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
-            doc = this.getDoc(),
-            v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
-        if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
+    adjustFont: function(btn) {
+        var adjust = btn.getItemId() === 'increasefontsize' ? 1 : -1,
+            size = this.getDoc().queryCommandValue('FontSize') || '2',
+            isPxSize = Ext.isString(size) &amp;&amp; size.indexOf('px') !== -1,
+            isSafari;
+        size = parseInt(size, 10);
+        if (isPxSize) {
             // Safari 3 values
             // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
             // Safari 3 values
             // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
-            if(v <= 10){
-                v = 1 + adjust;
-            }else if(v <= 13){
-                v = 2 + adjust;
-            }else if(v <= 16){
-                v = 3 + adjust;
-            }else if(v <= 18){
-                v = 4 + adjust;
-            }else if(v <= 24){
-                v = 5 + adjust;
-            }else {
-                v = 6 + adjust;
+            if (size &lt;= 10) {
+                size = 1 + adjust;
+            }
+            else if (size &lt;= 13) {
+                size = 2 + adjust;
+            }
+            else if (size &lt;= 16) {
+                size = 3 + adjust;
+            }
+            else if (size &lt;= 18) {
+                size = 4 + adjust;
+            }
+            else if (size &lt;= 24) {
+                size = 5 + adjust;
             }
             }
-            v = v.constrain(1, 6);
-        }else{
-            if(Ext.isSafari){ // safari
+            else {
+                size = 6 + adjust;
+            }
+            size = Ext.Number.constrain(size, 1, 6);
+        } else {
+            isSafari = Ext.isSafari;
+            if (isSafari) { // safari
                 adjust *= 2;
             }
                 adjust *= 2;
             }
-            v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
+            size = Math.max(1, size + adjust) + (isSafari ? 'px' : 0);
         }
         }
-        this.execCmd('FontSize', v);
+        this.execCmd('FontSize', size);
     },
 
     // private
     },
 
     // private
-    onEditorEvent : function(e){
+    onEditorEvent: function(e) {
         this.updateToolbar();
     },
 
         this.updateToolbar();
     },
 
-
-    <div id="method-Ext.form.HtmlEditor-updateToolbar"></div>/**
-     * Protected method that will not generally be called directly. It triggers
+<span id='Ext-form-field-HtmlEditor-method-updateToolbar'>    /**
+</span>     * Protected method that will not generally be called directly. It triggers
      * a toolbar update by reading the markup state of the current selection in the editor.
      */
      * a toolbar update by reading the markup state of the current selection in the editor.
      */
-    updateToolbar: function(){
+    updateToolbar: function() {
+        var me = this,
+            btns, doc, name, fontSelect;
 
 
-        if(this.readOnly){
+        if (me.readOnly) {
             return;
         }
 
             return;
         }
 
-        if(!this.activated){
-            this.onFirstFocus();
+        if (!me.activated) {
+            me.onFirstFocus();
             return;
         }
 
             return;
         }
 
-        var btns = this.tb.items.map,
-            doc = this.getDoc();
+        btns = me.getToolbar().items.map;
+        doc = me.getDoc();
 
 
-        if(this.enableFont && !Ext.isSafari2){
-            var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
-            if(name != this.fontSelect.dom.value){
-                this.fontSelect.dom.value = name;
+        if (me.enableFont &amp;&amp; !Ext.isSafari2) {
+            name = (doc.queryCommandValue('FontName') || me.defaultFont).toLowerCase();
+            fontSelect = me.fontSelect.dom;
+            if (name !== fontSelect.value) {
+                fontSelect.value = name;
             }
         }
             }
         }
-        if(this.enableFormat){
-            btns.bold.toggle(doc.queryCommandState('bold'));
-            btns.italic.toggle(doc.queryCommandState('italic'));
-            btns.underline.toggle(doc.queryCommandState('underline'));
+
+        function updateButtons() {
+            Ext.Array.forEach(Ext.Array.toArray(arguments), function(name) {
+                btns[name].toggle(doc.queryCommandState(name));
+            });
+        }
+        if(me.enableFormat){
+            updateButtons('bold', 'italic', 'underline');
         }
         }
-        if(this.enableAlignments){
-            btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
-            btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
-            btns.justifyright.toggle(doc.queryCommandState('justifyright'));
+        if(me.enableAlignments){
+            updateButtons('justifyleft', 'justifycenter', 'justifyright');
         }
         }
-        if(!Ext.isSafari2 && this.enableLists){
-            btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
-            btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
+        if(!Ext.isSafari2 &amp;&amp; me.enableLists){
+            updateButtons('insertorderedlist', 'insertunorderedlist');
         }
 
         }
 
-        Ext.menu.MenuMgr.hideAll();
+        Ext.menu.Manager.hideAll();
 
 
-        this.syncValue();
+        me.syncValue();
     },
 
     // private
     },
 
     // private
-    relayBtnCmd : function(btn){
+    relayBtnCmd: function(btn) {
         this.relayCmd(btn.getItemId());
     },
 
         this.relayCmd(btn.getItemId());
     },
 
-    <div id="method-Ext.form.HtmlEditor-relayCmd"></div>/**
-     * Executes a Midas editor command on the editor document and performs necessary focus and
-     * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+<span id='Ext-form-field-HtmlEditor-method-relayCmd'>    /**
+</span>     * Executes a Midas editor command on the editor document and performs necessary focus and
+     * toolbar updates. &lt;b&gt;This should only be called after the editor is initialized.&lt;/b&gt;
      * @param {String} cmd The Midas command
      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
      */
      * @param {String} cmd The Midas command
      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
      */
-    relayCmd : function(cmd, value){
-        (function(){
-            this.focus();
-            this.execCmd(cmd, value);
-            this.updateToolbar();
-        }).defer(10, this);
+    relayCmd: function(cmd, value) {
+        Ext.defer(function() {
+            var me = this;
+            me.focus();
+            me.execCmd(cmd, value);
+            me.updateToolbar();
+        }, 10, this);
     },
 
     },
 
-    <div id="method-Ext.form.HtmlEditor-execCmd"></div>/**
-     * Executes a Midas editor command directly on the editor document.
+<span id='Ext-form-field-HtmlEditor-method-execCmd'>    /**
+</span>     * Executes a Midas editor command directly on the editor document.
      * For visual commands, you should use {@link #relayCmd} instead.
      * For visual commands, you should use {@link #relayCmd} instead.
-     * <b>This should only be called after the editor is initialized.</b>
+     * &lt;b&gt;This should only be called after the editor is initialized.&lt;/b&gt;
      * @param {String} cmd The Midas command
      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
      */
     execCmd : function(cmd, value){
      * @param {String} cmd The Midas command
      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
      */
     execCmd : function(cmd, value){
-        var doc = this.getDoc();
-        doc.execCommand(cmd, false, value === undefined ? null : value);
-        this.syncValue();
+        var me = this,
+            doc = me.getDoc(),
+            undef;
+        doc.execCommand(cmd, false, value === undef ? null : value);
+        me.syncValue();
     },
 
     // private
     applyCommand : function(e){
     },
 
     // private
     applyCommand : function(e){
-        if(e.ctrlKey){
-            var c = e.getCharCode(), cmd;
-            if(c > 0){
+        if (e.ctrlKey) {
+            var me = this,
+                c = e.getCharCode(), cmd;
+            if (c &gt; 0) {
                 c = String.fromCharCode(c);
                 c = String.fromCharCode(c);
-                switch(c){
+                switch (c) {
                     case 'b':
                         cmd = 'bold';
                     break;
                     case 'b':
                         cmd = 'bold';
                     break;
@@ -965,108 +1075,118 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
                         cmd = 'underline';
                     break;
                 }
                         cmd = 'underline';
                     break;
                 }
-                if(cmd){
-                    this.win.focus();
-                    this.execCmd(cmd);
-                    this.deferFocus();
+                if (cmd) {
+                    me.win.focus();
+                    me.execCmd(cmd);
+                    me.deferFocus();
                     e.preventDefault();
                 }
             }
         }
     },
 
                     e.preventDefault();
                 }
             }
         }
     },
 
-    <div id="method-Ext.form.HtmlEditor-insertAtCursor"></div>/**
-     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+<span id='Ext-form-field-HtmlEditor-method-insertAtCursor'>    /**
+</span>     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
      * to insert text.
      * @param {String} text
      */
     insertAtCursor : function(text){
      * to insert text.
      * @param {String} text
      */
     insertAtCursor : function(text){
-        if(!this.activated){
-            return;
-        }
-        if(Ext.isIE){
-            this.win.focus();
-            var doc = this.getDoc(),
-                r = doc.selection.createRange();
-            if(r){
-                r.pasteHTML(text);
-                this.syncValue();
-                this.deferFocus();
+        var me = this,
+            range;
+
+        if (me.activated) {
+            me.win.focus();
+            if (Ext.isIE) {
+                range = me.getDoc().selection.createRange();
+                if (range) {
+                    range.pasteHTML(text);
+                    me.syncValue();
+                    me.deferFocus();
+                }
+            }else{
+                me.execCmd('InsertHTML', text);
+                me.deferFocus();
             }
             }
-        }else{
-            this.win.focus();
-            this.execCmd('InsertHTML', text);
-            this.deferFocus();
         }
     },
 
     // private
         }
     },
 
     // private
-    fixKeys : function(){ // load time branching for fastest keydown performance
-        if(Ext.isIE){
+    fixKeys: function() { // load time branching for fastest keydown performance
+        if (Ext.isIE) {
             return function(e){
             return function(e){
-                var k = e.getKey(),
-                    doc = this.getDoc(),
-                        r;
-                if(k == e.TAB){
+                var me = this,
+                    k = e.getKey(),
+                    doc = me.getDoc(),
+                    range, target;
+                if (k === e.TAB) {
                     e.stopEvent();
                     e.stopEvent();
-                    r = doc.selection.createRange();
-                    if(r){
-                        r.collapse(true);
-                        r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');
-                        this.deferFocus();
+                    range = doc.selection.createRange();
+                    if(range){
+                        range.collapse(true);
+                        range.pasteHTML('&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;');
+                        me.deferFocus();
                     }
                     }
-                }else if(k == e.ENTER){
-                    r = doc.selection.createRange();
-                    if(r){
-                        var target = r.parentElement();
-                        if(!target || target.tagName.toLowerCase() != 'li'){
+                }
+                else if (k === e.ENTER) {
+                    range = doc.selection.createRange();
+                    if (range) {
+                        target = range.parentElement();
+                        if(!target || target.tagName.toLowerCase() !== 'li'){
                             e.stopEvent();
                             e.stopEvent();
-                            r.pasteHTML('<br />');
-                            r.collapse(false);
-                            r.select();
+                            range.pasteHTML('&lt;br /&gt;');
+                            range.collapse(false);
+                            range.select();
                         }
                     }
                 }
             };
                         }
                     }
                 }
             };
-        }else if(Ext.isOpera){
+        }
+
+        if (Ext.isOpera) {
             return function(e){
             return function(e){
-                var k = e.getKey();
-                if(k == e.TAB){
+                var me = this;
+                if (e.getKey() === e.TAB) {
                     e.stopEvent();
                     e.stopEvent();
-                    this.win.focus();
-                    this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');
-                    this.deferFocus();
+                    me.win.focus();
+                    me.execCmd('InsertHTML','&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;');
+                    me.deferFocus();
                 }
             };
                 }
             };
-        }else if(Ext.isWebKit){
+        }
+
+        if (Ext.isWebKit) {
             return function(e){
             return function(e){
-                var k = e.getKey();
-                if(k == e.TAB){
+                var me = this,
+                    k = e.getKey();
+                if (k === e.TAB) {
                     e.stopEvent();
                     e.stopEvent();
-                    this.execCmd('InsertText','\t');
-                    this.deferFocus();
-                }else if(k == e.ENTER){
+                    me.execCmd('InsertText','\t');
+                    me.deferFocus();
+                }
+                else if (k === e.ENTER) {
                     e.stopEvent();
                     e.stopEvent();
-                    this.execCmd('InsertHtml','<br /><br />');
-                    this.deferFocus();
+                    me.execCmd('InsertHtml','&lt;br /&gt;&lt;br /&gt;');
+                    me.deferFocus();
                 }
                 }
-             };
+            };
         }
         }
+
+        return null; // not needed, so null
     }(),
 
     }(),
 
-    <div id="method-Ext.form.HtmlEditor-getToolbar"></div>/**
-     * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
-     * @return {Ext.Toolbar}
+<span id='Ext-form-field-HtmlEditor-method-getToolbar'>    /**
+</span>     * Returns the editor's toolbar. &lt;b&gt;This is only available after the editor has been rendered.&lt;/b&gt;
+     * @return {Ext.toolbar.Toolbar}
      */
     getToolbar : function(){
      */
     getToolbar : function(){
-        return this.tb;
+        return this.toolbar;
     },
 
     },
 
-    <div id="prop-Ext.form.HtmlEditor-buttonTips"></div>/**
-     * Object collection of toolbar tooltips for the buttons in the editor. The key
+<span id='Ext-form-field-HtmlEditor-property-buttonTips'>    /**
+</span>     * Object collection of toolbar tooltips for the buttons in the editor. The key
      * is the command id associated with that button and the value is a valid QuickTips object.
      * For example:
      * is the command id associated with that button and the value is a valid QuickTips object.
      * For example:
-<pre><code>
+&lt;pre&gt;&lt;code&gt;
 {
     bold : {
         title: 'Bold (Ctrl+B)',
 {
     bold : {
         title: 'Bold (Ctrl+B)',
@@ -1079,196 +1199,137 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         cls: 'x-html-editor-tip'
     },
     ...
         cls: 'x-html-editor-tip'
     },
     ...
-</code></pre>
+&lt;/code&gt;&lt;/pre&gt;
     * @type Object
      */
     buttonTips : {
         bold : {
             title: 'Bold (Ctrl+B)',
             text: 'Make the selected text bold.',
     * @type Object
      */
     buttonTips : {
         bold : {
             title: 'Bold (Ctrl+B)',
             text: 'Make the selected text bold.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         italic : {
             title: 'Italic (Ctrl+I)',
             text: 'Make the selected text italic.',
         },
         italic : {
             title: 'Italic (Ctrl+I)',
             text: 'Make the selected text italic.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         underline : {
             title: 'Underline (Ctrl+U)',
             text: 'Underline the selected text.',
         },
         underline : {
             title: 'Underline (Ctrl+U)',
             text: 'Underline the selected text.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         increasefontsize : {
             title: 'Grow Text',
             text: 'Increase the font size.',
         },
         increasefontsize : {
             title: 'Grow Text',
             text: 'Increase the font size.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         decreasefontsize : {
             title: 'Shrink Text',
             text: 'Decrease the font size.',
         },
         decreasefontsize : {
             title: 'Shrink Text',
             text: 'Decrease the font size.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         backcolor : {
             title: 'Text Highlight Color',
             text: 'Change the background color of the selected text.',
         },
         backcolor : {
             title: 'Text Highlight Color',
             text: 'Change the background color of the selected text.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         forecolor : {
             title: 'Font Color',
             text: 'Change the color of the selected text.',
         },
         forecolor : {
             title: 'Font Color',
             text: 'Change the color of the selected text.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         justifyleft : {
             title: 'Align Text Left',
             text: 'Align text to the left.',
         },
         justifyleft : {
             title: 'Align Text Left',
             text: 'Align text to the left.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         justifycenter : {
             title: 'Center Text',
             text: 'Center text in the editor.',
         },
         justifycenter : {
             title: 'Center Text',
             text: 'Center text in the editor.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         justifyright : {
             title: 'Align Text Right',
             text: 'Align text to the right.',
         },
         justifyright : {
             title: 'Align Text Right',
             text: 'Align text to the right.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         insertunorderedlist : {
             title: 'Bullet List',
             text: 'Start a bulleted list.',
         },
         insertunorderedlist : {
             title: 'Bullet List',
             text: 'Start a bulleted list.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         insertorderedlist : {
             title: 'Numbered List',
             text: 'Start a numbered list.',
         },
         insertorderedlist : {
             title: 'Numbered List',
             text: 'Start a numbered list.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         createlink : {
             title: 'Hyperlink',
             text: 'Make the selected text a hyperlink.',
         },
         createlink : {
             title: 'Hyperlink',
             text: 'Make the selected text a hyperlink.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         },
         sourceedit : {
             title: 'Source Edit',
             text: 'Switch to source editing mode.',
         },
         sourceedit : {
             title: 'Source Edit',
             text: 'Switch to source editing mode.',
-            cls: 'x-html-editor-tip'
+            cls: Ext.baseCSSPrefix + 'html-editor-tip'
         }
     }
 
     // hide stuff that is not compatible
         }
     }
 
     // hide stuff that is not compatible
-    <div id="event-Ext.form.HtmlEditor-blur"></div>/**
-     * @event blur
+<span id='Ext-form-field-HtmlEditor-event-blur'>    /**
+</span>     * @event blur
      * @hide
      */
      * @hide
      */
-    <div id="event-Ext.form.HtmlEditor-change"></div>/**
-     * @event change
+<span id='Ext-form-field-HtmlEditor-event-change'>    /**
+</span>     * @event change
      * @hide
      */
      * @hide
      */
-    <div id="event-Ext.form.HtmlEditor-focus"></div>/**
-     * @event focus
+<span id='Ext-form-field-HtmlEditor-event-focus'>    /**
+</span>     * @event focus
      * @hide
      */
      * @hide
      */
-    <div id="event-Ext.form.HtmlEditor-specialkey"></div>/**
-     * @event specialkey
+<span id='Ext-form-field-HtmlEditor-event-specialkey'>    /**
+</span>     * @event specialkey
      * @hide
      */
      * @hide
      */
-    <div id="cfg-Ext.form.HtmlEditor-fieldClass"></div>/**
-     * @cfg {String} fieldClass @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-focusClass"></div>/**
-     * @cfg {String} focusClass @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-autoCreate"></div>/**
-     * @cfg {String} autoCreate @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-inputType"></div>/**
-     * @cfg {String} inputType @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-invalidClass"></div>/**
-     * @cfg {String} invalidClass @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-invalidText"></div>/**
-     * @cfg {String} invalidText @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-msgFx"></div>/**
-     * @cfg {String} msgFx @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-validateOnBlur"></div>/**
-     * @cfg {String} validateOnBlur @hide
+<span id='Ext-form-field-HtmlEditor-cfg-fieldCls'>    /**
+</span>     * @cfg {String} fieldCls @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-allowDomMove"></div>/**
-     * @cfg {Boolean} allowDomMove  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-focusCls'>    /**
+</span>     * @cfg {String} focusCls @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-applyTo"></div>/**
-     * @cfg {String} applyTo @hide
+<span id='Ext-form-field-HtmlEditor-cfg-autoCreate'>    /**
+</span>     * @cfg {String} autoCreate @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-autoHeight"></div>/**
-     * @cfg {String} autoHeight  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-inputType'>    /**
+</span>     * @cfg {String} inputType @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-autoWidth"></div>/**
-     * @cfg {String} autoWidth  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-invalidCls'>    /**
+</span>     * @cfg {String} invalidCls @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-cls"></div>/**
-     * @cfg {String} cls  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-invalidText'>    /**
+</span>     * @cfg {String} invalidText @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-disabled"></div>/**
-     * @cfg {String} disabled  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-msgFx'>    /**
+</span>     * @cfg {String} msgFx @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-disabledClass"></div>/**
-     * @cfg {String} disabledClass  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-allowDomMove'>    /**
+</span>     * @cfg {Boolean} allowDomMove  @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-msgTarget"></div>/**
-     * @cfg {String} msgTarget  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-applyTo'>    /**
+</span>     * @cfg {String} applyTo @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-readOnly"></div>/**
-     * @cfg {String} readOnly  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-readOnly'>    /**
+</span>     * @cfg {String} readOnly  @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-style"></div>/**
-     * @cfg {String} style  @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-validationDelay"></div>/**
-     * @cfg {String} validationDelay  @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-validationEvent"></div>/**
-     * @cfg {String} validationEvent  @hide
-     */
-    <div id="cfg-Ext.form.HtmlEditor-tabIndex"></div>/**
-     * @cfg {String} tabIndex  @hide
-     */
-    <div id="prop-Ext.form.HtmlEditor-disabled"></div>/**
-     * @property disabled
-     * @hide
-     */
-    <div id="method-Ext.form.HtmlEditor-applyToMarkup"></div>/**
-     * @method applyToMarkup
-     * @hide
-     */
-    <div id="method-Ext.form.HtmlEditor-disable"></div>/**
-     * @method disable
-     * @hide
-     */
-    <div id="method-Ext.form.HtmlEditor-enable"></div>/**
-     * @method enable
-     * @hide
-     */
-    <div id="method-Ext.form.HtmlEditor-validate"></div>/**
-     * @method validate
-     * @hide
-     */
-    <div id="event-Ext.form.HtmlEditor-valid"></div>/**
-     * @event valid
-     * @hide
-     */
-    <div id="method-Ext.form.HtmlEditor-setDisabled"></div>/**
-     * @method setDisabled
-     * @hide
+<span id='Ext-form-field-HtmlEditor-cfg-tabIndex'>    /**
+</span>     * @cfg {String} tabIndex  @hide
      */
      */
-    <div id="cfg-Ext.form.HtmlEditor-null"></div>/**
-     * @cfg keys
+<span id='Ext-form-field-HtmlEditor-method-validate'>    /**
+</span>     * @method validate
      * @hide
      */
 });
      * @hide
      */
 });
-Ext.reg('htmleditor', Ext.form.HtmlEditor);
-</pre>    
+</pre>
 </body>
 </body>
-</html>
\ No newline at end of file
+</html>
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.