Revert "[TASK] Migrate to ExtJS 4: Migrate RTE"
authorOliver Hader <oliver@typo3.org>
Fri, 13 Jan 2012 10:55:46 +0000 (11:55 +0100)
committerOliver Hader <oliver@typo3.org>
Fri, 13 Jan 2012 11:14:25 +0000 (12:14 +0100)
This reverts commit 463526e5e96dfe81854deffc36db63eee45ed380.

Change-Id: Iaa4eb001026000bd50f9cf9c05462632bf746c3e
Resolves: #33164
Releases: 4.7
Reviewed-on: http://review.typo3.org/7771
Reviewed-by: Oliver Hader
Tested-by: Oliver Hader
42 files changed:
typo3/sysext/rtehtmlarea/class.tx_rtehtmlarea_base.php
typo3/sysext/rtehtmlarea/ext_localconf.php
typo3/sysext/rtehtmlarea/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php
typo3/sysext/rtehtmlarea/extensions/CharacterMap/skin/htmlarea.css
typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/about-editor.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/Acronym/acronym.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockElements/block-elements.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockStyle/block-style.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xlf
typo3/sysext/rtehtmlarea/htmlarea/plugins/ContextMenu/context-menu.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/CopyPaste/copy-paste.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultClean/default-clean.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/default-image.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/locallang.xlf
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultInline/default-inline.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultLink/default-link.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefinitionList/definition-list.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/EditElement/edit-element.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/FindReplace/find-replace.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/InlineElements/inline-elements.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/InsertSmiley/insert-smiley.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/Language/language.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/PlainText/plain-text.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/QuickTag/quick-tag.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/RemoveFormat/remove-format.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3HtmlParser/typo3html-parser.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Image/typo3image.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Link/typo3link.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TableOperations/table-operations.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TextIndicator/text-indicator.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/TextStyle/text-style.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/UndoRedo/undo-redo.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/UserElements/user-elements.js
typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index 085d7ef..92e3ca7 100644 (file)
@@ -599,7 +599,7 @@ class tx_rtehtmlarea_base extends t3lib_rteapi {
                        bar, left, center, right, justifyfull,
                        bar, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent,  bar, lefttoright, righttoleft, language, showlanguagemarks,
                        bar, textcolor, bgcolor, textindicator,
-                       bar, editelement, emoticon, insertcharacter, insertsofthyphen, link, unlink, image, table,' . (($this->thisConfig['hideTableOperationsInToolbar'] && is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.']['toggleborders.']) && $this->thisConfig['buttons.']['toggleborders.']['keepInToolbar']) ? ' toggleborders,': '') . ' user, acronym, bar, findreplace, spellcheck,
+                       bar, editelement, emoticon, insertcharacter, link, unlink, image, table,' . (($this->thisConfig['hideTableOperationsInToolbar'] && is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.']['toggleborders.']) && $this->thisConfig['buttons.']['toggleborders.']['keepInToolbar']) ? ' toggleborders,': '') . ' user, acronym, bar, findreplace, spellcheck,
                        bar, chMode, inserttag, removeformat, bar, copy, cut, paste, pastetoggle, pastebehaviour, bar, undo, redo, bar, showhelp, about, linebreak,
                        ' . ($this->thisConfig['hideTableOperationsInToolbar'] ? '': 'bar, toggleborders,') . ' bar, tableproperties, tablerestyle, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar,
                        columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, bar,
index 495c522..7b1e376 100644 (file)
@@ -126,7 +126,7 @@ $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['BlockStyle'] = array();
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['BlockStyle']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/BlockStyle/class.tx_rtehtmlarea_blockstyle.php:&tx_rtehtmlarea_blockstyle';
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap'] = array();
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php:&tx_rtehtmlarea_charactermap';
-$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap']['addIconsToSkin'] = 1;
+$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap']['addIconsToSkin'] = 0;
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['Acronym'] = array();
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['Acronym']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/Acronym/class.tx_rtehtmlarea_acronym.php:&tx_rtehtmlarea_acronym';
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['Acronym']['addIconsToSkin'] = 0;
index 8d9cf3b..6acfc75 100644 (file)
@@ -38,10 +38,9 @@ class tx_rtehtmlarea_charactermap extends tx_rtehtmlarea_api {
        protected $toolbar;                             // Reference to RTE toolbar array
        protected $LOCAL_LANG;                          // Frontend language array
 
-       protected $pluginButtons = 'insertcharacter,insertsofthyphen';
+       protected $pluginButtons = 'insertcharacter';
        protected $convertToolbarForHtmlAreaArray = array (
                'insertcharacter'       => 'InsertCharacter',
-               'insertsofthyphen'      => 'InsertSoftHyphen',
                );
 
        /**
index 20cfd22..ab3f1aa 100644 (file)
@@ -3,7 +3,3 @@
        background-image: url('images/insertCharacter.gif') !important;
        background-position: 0 0 !important;
 }
-.htmlarea-action-soft-hyphen-insert {
-       background-image: url('images/insertSoftHyphen.gif') !important;
-       background-position: 0 0 !important;
-}
index 9d3a7a6..dcd2351 100644 (file)
  */
        // Avoid re-initialization on AJax call when HTMLArea object was already initialized
 if (typeof(HTMLArea) == 'undefined') {
-/*
- * MODIFIED Ext.EventManager
- *
- * HTMLArea will need to establish listeners on it's iframe's documentElement.
- * This element does not belong to the document in which ExtJS is initialized.
- * ExtJS's garbage collection will clean away this cached element and any listeners on it.
- * Therefore, this sequence function will skipGarbageCollection on any element
- * that does not belong to the document in which ExtJS is initialized.
- */
-Ext.EventManager.getId = Ext.Function.createSequence(Ext.EventManager.getId, function (element) {
-       var id;
-
-        element = Ext.getDom(element);
-
-        if (element === document || element === window) {
-            id = element === document ? Ext.documentId : Ext.windowId;
-        }
-        else {
-            id = Ext.id(element);
-        }
-               // Skip garbage collection if the element does not belong to the document in which ExtJS is initialized
-       if (element && (element.ownerDocument !== document)) {
-               Ext.cache[id].skipGarbageCollection = true;
-       }
-       return id;
-});
        // Establish HTMLArea name space
-Ext.namespace('HTMLArea.util.TYPO3', 'HTMLArea.util.Tips', 'HTMLArea.util.Color');
+Ext.namespace('HTMLArea.CSS', 'HTMLArea.util.TYPO3', 'HTMLArea.util.Tips', 'HTMLArea.util.Color', 'Ext.ux.form', 'Ext.ux.menu', 'Ext.ux.Toolbar');
 Ext.apply(HTMLArea, {
        /***************************************************
         * COMPILED REGULAR EXPRESSIONS                    *
@@ -137,16 +111,6 @@ Ext.apply(HTMLArea, {
 /***************************************************
  *  EDITOR CONFIGURATION
  ***************************************************/
-Ext.define('HTMLArea.model.Default', {
-       extend: 'Ext.data.Model',
-       fields: [{
-                       name: 'text',
-                       type: 'string'
-               },{
-                       name: 'value',
-                       type: 'string'
-       }]
-});
 HTMLArea.Config = function (editorId) {
        this.editorId = editorId;
                // if the site is secure, create a secure iframe
@@ -189,6 +153,7 @@ HTMLArea.Config = function (editorId) {
        this.configDefaults = {
                all: {
                        xtype: 'htmlareabutton',
+                       disabledClass: 'buttonDisabled',
                        textMode: false,
                        selection: false,
                        dialog: false,
@@ -198,12 +163,11 @@ HTMLArea.Config = function (editorId) {
                htmlareabutton: {
                        cls: 'button',
                        overCls: 'buttonHover',
-                       scale: 'medium',
                                // Erratic behaviour of click event in WebKit and IE browsers
                        clickEvent: (Ext.isWebKit || Ext.isIE) ? 'mousedown' : 'click'
                },
                htmlareacombo: {
-                       cls: 'htmlarea-combo',
+                       cls: 'select',
                        typeAhead: true,
                        lastQuery: '',
                        triggerAction: 'all',
@@ -213,14 +177,14 @@ HTMLArea.Config = function (editorId) {
                        validateOnBlur: false,
                        submitValue: false,
                        forceSelection: true,
-                       queryMode: 'local',
+                       mode: 'local',
                        storeRoot: 'options',
-                       model: 'HTMLArea.model.Default',
+                       storeFields: [ { name: 'text'}, { name: 'value'}],
                        valueField: 'value',
                        displayField: 'text',
                        labelSeparator: '',
                        hideLabel: true,
-                       template: '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>'
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
                }
        };
 };
@@ -244,7 +208,7 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
         */
        registerButton: function (config) {
                config.itemId = config.id;
-               if (this.buttonsConfig[config.id]) {
+               if (Ext.type(this.buttonsConfig[config.id])) {
                        HTMLArea.appendToLog('', 'HTMLArea.Config', 'registerButton', 'A toolbar item with the same Id: ' + config.id + ' already exists and will be overidden.', 'warn');
                }
                        // Apply defaults
@@ -255,32 +219,21 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
                        case 'htmlareacombo':
                                if (config.options) {
                                                // Create combo array store
-                                       config.store = Ext.create('Ext.data.ArrayStore', {
-                                               data: config.options,
-                                               model: config.model,
-                                               storeId: this.editorId + '-store-' + config.id
+                                       config.store = new Ext.data.ArrayStore({
+                                               autoDestroy:  true,
+                                               fields: config.storeFields,
+                                               data: config.options
                                        });
                                } else if (config.storeUrl) {
                                                // Create combo json store
-                                       config.store = Ext.create('Ext.data.Store', {
+                                       config.store = new Ext.data.JsonStore({
+                                               autoDestroy:  true,
                                                autoLoad: true,
-                                               model: config.model,
-                                               proxy: {
-                                                       type: 'ajax',
-                                                       url: config.storeUrl,
-                                                       reader: {
-                                                               type: 'json',
-                                                               root: config.storeRoot
-                                                       }
-                                               },
-                                               storeId: this.editorId + '-store-' + config.id
+                                               root: config.storeRoot,
+                                               fields: config.storeFields,
+                                               url: config.storeUrl
                                        });
                                }
-                               if (!Ext.isObject(config.listConfig)) {
-                                       config.listConfig = {};
-                               }
-                               config.listConfig.getInnerTpl = function () { return config.template; };
-                               config.listConfig.cls = 'htmlarea-combo-list';
                                config.hideLabel = Ext.isEmpty(config.fieldLabel) || Ext.isIE6;
                                config.helpTitle = config.tooltip;
                                break;
@@ -291,9 +244,7 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
                                break;
                }
                config.cmd = config.id;
-               config.tooltip = {
-                       text: config.tooltip
-               };
+               config.tooltip = { title: config.tooltip };
                this.buttonsConfig[config.id] = config;
                return true;
        },
@@ -323,16 +274,14 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
  *  TOOLBAR COMPONENTS
  ***************************************************/
 /*
- * HTMLArea.toolbar.Button extends Ext.button.Button
+ * Ext.ux.HTMLAreaButton extends Ext.Button
  */
-Ext.define('HTMLArea.toolbar.Button', {
-       extend: 'Ext.button.Button',
-       alias: ['widget.htmlareabutton'],
+Ext.ux.HTMLAreaButton = Ext.extend(Ext.Button, {
        /*
         * Component initialization
         */
        initComponent: function () {
-               this.callParent(arguments);
+               Ext.ux.HTMLAreaButton.superclass.initComponent.call(this);
                this.addEvents(
                        /*
                         * @event HTMLAreaEventHotkey
@@ -381,19 +330,13 @@ Ext.define('HTMLArea.toolbar.Button', {
                return this.ownerCt;
        },
        /*
-        * Get the button itemId
-        */
-       getItemId: function() {
-               return this.itemId;
-       },
-       /*
         * Add properties and function to set button active or not depending on current selection
         */
        inactive: true,
        activeClass: 'buttonActive',
        setInactive: function (inactive) {
                this.inactive = inactive;
-               return inactive ? this.removeCls(this.activeClass) : this.addCls(this.activeClass);
+               return inactive ? this.removeClass(this.activeClass) : this.addClass(this.activeClass);
        },
        /*
         * Determine if the button should be enabled based on the current selection and context configuration property
@@ -429,15 +372,9 @@ Ext.define('HTMLArea.toolbar.Button', {
         * Handler invoked when the button is clicked
         */
        onButtonClick: function (button, event, key) {
-               var returnValue = true;
                if (!this.disabled) {
-                       if (this.dialog && Ext.isObject(event)) {
-                               event.stopEvent();
-                               returnValue = false;
-                       }
-                       if (!this.plugins[0][this.action](this.getEditor(), key || this.getItemId()) && Ext.isObject(event)) {
+                       if (!this.plugins[this.action](this.getEditor(), key || this.itemId) && event) {
                                event.stopEvent();
-                               returnValue = false;
                        }
                        if (Ext.isOpera) {
                                this.getEditor().focus();
@@ -448,7 +385,7 @@ Ext.define('HTMLArea.toolbar.Button', {
                                this.getToolbar().update();
                        }
                }
-               return returnValue;
+               return false;
        },
        /*
         * Handler invoked when the hotkey configured for this button is pressed
@@ -465,22 +402,20 @@ Ext.define('HTMLArea.toolbar.Button', {
                        if (!this.noAutoUpdate) {
                                this.setDisabled(!this.isInContext(mode, selectionEmpty, ancestors));
                        }
-                       this.plugins[0].onUpdateToolbar(this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+                       this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
                }
        }
 });
-
+Ext.reg('htmlareabutton', Ext.ux.HTMLAreaButton);
 /*
- * HTMLArea.toolbar.TextItem extends Ext.Toolbar.TextItem
+ * Ext.ux.Toolbar.HTMLAreaToolbarText extends Ext.Toolbar.TextItem
  */
-Ext.define('HTMLArea.toolbar.TextItem', {
-       extend: 'Ext.toolbar.TextItem',
-       alias: ['widget.htmlareatoolbartext'],
+Ext.ux.Toolbar.HTMLAreaToolbarText = Ext.extend(Ext.Toolbar.TextItem, {
        /*
-        * Initialize component
+        * Constructor
         */
        initComponent: function () {
-               this.callParent(arguments);
+               Ext.ux.Toolbar.HTMLAreaToolbarText.superclass.initComponent.call(this);
                this.addListener({
                        afterrender: {
                                fn: this.initEventListeners,
@@ -513,22 +448,20 @@ Ext.define('HTMLArea.toolbar.TextItem', {
        onUpdateToolbar: function (mode, selectionEmpty, ancestors, endPointsInSameBlock) {
                this.setDisabled(mode === 'textmode' && !this.textMode);
                if (!this.disabled) {
-                       this.plugins[0].onUpdateToolbar(this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+                       this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
                }
        }
 });
-
+Ext.reg('htmlareatoolbartext', Ext.ux.Toolbar.HTMLAreaToolbarText);
 /*
- * HTMLArea.toolbar.ComboBox extends Ext.form.field.ComboBox
+ * Ext.ux.form.HTMLAreaCombo extends Ext.form.ComboBox
  */
-Ext.define('HTMLArea.toolbar.ComboBox', {
-       extend: 'Ext.form.field.ComboBox',
-       alias: ['widget.htmlareacombo'],
+Ext.ux.form.HTMLAreaCombo = Ext.extend(Ext.form.ComboBox, {
        /*
-        * Initialize component
+        * Constructor
         */
        initComponent: function () {
-               this.callParent(arguments);
+               Ext.ux.form.HTMLAreaCombo.superclass.initComponent.call(this);
                this.addEvents(
                        /*
                         * @event HTMLAreaEventHotkey
@@ -580,21 +513,9 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
                return this.ownerCt;
        },
        /*
-        * Get the combo itemId
-        */
-       getItemId: function() {
-               return this.itemId;
-       },
-       /*
-        * Get the combo store
-        */
-       getStore: function(){
-               return this.store;
-       },
-       /*
         * Handler invoked when an item is selected in the dropdown list
         */
-       onComboSelect: function (combo, records) {
+       onComboSelect: function (combo, record, index) {
                if (!combo.disabled) {
                        var editor = this.getEditor();
                                // In IE, reclaim lost focus on the editor iframe and restore the bookmarked selection
@@ -606,7 +527,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
                                }
                        }
                                // Invoke the plugin onChange handler
-                       this.plugins[0][this.action](editor, combo, records);
+                       this.plugins[this.action](editor, combo, record, index);
                                // In IE, bookmark the updated selection as the editor will be loosing focus
                        if (Ext.isIE) {
                                editor.focus();
@@ -625,7 +546,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
         * In IE, need to reclaim lost focus for the editor in order to restore the selection
         */
        onTriggerClick: function () {
-               this.callParent(arguments);
+               Ext.ux.form.HTMLAreaCombo.superclass.onTriggerClick.call(this);
                        // In IE, avoid focus being stolen and selection being lost
                if (Ext.isIE) {
                        this.triggered = true;
@@ -637,7 +558,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
         */
        onViewClick: function (doFocus) {
                        // Avoid stealing focus from the editor
-               this.callParent([false]);
+               Ext.ux.form.HTMLAreaCombo.superclass.onViewClick.call(this, false);
        },
        /*
         * Handler invoked in IE when the mouse moves out of the editor iframe
@@ -671,7 +592,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
         */
        onHotKey: function (key) {
                if (!this.disabled) {
-                       this.plugins[0].onHotKey(this.getEditor(), key);
+                       this.plugins.onHotKey(this.getEditor(), key);
                        if (Ext.isOpera) {
                                this.getEditor().focus();
                        }
@@ -685,7 +606,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
        onUpdateToolbar: function (mode, selectionEmpty, ancestors, endPointsInSameBlock) {
                this.setDisabled(mode === 'textmode' && !this.textMode);
                if (!this.disabled) {
-                       this.plugins[0].onUpdateToolbar(this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+                       this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
                }
        },
        /*
@@ -713,21 +634,19 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
                this.getStore().destroy();
        }
 });
-
+Ext.reg('htmlareacombo', Ext.ux.form.HTMLAreaCombo);
 /***************************************************
  *  EDITOR FRAMEWORK
  ***************************************************/
 /*
- * HTMLArea.toolbar.Toolbar extends Ext.container.Container
+ * HTMLArea.Toolbar extends Ext.Container
  */
-Ext.define('HTMLArea.toolbar.Toolbar', {
-       extend: 'Ext.container.Container',
-       alias: ['widget.htmlareatoolbar'],
+HTMLArea.Toolbar = Ext.extend(Ext.Container, {
        /*
-        * Initialize component
+        * Constructor
         */
        initComponent: function () {
-               this.callParent(arguments);
+               HTMLArea.Toolbar.superclass.initComponent.call(this);
                this.addEvents(
                        /*
                         * @event HTMLAreaEventToolbarUpdate
@@ -736,7 +655,7 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
                        'HTMLAreaEventToolbarUpdate'
                );
                        // Build the deferred toolbar update task
-               this.updateLater = Ext.create('Ext.util.DelayedTask', this.update, this);
+               this.updateLater = new Ext.util.DelayedTask(this.update, this);
                        // Add the toolbar items
                this.addItems();
                this.addListener({
@@ -777,13 +696,12 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
                        // Walk through the editor toolbar configuration nested arrays: [ toolbar [ row [ group ] ] ]
                var firstOnRow = true;
                var firstInGroup = true;
-               var itemsConfig = [];
                Ext.each(editor.config.toolbar, function (row) {
                        if (!firstOnRow) {
                                        // If a visible item was added to the previous line
-                               itemsConfig.push({
+                               this.add({
                                        xtype: 'tbspacer',
-                                       cls: 'htmlarea-clear-left'
+                                       cls: 'x-form-clear-left'
                                });
                        }
                        firstOnRow = true;
@@ -792,25 +710,25 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
                                        // To do: this.config.keepButtonGroupTogether ...
                                if (!firstOnRow && !firstInGroup) {
                                                // If a visible item was added to the line
-                                       itemsConfig.push({
+                                       this.add({
                                                xtype: 'tbseparator',
-                                               cls: 'htmlarea-toolbar-separator'
+                                               cls: 'separator'
                                        });
                                }
                                firstInGroup = true;
                                        // Add each item
                                Ext.each(group, function (item) {
                                        if (item == 'space') {
-                                               itemsConfig.push({
+                                               this.add({
                                                        xtype: 'tbspacer',
-                                                       cls: 'htmlarea-toolbar-spacer'
+                                                       cls: 'space'
                                                });
                                        } else {
                                                        // Get the item's config as registered by some plugin
                                                var itemConfig = editor.config.buttonsConfig[item];
                                                if (!Ext.isEmpty(itemConfig)) {
                                                        itemConfig.id = this.editorId + '-' + itemConfig.id;
-                                                       itemsConfig.push(itemConfig);
+                                                       this.add(itemConfig);
                                                        firstInGroup = firstInGroup && itemConfig.hidden;
                                                        firstOnRow = firstOnRow && firstInGroup;
                                                }
@@ -821,17 +739,16 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
                        }, this);
                        return true;
                }, this);
-               itemsConfig.push({
+               this.add({
                        xtype: 'tbspacer',
-                       cls: 'htmlarea-clear-left'
+                       cls: 'x-form-clear-left'
                });
-               this.add(itemsConfig);
        },
        /*
         * Retrieve a toolbar item by itemId
         */
        getButton: function (buttonId) {
-               return this.getComponent(buttonId);
+               return this.find('itemId', buttonId)[0];
        },
        /*
         * Update the state of the toolbar
@@ -854,20 +771,19 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
         */
        onBeforeDestroy: function () {
                this.removeAll(true);
+               return true;
        }
 });
-
+Ext.reg('htmlareatoolbar', HTMLArea.Toolbar);
 /*
- * HTMLArea.Iframe extends Ext.Component
+ * HTMLArea.Iframe extends Ext.BoxComponent
  */
-Ext.define('HTMLArea.Iframe', {
-       extend: 'Ext.Component',
-       alias: ['widget.htmlareaiframe'],
+HTMLArea.Iframe = Ext.extend(Ext.BoxComponent, {
        /*
-        * Initialize component
+        * Constructor
         */
        initComponent: function () {
-               this.callParent(arguments);
+               HTMLArea.Iframe.superclass.initComponent.call(this);
                this.addEvents(
                        /*
                         * @event HTMLAreaEventIframeReady
@@ -891,14 +807,14 @@ Ext.define('HTMLArea.Iframe', {
                        }
                });
                this.config = this.getEditor().config;
-               this.htmlRenderer = Ext.create('HTMLArea.DOM.Walker', {
+               this.htmlRenderer = new HTMLArea.DOM.Walker({
                        keepComments: !this.config.htmlRemoveComments,
                        removeTags: this.config.htmlRemoveTags,
                        removeTagsAndContents: this.config.htmlRemoveTagsAndContents,
                        baseUrl: this.config.baseURL
                });
                if (!this.config.showStatusBar) {
-                       this.addCls('noStatusBar');
+                       this.addClass('noStatusBar');
                }
        },
        /*
@@ -948,13 +864,13 @@ Ext.define('HTMLArea.Iframe', {
         * Get a reference to the toolbar
         */
        getToolbar: function () {
-               return this.ownerCt.toolbar;
+               return this.ownerCt.getTopToolbar();
        },
        /*
         * Get a reference to the statusBar
         */
        getStatusBar: function () {
-               return this.ownerCt.statusBar;
+               return this.ownerCt.getBottomToolbar();
        },
        /*
         * Get a reference to a button
@@ -967,19 +883,43 @@ Ext.define('HTMLArea.Iframe', {
         */
        ready: false,
        /*
+        * Create the iframe element at rendering time
+        */
+       onRender: function (ct, position){
+                       // from Ext.Component
+               if (!this.el && this.autoEl) {
+                       if (Ext.isString(this.autoEl)) {
+                               this.el = document.createElement(this.autoEl);
+                       } else {
+                                       // ExtJS Default method will not work with iframe element
+                               this.el = Ext.DomHelper.append(ct, this.autoEl, true);
+                       }
+                       if (!this.el.id) {
+                               this.el.id = this.getId();
+                       }
+               }
+                       // from Ext.BoxComponent
+               if (this.resizeEl){
+                       this.resizeEl = Ext.get(this.resizeEl);
+               }
+               if (this.positionEl){
+                       this.positionEl = Ext.get(this.positionEl);
+               }
+       },
+       /*
         * Proceed to build the iframe document head and ensure style sheets are available after the iframe document becomes available
         */
        initializeIframe: function () {
                var iframe = this.getEl().dom;
                        // All browsers
                if (!iframe || (!iframe.contentWindow && !iframe.contentDocument)) {
-                       Ext.Function.defer(this.initializeIframe, 50, this);
+                       this.initializeIframe.defer(50, this);
                        // All except WebKit
                } else if (iframe.contentWindow && !Ext.isWebKit && (!iframe.contentWindow.document || !iframe.contentWindow.document.documentElement)) {
-                       Ext.Function.defer(this.initializeIframe, 50, this);
+                       this.initializeIframe.defer(50, this);
                        // WebKit
                } else if (Ext.isWebKit && (!iframe.contentDocument.documentElement || !iframe.contentDocument.body)) {
-                       Ext.Function.defer(this.initializeIframe, 50, this);
+                       this.initializeIframe.defer(50, this);
                } else {
                        this.document = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;
                        this.getEditor().document = this.document;
@@ -987,9 +927,12 @@ Ext.define('HTMLArea.Iframe', {
                        this.getEditor()._iframe = iframe;
                        this.createHead();
                                // Style the document body
-                       Ext.fly(this.document.body).addCls('htmlarea-content-body');
+                       Ext.get(this.document.body).addClass('htmlarea-content-body');
                                // Start listening to things happening in the iframe
-                       this.startListening();
+                               // For some unknown reason, this is too early for Opera
+                       if (!Ext.isOpera) {
+                               this.startListening();
+                       }
                                // Hide the iframe
                        this.hide();
                                // Set iframe ready
@@ -1053,11 +996,13 @@ Ext.define('HTMLArea.Iframe', {
         * Focus on the iframe
         */
        focus: function () {
-               if (Ext.isWebKit) {
-                       this.getEl().dom.focus();
-               } else {
-                       this.getEl().dom.contentWindow.focus();
-               }
+               try {
+                       if (Ext.isWebKit) {
+                               this.getEl().dom.focus();
+                       } else {
+                               this.getEl().dom.contentWindow.focus();
+                       }
+               } catch(e) { }
        },
        /*
         * Flag indicating whether the framework is inside a tab or inline element that may be hidden
@@ -1171,7 +1116,7 @@ Ext.define('HTMLArea.Iframe', {
         */
        startListening: function () {
                        // Create keyMap so that plugins may bind key handlers
-               this.keyMap = Ext.create('Ext.util.KeyMap', Ext.get(this.document.documentElement), [], (Ext.isIE || Ext.isWebKit) ? 'keydown' : 'keypress');
+               this.keyMap = new Ext.KeyMap(Ext.get(this.document.documentElement), [], (Ext.isIE || Ext.isWebKit) ? 'keydown' : 'keypress');
                        // Special keys map
                this.keyMap.addBinding([
                        {
@@ -1231,7 +1176,7 @@ Ext.define('HTMLArea.Iframe', {
                        }
                });
                        // Make hot key map available, even if empty, so that plugins may add bindings
-               this.hotKeyMap = Ext.create('Ext.util.KeyMap', Ext.get(this.document.documentElement));
+               this.hotKeyMap = new Ext.KeyMap(Ext.get(this.document.documentElement));
                if (!Ext.isEmpty(hotKeys)) {
                        this.hotKeyMap.addBinding({
                                key: hotKeys,
@@ -1239,8 +1184,7 @@ Ext.define('HTMLArea.Iframe', {
                                shift: false,
                                alt: false,
                                handler: this.onHotKey,
-                               scope: this,
-                               defaultEventAction: 'stopEvent'
+                               scope: this
                        });
                }
                this.mon(Ext.get(this.document.documentElement), (Ext.isIE || Ext.isWebKit) ? 'keydown' : 'keypress', this.onAnyKey, this);
@@ -1303,7 +1247,7 @@ Ext.define('HTMLArea.Iframe', {
        onPaste: function (event) {
                        // Make src and href urls absolute
                if (Ext.isGecko) {
-                       Ext.Function.defer(HTMLArea.DOM.makeUrlsAbsolute, 50, this, [this.getEditor().document.body, this.config.baseURL, this.htmlRenderer]);
+                       HTMLArea.DOM.makeUrlsAbsolute.defer(50, this, [this.getEditor().document.body, this.config.baseURL, this.htmlRenderer]);
                }
        },
        /*
@@ -1312,11 +1256,11 @@ Ext.define('HTMLArea.Iframe', {
        onDrop: function (event, target) {
                        // Clean up span elements added by WebKit
                if (Ext.isWebKit) {
-                       Ext.Function.defer(this.getEditor().cleanAppleStyleSpans, 50, this.getEditor(), [this.getEditor().document.body]);
+                       this.getEditor().cleanAppleStyleSpans.defer(50, this.getEditor(), [this.getEditor().document.body]);
                }
                        // Make src url absolute in Firefox
                if (Ext.isGecko) {
-                       Ext.Function.defer(HTMLArea.DOM.makeUrlsAbsolute, 50, this, [target, this.config.baseURL, this.htmlRenderer]);
+                       HTMLArea.DOM.makeUrlsAbsolute.defer(50, this, [target, this.config.baseURL, this.htmlRenderer]);
                }
                this.getToolbar().updateLater.delay(100);
        },
@@ -1438,7 +1382,8 @@ Ext.define('HTMLArea.Iframe', {
                        return false;
                }
                var hotKey = String.fromCharCode(key).toLowerCase();
-               return this.getButton(this.config.hotKeyList[hotKey].cmd).fireEvent('HTMLAreaEventHotkey', hotKey, event);
+               this.getButton(this.config.hotKeyList[hotKey].cmd).fireEvent('HTMLAreaEventHotkey', hotKey, event);
+               return false;
        },
        /*
         * Cleanup
@@ -1473,20 +1418,18 @@ Ext.define('HTMLArea.Iframe', {
                return true;
        }
 });
-
+Ext.reg('htmlareaiframe', HTMLArea.Iframe);
 /*
- * HTMLArea.StatusBar extends Ext.container.Container
+ * HTMLArea.StatusBar extends Ext.Container
  */
-Ext.define('HTMLArea.StatusBar', {
-       extend: 'Ext.container.Container',
-       alias: ['widget.htmlareastatusbar'],
+HTMLArea.StatusBar = Ext.extend(Ext.Container, {
        /*
-        * Initialize component
+        * Constructor
         */
        initComponent: function () {
-               this.callParent(arguments);
+               HTMLArea.StatusBar.superclass.initComponent.call(this);
                        // Build the deferred word count update task
-               this.updateWordCountLater = Ext.create('Ext.util.DelayedTask', this.updateWordCount, this);
+               this.updateWordCountLater = new Ext.util.DelayedTask(this.updateWordCount, this);
                this.addListener({
                        render: {
                                fn: this.addComponents,
@@ -1510,11 +1453,11 @@ Ext.define('HTMLArea.StatusBar', {
                });
                        // Monitor toolbar updates in order to refresh the contents of the statusbar
                        // The toolbar must have been rendered
-               this.mon(this.getToolbar(), 'HTMLAreaEventToolbarUpdate', this.onUpdateToolbar, this);
+               this.mon(this.ownerCt.toolbar, 'HTMLAreaEventToolbarUpdate', this.onUpdateToolbar, this);
                        // Monitor editor changing mode
                this.mon(this.getEditor(), 'HTMLAreaEventModeChange', this.onModeChange, this);
                        // Monitor word count change
-               this.mon(this.getIframe(), 'HTMLAreaEventWordCountChange', this.onWordCountChange, this);
+               this.mon(this.ownerCt.iframe, 'HTMLAreaEventWordCountChange', this.onWordCountChange, this);
        },
        /*
         * editorId should be set in config
@@ -1527,34 +1470,22 @@ Ext.define('HTMLArea.StatusBar', {
                return RTEarea[this.editorId].editor;
        },
        /*
-        * Get a reference to the toolbar
-        */
-       getToolbar: function() {
-               return this.ownerCt.toolbar;
-       },
-       /*
-        * Get a reference to the editor iframe
-        */
-       getIframe: function() {
-               return this.ownerCt.iframe;
-       },
-       /*
         * Create span elements to display when the status bar tree or a message when the editor is in text mode
         */
        addComponents: function () {
-               this.statusBarWordCount = Ext.core.DomHelper.append(this.getEl(), {
+               this.statusBarWordCount = Ext.DomHelper.append(this.getEl(), {
                        id: this.editorId + '-statusBarWordCount',
                        tag: 'span',
                        cls: 'statusBarWordCount',
                        html: '&nbsp;'
                }, true);
-               this.statusBarTree = Ext.core.DomHelper.append(this.getEl(), {
+               this.statusBarTree = Ext.DomHelper.append(this.getEl(), {
                        id: this.editorId + '-statusBarTree',
                        tag: 'span',
                        cls: 'statusBarTree',
                        html: HTMLArea.localize('Path') + ': '
                }, true).setVisibilityMode(Ext.Element.DISPLAY).setVisible(true);
-               this.statusBarTextMode = Ext.core.DomHelper.append(this.getEl(), {
+               this.statusBarTextMode = Ext.DomHelper.append(this.getEl(), {
                        id: this.editorId + '-statusBarTextMode',
                        tag: 'span',
                        cls: 'statusBarTextMode',
@@ -1567,7 +1498,7 @@ Ext.define('HTMLArea.StatusBar', {
        clear: function () {
                this.statusBarTree.removeAllListeners();
                Ext.each(this.statusBarTree.query('a'), function (node) {
-                       Ext.tip.QuickTipManager.unregister(node);
+                       Ext.QuickTips.unregister(node);
                        Ext.get(node).dom.ancestor = null;
                        Ext.destroy(node);
                });
@@ -1589,7 +1520,7 @@ Ext.define('HTMLArea.StatusBar', {
                                classes = new Array(),
                                classText;
                        this.clear();
-                       var path = Ext.core.DomHelper.append(this.statusBarTree, {
+                       var path = Ext.DomHelper.append(this.statusBarTree, {
                                tag: 'span',
                                html: HTMLArea.localize('Path') + ': '
                        },true);
@@ -1618,22 +1549,22 @@ Ext.define('HTMLArea.StatusBar', {
                                        }
                                        text += classText;
                                }
-                               var element = Ext.core.DomHelper.insertAfter(path, {
+                               var element = Ext.DomHelper.insertAfter(path, {
                                        tag: 'a',
                                        href: '#',
-                                       'data-qtitle': HTMLArea.localize('statusBarStyle'),
-                                       'data-qtip': ancestor.style.cssText.split(';').join('<br />'),
+                                       'ext:qtitle': HTMLArea.localize('statusBarStyle'),
+                                       'ext:qtip': ancestor.style.cssText.split(';').join('<br />'),
                                        html: text
                                }, true);
-                                       // Ext.core.DomHelper does not honour the custom attribute
+                                       // Ext.DomHelper does not honour the custom attribute
                                element.dom.ancestor = ancestor;
                                element.on('click', this.onClick, this);
                                element.on('mousedown', this.onClick, this);
                                if (!Ext.isOpera) {
-                                       element.on('contextmenu', this.onContextMenu, this, {stopEvent: true});
+                                       element.on('contextmenu', this.onContextMenu, this);
                                }
                                if (index) {
-                                       Ext.core.DomHelper.insertAfter(element, {
+                                       Ext.DomHelper.insertAfter(element, {
                                                tag: 'span',
                                                html: String.fromCharCode(0xbb)
                                        });
@@ -1757,20 +1688,19 @@ Ext.define('HTMLArea.StatusBar', {
                return true;
        }
 });
-
+Ext.reg('htmlareastatusbar', HTMLArea.StatusBar);
 /*
- * HTMLArea.Framework extends Ext.panel.Panel
+ * HTMLArea.Framework extends Ext.Panel
  */
-Ext.define('HTMLArea.Framework', {
-       extend: 'Ext.panel.Panel',
+HTMLArea.Framework = Ext.extend(Ext.Panel, {
        /*
-        * Initialize component
+        * Constructor
         */
        initComponent: function () {
-               this.callParent(arguments);
+               HTMLArea.Framework.superclass.initComponent.call(this);
                        // Set some references
-               this.toolbar = this.getDockedComponent('toolbar');
-               this.statusBar = this.getDockedComponent('statusbar');
+               this.toolbar = this.getTopToolbar();
+               this.statusBar = this.getBottomToolbar();
                this.iframe = this.getComponent('iframe');
                this.textAreaContainer = this.getComponent('textAreaContainer');
                this.addEvents(
@@ -1802,10 +1732,12 @@ Ext.define('HTMLArea.Framework', {
         * Initiate events monitoring
         */
        initEventListeners: function () {
+                       // Make the framework resizable, if configured by the user
+               this.makeResizable();
                        // Monitor textArea container becoming shown or hidden as it may change the height of the status bar
-               this.mon(this.textAreaContainer, 'show', this.resizable ? this.onResize : this.onWindowResize, this);
+               this.mon(this.textAreaContainer, 'show', this.resizable ? this.onTextAreaShow : this.onWindowResize, this);
                        // Monitor iframe becoming shown or hidden as it may change the height of the status bar
-               this.mon(this.iframe, 'show', this.resizable ? this.onResize : this.onWindowResize, this);
+               this.mon(this.iframe, 'show', this.resizable ? this.onIframeShow : this.onWindowResize, this);
                        // Monitor window resizing
                Ext.EventManager.onWindowResize(this.onWindowResize, this);
                        // If the textarea is inside a form, on reset, re-initialize the HTMLArea content and update the toolbar
@@ -1821,7 +1753,7 @@ Ext.define('HTMLArea.Framework', {
                }
                this.addListener({
                        resize: {
-                               fn: this.onResize
+                               fn: this.onFrameworkResize
                        }
                });
        },
@@ -1855,6 +1787,11 @@ Ext.define('HTMLArea.Framework', {
         */
        nestedParentElements: {},
        /*
+        * Whether the framework should be made resizable
+        * May be set in config
+        */
+       resizable: false,
+       /*
         * Maximum height to which the framework may resized (in pixels)
         * May be set in config
         */
@@ -1873,7 +1810,7 @@ Ext.define('HTMLArea.Framework', {
         */
        doLayout: function () {
                if (!this.isNested || HTMLArea.util.TYPO3.allElementsAreDisplayed(this.nestedParentElements.sorted)) {
-                       this.callParent(arguments);
+                       HTMLArea.Framework.superclass.doLayout.call(this);
                } else {
                                // Clone the array of nested tabs and inline levels instead of using a reference as HTMLArea.util.TYPO3.accessParentElements will modify the array
                        var parentElements = [].concat(this.nestedParentElements.sorted);
@@ -1886,15 +1823,39 @@ Ext.define('HTMLArea.Framework', {
         */
        onLayout: function () {
                if (!this.isNested || HTMLArea.util.TYPO3.allElementsAreDisplayed(this.nestedParentElements.sorted)) {
-                       this.callParent(arguments);
+                       HTMLArea.Framework.superclass.onLayout.call(this);
                } else {
                                // Clone the array of nested tabs and inline levels instead of using a reference as HTMLArea.util.TYPO3.accessParentElements will modify the array
                        var parentElements = [].concat(this.nestedParentElements.sorted);
                                // Walk through all nested tabs and inline levels to get correct sizes
-                       HTMLArea.util.TYPO3.accessParentElements(parentElements, 'HTMLArea.Framework.superclass.onLayout.call(args[0])', [this]);
+                               HTMLArea.util.TYPO3.accessParentElements(parentElements, 'HTMLArea.Framework.superclass.onLayout.call(args[0])', [this]);
                }
        },
        /*
+        * Make the framework resizable, if configured
+        */
+       makeResizable: function () {
+               if (this.resizable) {
+                       this.addClass('resizable');
+                       this.resizer = new Ext.Resizable(this.getEl(), {
+                               minWidth: 300,
+                               maxHeight: this.maxHeight,
+                               dynamic: false
+                       });
+                       this.resizer.on('resize', this.onHtmlAreaResize, this);
+               }
+       },
+       /*
+        * Resize the framework when the resizer handles are used
+        */
+       onHtmlAreaResize: function (resizer, width, height, event) {
+                       // Set width first as it may change the height of the toolbar and of the statusBar
+               this.setWidth(width);
+                       // Set height of iframe and textarea
+               this.iframe.setHeight(this.getInnerHeight());
+               this.textArea.setSize(this.getInnerWidth(), this.getInnerHeight());
+       },
+       /*
         * Size the iframe according to initial textarea size as set by Page and User TSConfig
         */
        onWindowResize: function (width, height) {
@@ -1914,15 +1875,15 @@ Ext.define('HTMLArea.Framework', {
                var frameworkHeight = parseInt(this.textAreaInitialSize.height);
                if (this.textAreaInitialSize.width.indexOf('%') === -1) {
                                // Width is specified in pixels
-                       var frameworkWidth = parseInt(this.textAreaInitialSize.width);
+                       var frameworkWidth = parseInt(this.textAreaInitialSize.width) - this.getFrameWidth();
                } else {
                                // Width is specified in %
                        if (Ext.isNumber(width)) {
                                        // Framework sizing on actual window resize
-                               var frameworkWidth = parseInt(((width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollbarSize().width) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
+                               var frameworkWidth = parseInt(((width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollBarWidth()) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
                        } else {
                                        // Initial framework sizing
-                               var frameworkWidth = parseInt(((HTMLArea.util.TYPO3.getWindowSize().width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollbarSize().width) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
+                               var frameworkWidth = parseInt(((HTMLArea.util.TYPO3.getWindowSize().width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollBarWidth()) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
                        }
                }
                if (this.resizable) {
@@ -1935,25 +1896,33 @@ Ext.define('HTMLArea.Framework', {
        /*
         * Resize the framework components
         */
-       onResize: function () {
+       onFrameworkResize: function () {
+               this.iframe.setSize(this.getInnerWidth(), this.getInnerHeight());
+               this.textArea.setSize(this.getInnerWidth(), this.getInnerHeight());
+       },
+       /*
+        * Adjust the height to the changing size of the statusbar when the textarea is shown
+        */
+       onTextAreaShow: function () {
+               this.iframe.setHeight(this.getInnerHeight());
+               this.textArea.setHeight(this.getInnerHeight());
+       },
+       /*
+        * Adjust the height to the changing size of the statusbar when the iframe is shown
+        */
+       onIframeShow: function () {
                if (this.getInnerHeight() <= 0) {
                        this.onWindowResize();
                } else {
-                       this.iframe.setSize(this.getInnerWidth() - 3, this.getInnerHeight() - 3);
-                       this.textArea.setSize(this.getInnerWidth(), this.getInnerHeight());
+                       this.iframe.setHeight(this.getInnerHeight());
+                       this.textArea.setHeight(this.getInnerHeight());
                }
        },
        /*
         * Calculate the height available for the editing iframe
         */
        getInnerHeight: function () {
-               return this.getSize().height - this.toolbar.getHeight() - this.statusBar.getHeight();
-       },
-       /*
-        * Calculate the width available for the editing iframe
-        */
-       getInnerWidth: function () {
-               return this.getSize().width - this.frameSize.right - this.frameSize.left;
+               return this.getSize().height - this.toolbar.getHeight() - this.statusBar.getHeight() -  5;
        },
        /*
         * Fire the editor when all components of the framework are rendered and ready
@@ -1970,7 +1939,7 @@ Ext.define('HTMLArea.Framework', {
                        this.onWindowResize();
                        this.fireEvent('HTMLAreaEventFrameworkReady');
                } else {
-                       Ext.Function.defer(this.onIframeReady, 50, this);
+                       this.onIframeReady.defer(50, this);
                }
        },
        /*
@@ -2011,17 +1980,16 @@ Ext.define('HTMLArea.Framework', {
                return true;
        }
 });
-
+Ext.reg('htmlareaframework', HTMLArea.Framework);
 /***************************************************
  *  HTMLArea.Editor extends Ext.util.Observable
  ***************************************************/
-Ext.define('HTMLArea.Editor', {
-       extend: 'Ext.util.Observable',
+HTMLArea.Editor = Ext.extend(Ext.util.Observable, {
        /*
         * HTMLArea.Editor constructor
         */
        constructor: function (config) {
-               this.callParent([{}]);
+               HTMLArea.Editor.superclass.constructor.call(this, {});
                        // Save the config
                this.config = config;
                        // Establish references to this editor
@@ -2065,7 +2033,7 @@ Ext.define('HTMLArea.Editor', {
                        }
                }, this);
                        // Create Ajax object
-               this.ajax = Ext.create('HTMLArea.Ajax', {
+               this.ajax = new HTMLArea.Ajax({
                        editor: this
                });
                        // Initialize keyboard input inhibit flag
@@ -2082,7 +2050,6 @@ Ext.define('HTMLArea.Editor', {
                         */
                        'HTMLAreaEventModeChange'
                );
-               return this;
        },
        /*
         * Flag set to true when the editor initialization has completed
@@ -2097,42 +2064,27 @@ Ext.define('HTMLArea.Editor', {
         */
        generate: function () {
                        // Create the editor framework
-               this.htmlArea = Ext.create('HTMLArea.Framework', {
+               this.htmlArea = new HTMLArea.Framework({
                        id: this.editorId + '-htmlArea',
-                       layout: 'auto',
-                       renderTo: this.textArea.parent(),
-                       cls: 'htmlarea',
-                       frame: true,
+                       layout: 'anchor',
+                       baseCls: 'htmlarea',
                        editorId: this.editorId,
                        textArea: this.textArea,
                        textAreaInitialSize: this.textAreaInitialSize,
                        fullScreen: this.config.fullScreen,
                        resizable: this.config.resizable,
-                       minWidth: 300,
                        maxHeight: this.config.maxHeight,
                        isNested: this.isNested,
                        nestedParentElements: this.nestedParentElements,
-                       dockedItems: [{
-                                               // The toolbar
-                                       xtype: 'htmlareatoolbar',
-                                       dock: 'top',
-                                       itemId: 'toolbar',
-                                       id: this.editorId + '-toolbar',
-                                       anchor: '100%',
-                                       layout: 'anchor',
-                                       cls: 'toolbar',
-                                       editorId: this.editorId
-                               },{
-                                                       // The status bar
-                                       xtype: 'htmlareastatusbar',
-                                       dock: 'bottom',
-                                       itemId: 'statusbar',
-                                       id: this.editorId + '-statusbar',
-                                       anchor: '100%',
-                                       cls: 'statusBar',
-                                       editorId: this.editorId
-                               }
-                       ],
+                               // The toolbar
+                       tbar: {
+                               xtype: 'htmlareatoolbar',
+                               id: this.editorId + '-toolbar',
+                               anchor: '100%',
+                               layout: 'form',
+                               cls: 'toolbar',
+                               editorId: this.editorId
+                       },
                        items: [{
                                                // The iframe
                                        xtype: 'htmlareaiframe',
@@ -2150,8 +2102,8 @@ Ext.define('HTMLArea.Editor', {
                                        nestedParentElements: this.nestedParentElements,
                                        editorId: this.editorId
                                },{
-                                               // Container for the textarea
-                                       xtype: 'component',
+                                               // Box container for the textarea
+                                       xtype: 'box',
                                        itemId: 'textAreaContainer',
                                        anchor: '100%',
                                        width: (this.textAreaInitialSize.width.indexOf('%') === -1) ? parseInt(this.textAreaInitialSize.width) : 300,
@@ -2175,11 +2127,18 @@ Ext.define('HTMLArea.Editor', {
                                                }
                                        }
                                }
-                       ]
+                       ],
+                               // The status bar
+                       bbar: {
+                               xtype: 'htmlareastatusbar',
+                               anchor: '100%',
+                               cls: 'statusBar',
+                               editorId: this.editorId
+                       }
                });
                        // Set some references
-               this.toolbar = this.htmlArea.getDockedComponent('toolbar');
-               this.statusBar = this.htmlArea.getDockedComponent('statusbar');
+               this.toolbar = this.htmlArea.getTopToolbar();
+               this.statusBar = this.htmlArea.getBottomToolbar();
                this.iframe = this.htmlArea.getComponent('iframe');
                this.textAreaContainer = this.htmlArea.getComponent('textAreaContainer');
                        // Get triggered when the framework becomes ready
@@ -2326,7 +2285,7 @@ Ext.define('HTMLArea.Editor', {
                var plugin = HTMLArea[pluginName],
                        isRegistered = false;
                if (typeof(plugin) !== 'undefined' && Ext.isFunction(plugin)) {
-                       var pluginInstance = Ext.create(plugin, this, pluginName);
+                       var pluginInstance = new plugin(this, pluginName);
                        if (pluginInstance) {
                                var pluginInformation = pluginInstance.getPluginInformation();
                                pluginInformation.instance = pluginInstance;
@@ -2384,6 +2343,9 @@ Ext.define('HTMLArea.Editor', {
         * Add listeners
         */
        initEventsListening: function () {
+               if (Ext.isOpera) {
+                       this.iframe.startListening();
+               }
                        // Add unload handler
                var iframe = this.iframe.getEl().dom;
                Ext.EventManager.on(iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument, 'unload', this.onUnload, this, {single: true});
@@ -2418,13 +2380,13 @@ Ext.define('HTMLArea.Editor', {
                        }, false);
                }
                        // Cleanup
-               Ext.TaskManager.stopAll();
+               Ext.TaskMgr.stopAll();
                        // ExtJS is not releasing any resources when the iframe is unloaded
                this.htmlArea.destroy();
                Ext.iterate(this.plugins, function (pluginId) {
                        this.unRegisterPlugin(pluginId);
                }, this);
-               this.clearListeners();
+               this.purgeListeners();
                        // Cleaning references to DOM in order to avoid IE memory leaks
                if (this.wizards) {
                        this.wizards.dom = null;
@@ -2435,14 +2397,10 @@ Ext.define('HTMLArea.Editor', {
                RTEarea[this.editorId].editor = null;
        }
 });
-HTMLArea.Ajax = Ext.define('HTMLArea.Ajax', {
-       /*
-        * Constructor
-        */
-       constructor: function (config) {
-               this.initConfig(config);
-               return this;
-       },
+HTMLArea.Ajax = function (config) {
+       Ext.apply(this, config);
+};
+HTMLArea.Ajax = Ext.extend(HTMLArea.Ajax, {
        /*
         * Load a Javascript file asynchronously
         *
@@ -3445,25 +3403,21 @@ HTMLArea.DOM.Walker = Ext.extend(HTMLArea.DOM.Walker, {
 /***************************************************
  *  HTMLArea.CSS.Parser: CSS Parser
  ***************************************************/
-Ext.define('HTMLArea.CSS.Parser', {
-       extend: 'Ext.util.Observable',
-       /*
-        * Default config
-        */
-       config: {
-               parseAttemptsMaximumNumber: 20,
-               prefixLabelWithClassName: false,
-               postfixLabelWithClassName: false,
-               showTagFreeClasses: false,
-               tags: null,
-               editor: null
-       },
+HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
        /*
         * HTMLArea.CSS.Parser constructor
         */
        constructor: function (config) {
-               this.callParent([{}]);
-               this.initConfig(config);
+               HTMLArea.CSS.Parser.superclass.constructor.call(this, {});
+               var configDefaults = {
+                       parseAttemptsMaximumNumber: 20,
+                       prefixLabelWithClassName: false,
+                       postfixLabelWithClassName: false,
+                       showTagFreeClasses: false,
+                       tags: null,
+                       editor: null
+               };
+               Ext.apply(this, config, configDefaults);
                if (this.editor.config.styleSheetsMaximumAttempts) {
                        this.parseAttemptsMaximumNumber = this.editor.config.styleSheetsMaximumAttempts;
                }
@@ -3474,7 +3428,6 @@ Ext.define('HTMLArea.CSS.Parser', {
                         */
                        'HTMLAreaEventCssParsingComplete'
                );
-               return this;
        },
        /*
         * The parsed classes
@@ -3545,7 +3498,7 @@ Ext.define('HTMLArea.CSS.Parser', {
                                        this.fireEvent('HTMLAreaEventCssParsingComplete');
                                } else if (this.parseAttemptsCounter < this.parseAttemptsMaximumNumber) {
                                        this.parseAttemptsCounter++;
-                                       this.attemptTimeout = Ext.Function.defer(this.parse, 200, this);
+                                       this.attemptTimeout = this.parse.defer(200, this);
                                } else {
                                        this.editor.appendToLog('HTMLArea.CSS.Parser', 'parse', 'The stylesheets could not be parsed. Reported error: ' + this.error, 'error');
                                        this.fireEvent('HTMLAreaEventCssParsingComplete');
@@ -3793,7 +3746,7 @@ Ext.define('HTMLArea.CSS.Parser', {
  *  TIPS ON FORM FIELDS AND MENU ITEMS
  ***************************************************/
 /*
- * Intercept Ext.form.field.Field.afterRender in order to provide tips on form fields
+ * Intercept Ext.form.Field.afterRender in order to provide tips on form fields and menu items
  * Adapted from: http://www.extjs.com/forum/showthread.php?t=36642
  */
 HTMLArea.util.Tips = function () {
@@ -3812,7 +3765,7 @@ HTMLArea.util.Tips = function () {
                                                style: 'vertical-align: middle; padding-right: 2px;'
                                        });
                                        if (this.helpDisplay == 'image' || this.helpDisplay == 'both'){
-                                               Ext.tip.QuickTipManager.register({
+                                               Ext.QuickTips.register({
                                                        target: helpImage,
                                                        title: this.helpTitle,
                                                        text: this.helpText
@@ -3820,17 +3773,27 @@ HTMLArea.util.Tips = function () {
                                        }
                                }
                                if (this.helpDisplay == 'field' || this.helpDisplay == 'both'){
-                                       Ext.tip.QuickTipManager.register({
+                                       Ext.QuickTips.register({
                                                target: this,
                                                title: this.helpTitle,
                                                text: this.helpText
                                        });
                                }
                        }
+               },
+               tipsOnMenuItems: function () {
+                       if (this.helpText || this.helpTitle) {
+                               Ext.QuickTips.register({
+                                       target: this,
+                                       title: this.helpTitle,
+                                       text: this.helpText
+                               });
+                       }
                }
        }
 }();
-Ext.form.field.Field.prototype.afterRender = Ext.Function.createInterceptor(Ext.form.field.Field.prototype.afterRender, HTMLArea.util.Tips.tipsOnFormFields);
+Ext.form.Field.prototype.afterRender = Ext.form.Field.prototype.afterRender.createInterceptor(HTMLArea.util.Tips.tipsOnFormFields);
+Ext.menu.BaseItem.prototype.afterRender = Ext.menu.BaseItem.prototype.afterRender.createInterceptor(HTMLArea.util.Tips.tipsOnMenuItems);
 /***************************************************
  *  COLOR WIDGETS AND UTILITIES
  ***************************************************/
@@ -3852,7 +3815,7 @@ HTMLArea.util.Color = function () {
                 * Returns hexadecimal color representation from a number or a rgb-style color.
                 */
                colorToHex: function(v) {
-                       if (!v && v !== 0) {
+                       if (!v) {
                                return '';
                        }
                        function hex(d) {
@@ -3878,68 +3841,60 @@ HTMLArea.util.Color = function () {
                                return v;
                        }
                        return null;
+               },
+               /*
+                * Select interceptor to ensure that the color exists in the palette before trying to select
+                */
+               checkIfColorInPalette: function (color) {
+                               // Do not continue if the new color is not in the palette
+                       if (this.el && !this.el.child('a.color-' + color)) {
+                                       // Remove any previous selection
+                               this.deSelect();
+                               return false;
+                       }
                }
        }
 }();
 /*
- * Intercept select method of Ext.picker.Color to ensure that the color exists in the palette before trying to select
+ * Intercept Ext.ColorPalette.prototype.select
  */
-Ext.picker.Color.prototype.select = Ext.Function.createInterceptor(Ext.picker.Color.prototype.select, function (color) {
-               // Do not continue if the new color is not in the palette
-       if (this.el && !this.el.down('a.color-' + color)) {
-                       // Remove any previous selection
-               this.deSelect();
-               return false;
-       }
-});
+Ext.ColorPalette.prototype.select = Ext.ColorPalette.prototype.select.createInterceptor(HTMLArea.util.Color.checkIfColorInPalette);
 /*
- * Add deSelect method to Ext.picker.Color
+ * Add deSelect method to Ext.ColorPalette
  */
-Ext.override(Ext.picker.Color, {
+Ext.override(Ext.ColorPalette, {
        deSelect: function () {
-               if (this.el && this.getValue()){
-                       this.el.down('a.color-' + this.getValue()).removeCls(this.selectedCls);
+               if (this.el && this.value){
+                       this.el.child('a.color-' + this.value).removeClass('x-color-palette-sel');
                        this.value = null;
                }
        }
 });
-Ext.define('HTMLArea.color.Menu', {
-       extend: 'Ext.menu.Menu',
-       alias: ['widget.htmlareacolormenu'],
+Ext.ux.menu.HTMLAreaColorMenu = Ext.extend(Ext.menu.Menu, {
        enableScrolling: false,
        hideOnClick: true,
-       cls: 'htmlarea-color-menu',
+       cls: 'x-color-menu',
        colorPaletteValue: '',
        customColorsValue: '',
-       layout: {
-               type: 'vbox',
-               align: 'center'
-       },
        plain: true,
        showSeparator: false,
        initComponent: function () {
                var paletteItems = [];
+               var width = 'auto';
                if (this.colorsConfiguration) {
                        paletteItems.push({
                                xtype: 'container',
-                               cls: 'htmlarea-custom-colors-container',
-                               layout: 'fit',
+                               layout: 'anchor',
                                width: 160,
+                               style: { float: 'right' },
                                items: {
-                                       xtype: 'colorpicker',
+                                       xtype: 'colorpalette',
                                        itemId: 'custom-colors',
                                        cls: 'htmlarea-custom-colors',
-                                       data: this.colorsConfiguration,
+                                       colors: this.colorsConfiguration,
                                        value: this.value,
                                        allowReselect: true,
-                                       listeners: {
-                                               afterrender: {
-                                                       fn: this.initRelay,
-                                                       scope: this,
-                                                       single: true
-                                               }
-                                       },
-                                       tpl: Ext.create('Ext.XTemplate',
+                                       tpl: new Ext.XTemplate(
                                                '<tpl for="."><a href="#" class="color-{1}" hidefocus="on"><em><span style="background:#{1}" unselectable="on">&#160;</span></em><span unselectable="on">{0}</span></a></tpl>'
                                        )
                                }
@@ -3948,52 +3903,54 @@ Ext.define('HTMLArea.color.Menu', {
                if (this.colors.length) {
                        paletteItems.push({
                                xtype: 'container',
-                               layout: 'fit',
+                               layout: 'anchor',
                                items: {
-                                       xtype: 'colorpicker',
+                                       xtype: 'colorpalette',
                                        itemId: 'color-palette',
                                        cls: 'color-palette',
                                        colors: this.colors,
                                        value: this.value,
-                                       allowReselect: true,
-                                       listeners: {
-                                               afterrender: {
-                                                       fn: this.initRelay,
-                                                       scope: this,
-                                                       single: true
-                                               }
-                                       }
+                                       allowReselect: true
                                }
                        });
                }
+               if (this.colorsConfiguration && this.colors.length) {
+                       width = 350;
+               }
                Ext.apply(this, {
+                       layout: 'menu',
+                       width: width,
                        items: paletteItems
                });
-               this.callParent(arguments);
+               Ext.ux.menu.HTMLAreaColorMenu.superclass.initComponent.call(this);
+               this.standardPalette = this.find('itemId', 'color-palette')[0];
+               this.customPalette = this.find('itemId', 'custom-colors')[0];
+               if (this.standardPalette) {
+                       this.standardPalette.purgeListeners();
+                       this.relayEvents(this.standardPalette, ['select']);
+               }
+               if (this.customPalette) {
+                       this.customPalette.purgeListeners();
+                       this.relayEvents(this.customPalette, ['select']);
+               }
                this.on('select', this.menuHide, this);
                if (this.handler){
                        this.on('select', this.handler, this.scope || this);
                }
        },
-       initRelay: function (colorPicker) {
-               this.relayEvents(colorPicker, ['select']);
-       },
        menuHide: function() {
                if (this.hideOnClick){
                        this.hide(true);
                }
        }
 });
-
+Ext.reg('htmlareacolormenu', Ext.ux.menu.HTMLAreaColorMenu);
 /*
- * Color picker trigger field
+ * Color palette trigger field
  * Based on http://www.extjs.com/forum/showthread.php?t=89312
  */
-Ext.define('HTMLArea.color.Field', {
-       extend: 'Ext.form.field.Trigger',
-       alias: ['widget.colorpalettefield'],
-
-       triggerCls: 'htmlarea-form-color-trigger',
+Ext.ux.form.ColorPaletteField = Ext.extend(Ext.form.TriggerField, {
+       triggerClass: 'x-form-color-trigger',
        defaultColors: [
                '000000', '222222', '444444', '666666', '999999', 'BBBBBB', 'DDDDDD', 'FFFFFF',
                '660000', '663300', '996633', '003300', '003399', '000066', '330066', '660066',
@@ -4011,7 +3968,7 @@ Ext.define('HTMLArea.color.Field', {
        colorizeTrigger: false,
        editable: true,
        initComponent: function () {
-               this.callParent(arguments);
+               Ext.ux.form.ColorPaletteField.superclass.initComponent.call(this);
                if (!this.colors) {
                        this.colors = this.defaultColors;
                }
@@ -4026,21 +3983,21 @@ Ext.define('HTMLArea.color.Field', {
        setValue: function (color) {
                if (color) {
                        if (this.colorizeFieldBackgroud) {
-                               this.inputEl.applyStyles('background: #' + color  + ';');
+                               this.el.applyStyles('background: #' + color  + ';');
                        }
                        if (this.colorizeFieldText) {
-                               this.inputEl.applyStyles('color: #' + this.rgbToHex(this.invert(this.hexToRgb(color)))  + ';');
+                               this.el.applyStyles('color: #' + this.rgbToHex(this.invert(this.hexToRgb(color)))  + ';');
                        }
                        if (this.colorizeTrigger) {
-                               this.triggerEl.applyStyles('background-color: #' + color  + ';');
+                               this.trigger.applyStyles('background-color: #' + color  + ';');
                        }
                }
-               return this.callParent(arguments);
+               return Ext.ux.form.ColorPaletteField.superclass.setValue.call(this, color);
        },
                // private
        onDestroy: function () {
                Ext.destroy(this.menu);
-               this.callParent(arguments);
+               Ext.ux.form.ColorPaletteField.superclass.onDestroy.call(this);
        },
                // private
        onTriggerClick: function () {
@@ -4048,7 +4005,7 @@ Ext.define('HTMLArea.color.Field', {
                        return;
                }
                if (this.menu == null) {
-                       this.menu = Ext.create('HTMLArea.color.Menu', {
+                       this.menu = new Ext.ux.menu.HTMLAreaColorMenu({
                                cls: 'htmlarea-color-menu',
                                hideOnClick: false,
                                colors: this.colors,
@@ -4102,7 +4059,7 @@ Ext.define('HTMLArea.color.Field', {
                return HCHARS.charAt( ( n - n % 16 ) / 16 ) + HCHARS.charAt( n % 16 );
        }
 });
-
+Ext.reg('colorpalettefield', Ext.ux.form.ColorPaletteField);
 /**
  * Internet Explorer returns an item having the _name_ equal to the given id, even if it's not having any id.
  * This way it can return a different form field even if it's not a textarea.  This works around the problem by
@@ -4138,10 +4095,10 @@ HTMLArea.initEditor = function(editorNumber) {
                        document.getElementById('pleasewait' + editorNumber).style.display = 'block';
                        document.getElementById('editorWrap' + editorNumber).style.visibility = 'hidden';
                        if (!HTMLArea.isReady) {
-                               Ext.Function.defer(HTMLArea.initEditor, 150, null, [editorNumber]);
+                               HTMLArea.initEditor.defer(150, null, [editorNumber]);
                        } else {
                                        // Create an editor for the textarea
-                               var editor = Ext.create('HTMLArea.Editor', Ext.apply(Ext.create('HTMLArea.Config', editorNumber), RTEarea[editorNumber]));
+                               var editor = new HTMLArea.Editor(Ext.apply(new HTMLArea.Config(editorNumber), RTEarea[editorNumber]));
                                editor.generate();
                                return false;
                        }
@@ -4157,15 +4114,21 @@ HTMLArea.initEditor = function(editorNumber) {
  * Every plugin should be a subclass of this class
  *
  */
-Ext.define('HTMLArea.Plugin', {
-       /*
-        * Reference to the editor instance
-        */
-       editor: null,
-       /*
-        * Name of the plugin
-        */
-       name: 'unknown',
+HTMLArea.Plugin = function (editor, pluginName) {
+};
+/**
+ ***********************************************
+ * THIS FUNCTION IS DEPRECATED AS OF TYPO3 4.6 *
+ ***********************************************
+ * Extends class HTMLArea.Plugin
+ *
+ * Defined for backward compatibility only
+ * Use Ext.extend(SubClassName, config) directly
+ */
+HTMLArea.Plugin.extend = function (config) {
+       return Ext.extend(HTMLArea.Plugin, config);
+};
+HTMLArea.Plugin = Ext.extend(HTMLArea.Plugin, {
        /**
         * HTMLArea.Plugin constructor
         *
@@ -4186,7 +4149,18 @@ Ext.define('HTMLArea.Plugin', {
                        this.I18N = new Object();
                }
                this.configurePlugin(editor);
-               return this;
+               /**
+                ***********************************************
+                * THIS FUNCTION IS DEPRECATED AS OF TYPO3 4.6 *
+                ***********************************************
+                * Extends class HTMLArea[pluginName]
+                *
+                * Defined for backward compatibility only
+                * Use Ext.extend(SubClassName, config) directly
+                */
+               HTMLArea[pluginName].extend = function (config) {
+                       return Ext.extend(HTMLArea[pluginName], config);
+               };
        },
        /**
         * Configures the plugin
@@ -4207,7 +4181,7 @@ Ext.define('HTMLArea.Plugin', {
         ***********************************************
         * THIS FUNCTION IS DEPRECATED AS OF TYPO3 4.6 *
         ***********************************************
-        * Invoke the base class constructor
+        * Invove the base class constructor
         *
         * Defined for backward compatibility only
         * Note: this.base will exclusively refer to the HTMLArea.Plugin class constructor
@@ -4246,7 +4220,7 @@ Ext.define('HTMLArea.Plugin', {
         *
         * @return      object          the plugin information object
         */
-       getPluginInformation: function() {
+       getPluginInformation : function() {
                return this.pluginInformation;
        },
 
@@ -4256,7 +4230,7 @@ Ext.define('HTMLArea.Plugin', {
         * @param       string          pluinName: the name of some plugin
         * @return      object          the plugin object or null
         */
-       getPluginInstance: function(pluginName) {
+       getPluginInstance : function(pluginName) {
                return this.editor.getPlugin(pluginName);
        },
 
@@ -4265,7 +4239,7 @@ Ext.define('HTMLArea.Plugin', {
         *
         * @return      string          editor mode
         */
-       getEditorMode: function() {
+       getEditorMode : function() {
                return this.editor.getMode();
        },
 
@@ -4276,7 +4250,7 @@ Ext.define('HTMLArea.Plugin', {
         *
         * @return      boolean         true if the button is enabled in the toolbar configuration
         */
-       isButtonInToolbar: function(buttonId) {
+       isButtonInToolbar : function(buttonId) {
                var index = -1;
                Ext.each(this.editorConfiguration.toolbar, function (row) {
                        Ext.each(row, function (group) {
@@ -4413,7 +4387,7 @@ Ext.define('HTMLArea.Plugin', {
         *
         * @return      object          the drop-down configuration object
         */
-       getDropDownConfiguration: function(dropDownId) {
+       getDropDownConfiguration : function(dropDownId) {
                return this.editorConfiguration.buttonsConfig[dropDownId];
        },
 
@@ -4427,7 +4401,7 @@ Ext.define('HTMLArea.Plugin', {
         *
         * @return      boolean         true if the hotkey was successfully registered
         */
-       registerHotKey: function (hotKeyConfiguration) {
+       registerHotKey : function (hotKeyConfiguration) {
                return this.editorConfiguration.registerHotKey(hotKeyConfiguration);
        },
 
@@ -4438,7 +4412,7 @@ Ext.define('HTMLArea.Plugin', {
         *
         * @return      string          the buttonId or ""
         */
-       translateHotKey: function(key) {
+       translateHotKey : function(key) {
                if (typeof(this.editorConfiguration.hotKeyList[key]) !== "undefined") {
                        var buttonId = this.editorConfiguration.hotKeyList[key].cmd;
                        if (typeof(buttonId) !== "undefined") {
@@ -4466,7 +4440,7 @@ Ext.define('HTMLArea.Plugin', {
        },
        /**
         * Initializes the plugin
-        * Is invoked when the toolbar component is created (subclass of HTMLArea.toolbar.Button or HTMLArea.toolbar.ComboBox)
+        * Is invoked when the toolbar component is created (subclass of Ext.ux.HTMLAreaButton or Ext.ux.form.HTMLAreaCombo)
         *
         * @param       object          button: the component
         *
@@ -4571,17 +4545,21 @@ Ext.define('HTMLArea.Plugin', {
         * @ return     void
         */
        openContainerWindow: function (buttonId, title, dimensions, url) {
-               this.dialog = Ext.create('Ext.window.Window', {
-                       border: false,
-                       cls: 'htmlarea-window',
-                       height: dimensions.height,
-                       iconCls: this.getButton(buttonId).iconCls,
+               this.dialog = new Ext.Window({
                        id: this.editor.editorId + buttonId,
-                       layout: 'fit',
-                       resizable: true,
                        title: this.localize(title) || title,
+                       cls: 'htmlarea-window',
                        width: dimensions.width,
+                       border: false,
+                       resizable: true,
+                       iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
+                               afterrender: {
+                                       fn: this.onContainerResize
+                               },
+                               resize: {
+                                       fn: this.onContainerResize
+                               },
                                close: {
                                        fn: this.onClose,
                                        scope: this
@@ -4589,7 +4567,7 @@ Ext.define('HTMLArea.Plugin', {
                        },
                        items: {
                                        // The content iframe
-                               xtype: 'component',
+                               xtype: 'box',
                                height: dimensions.height-20,
                                itemId: 'content-iframe',
                                autoEl: {
@@ -4602,6 +4580,15 @@ Ext.define('HTMLArea.Plugin', {
                this.show();
        },
        /*
+        * Handler invoked when the container window is rendered or resized in order to resize the content iframe to maximum size
+        */
+       onContainerResize: function (panel) {
+               var iframe = panel.getComponent('content-iframe');
+               if (iframe.rendered) {
+                       iframe.getEl().setSize(panel.getInnerWidth(), panel.getInnerHeight());
+               }
+       },
+       /*
         * Get the opening diment=sions of the window
         *
         * @param       object          dimensions: default opening width and height set by the plugin
@@ -4669,11 +4656,18 @@ Ext.define('HTMLArea.Plugin', {
                }
        },
        /*
+        * Handler for Ext.TabPanel tabchange event
+        * Force window ghost height synchronization
+        * Working around ExtJS 3.1 bug
+        */
+       syncHeight: function (tabPanel, tab) {
+               var position = this.dialog.getPosition();
+               if (position[0] > 0) {
+                       this.dialog.setPosition(position);
+               }
+       },
+       /*
         * Show the dialogue window
-        *
-        * We cannot use autoShow on dialogue windows:
-        *      - we want to close the window if the editor changes mode
-        *      - we need to save and restore the selection for IE which looses it when focus leaves the iframe
         */
        show: function () {
                        // Close the window if the editor changes mode
index 50e4f3a..e45b28c 100644 (file)
 /*
  * About Plugin for TYPO3 htmlArea RTE
  */
-/*
- * Define data model for editor plugins data
- */
-Ext.define('HTMLArea.model.AboutEditor', {
-       extend: 'Ext.data.Model',
-       fields: [{
-                       name: 'name',
-                       type: 'string'
-               },{
-                       name: 'developer',
-                       type: 'string'
-               },{
-                       name: 'sponsor',
-                       type: 'string'
-       }]
-});
-/*
- * Define AboutEditor plugin
- */
-Ext.define('HTMLArea.AboutEditor', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.AboutEditor = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -58,7 +38,7 @@ Ext.define('HTMLArea.AboutEditor', {
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : '3.0',
+                       version         : '2.1',
                        developer       : 'Stanislas Rolland',
                        developerUrl    : 'http://www.sjbr.ca/',
                        copyrightOwner  : 'Stanislas Rolland',
@@ -108,13 +88,7 @@ Ext.define('HTMLArea.AboutEditor', {
                this.openDialogue(
                        buttonId,
                        'About HTMLArea',
-                       this.getWindowDimensions(
-                               {
-                                       width: 480,
-                                       height: 350
-                               },
-                               buttonId
-                       ),
+                       this.getWindowDimensions({width:450, height:350}, buttonId),
                        this.buildTabItems()
                );
                return false;
@@ -130,13 +104,14 @@ Ext.define('HTMLArea.AboutEditor', {
         * @return      void
         */
        openDialogue: function (buttonId, title, dimensions, tabItems) {
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.localize(title),
                        cls: 'htmlarea-window',
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                close: {
@@ -151,6 +126,10 @@ Ext.define('HTMLArea.AboutEditor', {
                                        activate: {
                                                fn: this.resetFocus,
                                                scope: this
+                                       },
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
                                        }
                                },
                                items: tabItems
@@ -171,7 +150,7 @@ Ext.define('HTMLArea.AboutEditor', {
                        // About tab
                tabItems.push({
                        xtype: 'panel',
-                       bodyCls: 'htmlarea-about',
+                       cls: 'about',
                        title: this.localize('About'),
                        html: '<h1 id="version">htmlArea RTE ' +  RTEarea[0].version + '</h1>'
                                + '<p>' + this.localize('free_editor').replace('<', '&lt;').replace('>', '&gt;') + '</p>'
@@ -181,47 +160,44 @@ Ext.define('HTMLArea.AboutEditor', {
                                        + '<br />'
                                        + '&copy; 2002-2004 <a href="http://interactivetools.com" target="_blank">interactivetools.com, inc.</a><br />'
                                        + '&copy; 2003-2004 <a href="http://dynarch.com" target="_blank">dynarch.com LLC.</a><br />'
-                                       + '&copy; 2004-2011 <a href="http://www.sjbr.ca" target="_blank">Stanislas Rolland</a><br />'
+                                       + '&copy; 2004-2010 <a href="http://www.sjbr.ca" target="_blank">Stanislas Rolland</a><br />'
                                        + this.localize('All rights reserved.')
                                + '</p>'
                });
-                       // Create pluginInfo global store
-               var pluginInfoStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + 'pluginInfo');
-               if (!pluginInfoStore) {
-                       pluginInfoStore = Ext.create('Ext.data.ArrayStore', {
-                               model: 'HTMLArea.model.AboutEditor',
-                               sorters: [{
-                                           property: 'name',
-                                           direction: 'ASC'
-                               }],
-                               storeId: 'HTMLArea' + '-store-' + this.name + 'pluginInfo'
+                       // Plugins tab
+               if (!this.store) {
+                       this.store = new Ext.data.ArrayStore({
+                               fields: [{ name: 'name'}, { name: 'developer'},  { name: 'sponsor'}],
+                               sortInfo: {
+                                       field: 'name',
+                                       direction: 'ASC'
+                               },
+                               data: this.getPluginsInfo()
                        });
-                       pluginInfoStore.loadData(this.getPluginsInfo());
                }
                tabItems.push({
-                       xtype: 'grid',
-                       cls: 'htmlarea-about-plugins',
-                       height: 300,
+                       xtype: 'panel',
+                       cls: 'about-plugins',
+                       height: 200,
                        title: this.localize('Plugins'),
-                       store: pluginInfoStore,
                        autoScroll: true,
-                       columns: [{
+                       items: {
+                               xtype: 'listview',
+                               store: this.store,
+                               reserveScrollOffset: true,
+                               columns: [{
                                        header: this.localize('Name'),
                                        dataIndex: 'name',
-                                       hideable: false,
-                                       width: 150
+                                       width: .33
                                    },{
                                        header: this.localize('Developer'),
                                        dataIndex: 'developer',
-                                       hideable: false,
-                                       width: 150
+                                       width: .33
                                    },{
                                        header: this.localize('Sponsored by'),
-                                       dataIndex: 'sponsor',
-                                       hideable: false,
-                                       width: 150
-                                   }
-                       ]
+                                       dataIndex: 'sponsor'
+                               }]
+                       }
                });
                return tabItems;
        },
@@ -233,11 +209,11 @@ Ext.define('HTMLArea.AboutEditor', {
        getPluginsInfo: function () {
                var pluginsInfo = [];
                Ext.iterate(this.editor.plugins, function (pluginId, plugin) {
-                       pluginsInfo.push({
-                               name: plugin.name + ' ' + plugin.version,
-                               developer: '<a href="' + plugin.developerUrl + '" target="_blank">' + plugin.developer + '</a>',
-                               sponsor: '<a href="' + plugin.sponsorUrl + '" target="_blank">' + plugin.sponsor + '</a>'
-                       });
+                       pluginsInfo.push([
+                               plugin.name + ' ' + plugin.version,
+                               '<a href="' + plugin.developerUrl + '" target="_blank">' + plugin.developer + '</a>',
+                               '<a href="' + plugin.sponsorUrl + '" target="_blank">' + plugin.sponsor + '</a>'
+                       ]);
                }, this);
                return pluginsInfo;
        }
index ad6a129..1f27517 100644 (file)
 /*
  * Acronym plugin for htmlArea RTE
  */
-/*
- * Define data model for abbreviation data
- */
-Ext.define('HTMLArea.model.Abbreviation', {
-       extend: 'Ext.data.Model',
-       fields: [{
-                       name: 'term',
-                       type: 'string'
-               },{
-                       name: 'abbr',
-                       type: 'string'
-               },{
-                       name: 'language',
-                       type: 'string'
-       }]
-});
-/*
- * Define Acronym plugin
- */
-Ext.define('HTMLArea.Acronym', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.Acronym = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -57,7 +37,7 @@ Ext.define('HTMLArea.Acronym', {
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : '3.0',
+                       version         : '2.4',
                        developer       : 'Stanislas Rolland',
                        developerUrl    : 'http://www.sjbr.ca/',
                        copyrightOwner  : 'Stanislas Rolland',
@@ -86,15 +66,13 @@ Ext.define('HTMLArea.Acronym', {
         * Sets of default configuration values for dialogue form fields
         */
        configDefaults: {
-               combobox: {
-                       cls: 'htmlarea-combo',
+               combo: {
                        editable: true,
-                       forceSelection: true,
-                       queryMode: 'local',
                        selectOnFocus: true,
-                       triggerAction: 'all',
                        typeAhead: true,
-                       xtype: 'combobox'
+                       triggerAction: 'all',
+                       forceSelection: true,
+                       mode: 'local'
                }
        },
        /*
@@ -126,7 +104,7 @@ Ext.define('HTMLArea.Acronym', {
                };
                        // Open the dialogue window
                this.openDialogue(
-                       this.getButton(buttonId).tooltip.text,
+                       this.getButton(buttonId).tooltip.title,
                        buttonId,
                        this.getWindowDimensions({ width: 580}, buttonId),
                        this.buildTabItemsConfig(abbr),
@@ -148,13 +126,14 @@ Ext.define('HTMLArea.Acronym', {
         * @return      void
         */
        openDialogue: function (title, buttonId, dimensions, tabItems, buttonsConfig, activeTab) {
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.getHelpTip('', title),
                        cls: 'htmlarea-window',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                close: {
@@ -162,18 +141,24 @@ Ext.define('HTMLArea.Acronym', {
                                        scope: this
                                }
                        },
-                       items: [{
+                       items: {
                                xtype: 'tabpanel',
                                activeTab: activeTab ? activeTab : 0,
                                defaults: {
                                        xtype: 'container',
-                                       layout: 'anchor',
+                                       layout: 'form',
                                        defaults: {
                                                labelWidth: 150
                                        }
                                },
+                               listeners: {
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
+                                       }
+                               },
                                items: tabItems
-                       }],
+                       },
                        buttons: buttonsConfig
                });
                this.show();
@@ -245,132 +230,125 @@ Ext.define('HTMLArea.Acronym', {
         * @return      object          the fieldset configuration object
         */
        buildDefinedTermFieldsetConfig: function (element, type) {
-                       // Create global abbreviation store if it does not exist already
-               var abbreviationStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name);
-               if (!abbreviationStore) {
-                       this.abbreviationStore = Ext.create('Ext.data.Store', {
-                               autoLoad: true,
-                               model: 'HTMLArea.model.Abbreviation',
-                               proxy: {
-                                       type: 'ajax',
-                                       url: this.pageTSConfiguration.acronymUrl,
-                                       reader: {
-                                               type: 'json',
-                                               root: type
-                                       }
-                               },
-                               storeId: this.editorId + '-store-' + this.name
-                       });
-               }
                var itemsConfig = [];
-               itemsConfig.push(Ext.applyIf({
+               itemsConfig.push(Ext.apply({
+                       xtype: 'combo',
                        displayField: 'term',
+                       valueField: 'term',
                        fieldLabel: this.getHelpTip('unabridgedTerm', 'Unabridged_term'),
-                       listConfig: {
-                               cls: 'htmlarea-combo-list',
-                               getInnerTpl: function () {
-                                       return '<div data-qtip="{abbr}" class="htmlarea-combo-list-item">{term}</div>';
-                               },
-                       },
                        itemId: 'termSelector',
+                       tpl: '<tpl for="."><div ext:qtip="{abbr}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{term}</div></tpl>',
+                       store: new Ext.data.JsonStore({
+                               autoDestroy:  true,
+                               autoLoad: true,
+                               root: type,
+                               fields: [ { name: 'term'}, { name: 'abbr'},  { name: 'language'}],
+                               url: this.pageTSConfiguration.acronymUrl
+                       }),
+                       width: 350,
                        listeners: {
+                               beforerender: {
+                                       fn: function (combo) {
+                                                       // Ensure the store is loaded
+                                               combo.getStore().load({
+                                                       callback: function () { this.onSelectorRender(combo); },
+                                                       scope: this
+                                               });
+                                       },
+                                       scope: this
+                               },
                                select: {
                                        fn: this.onTermSelect,
                                        scope: this
                                }
-                       },
-                       store: this.abbreviationStore,
-                       valueField: 'term',
-                       width: 350
-               }, this.configDefaults['combobox']));
-               itemsConfig.push(Ext.applyIf({
+                       }
+               }, this.configDefaults['combo']));
+               itemsConfig.push(Ext.apply({
+                       xtype: 'combo',
                        displayField: 'abbr',
+                       valueField: 'abbr',
+                       tpl: '<tpl for="."><div ext:qtip="{language}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{abbr}</div></tpl>',
                        fieldLabel: this.getHelpTip('abridgedTerm', 'Abridged_term'),
-                       listConfig: {
-                               cls: 'htmlarea-combo-list',
-                               getInnerTpl: function () {
-                                       return '<div data-qtip="{language}" class="htmlarea-combo-list-item">{abbr}</div>';
-                               }
-                       },
                        itemId: 'abbrSelector',
+                       store: new Ext.data.JsonStore({
+                               autoDestroy:  true,
+                               autoLoad: true,
+                               root: type,
+                               fields: [ { name: 'term'}, { name: 'abbr'},  { name: 'language'}],
+                               url: this.pageTSConfiguration.acronymUrl
+                       }),
+                       width: 100,
                        listeners: {
+                               beforerender: {
+                                       fn: function (combo) {
+                                                       // Ensure the store is loaded
+                                               combo.getStore().load({
+                                                       callback: function () { this.onSelectorRender(combo); },
+                                                       scope: this
+                                               });
+                                       },
+                                       scope: this
+                               },
                                select: {
                                        fn: this.onAbbrSelect,
                                        scope: this
                                }
-                       },
-                       store: this.abbreviationStore,
-                       valueField: 'abbr',
-                       width: 200
-               }, this.configDefaults['combobox']));
-               var languagePlugin = this.getPluginInstance('Language');
-               if (this.getButton('Language') && languagePlugin) {
-                       var selectedLanguage = !Ext.isEmpty(element) ? languagePlugin.getLanguageAttribute(element) : 'none';
-                               // Create global language store if it does not exist already
-                       var languageStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + languagePlugin.name);
-                       if (!languageStore) {
-                               languageStore = Ext.create('Ext.data.Store', {
-                                       autoLoad: true,
-                                       model: 'HTMLArea.model.default',
-                                       proxy: {
-                                               type: 'ajax',
-                                               url: this.getDropDownConfiguration('Language').dataUrl,
-                                               reader: {
-                                                       type: 'json',
-                                                       root: 'options',
-                                               }
-                                       },
-                                       storeId: this.editorId + '-store-' + languagePlugin.name
-                               });
                        }
+               }, this.configDefaults['combo']));
+               var languageObject = this.getPluginInstance('Language');
+               if (this.getButton('Language')) {
+                       var selectedLanguage = !Ext.isEmpty(element) ? languageObject.getLanguageAttribute(element) : 'none';
+                       function initLanguageStore (store) {
+                               if (selectedLanguage !== 'none') {
+                                       store.removeAt(0);
+                                       store.insert(0, new store.recordType({
+                                               text: languageObject.localize('Remove language mark'),
+                                               value: 'none'
+                                       }));
+                               }
+                               this.getButton('Language').setValue('none');
+                       }
+                       var languageStore = new Ext.data.JsonStore({
+                               autoDestroy:  true,
+                               autoLoad: true,
+                               root: 'options',
+                               fields: [ { name: 'text'}, { name: 'value'} ],
+                               url: this.getDropDownConfiguration('Language').dataUrl,
+                               listeners: {
+                                       load: {
+                                               fn: initLanguageStore,
+                                               scope: this
+                                       }
+                               }
+                       });
                        itemsConfig.push(Ext.apply({
-                               displayField: 'text',
+                               xtype: 'combo',
                                fieldLabel: this.getHelpTip('language', 'Language'),
                                itemId: 'language',
-                               listConfig: {
-                                       cls: 'htmlarea-combo-list',
-                                       getInnerTpl: function () {
-                                               return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
-                                       }
-                               },
+                               valueField: 'value',
+                               displayField: 'text',
+                               tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>',
+                               store: languageStore,
+                               width: 200,
+                               value: selectedLanguage,
                                listeners: {
-                                       afterrender: {
+                                       render: {
                                                fn: function (combo) {
-                                                               // Somehow getStore method got lost...
-                                                       if (!Ext.isFunction(combo.getStore)) {
-                                                               combo.getStore = function () {
-                                                                       return combo.store;
-                                                               };
-                                                       }
-                                                       var store = combo.getStore();
-                                                       store.removeAt(0);
-                                                       if (selectedLanguage !== 'none') {
-                                                               store.insert(0, {
-                                                                       text: languagePlugin.localize('Remove language mark'),
-                                                                       value: 'none'
-                                                               });
-                                                       } else {
-                                                               store.insert(0, {
-                                                                       text: languagePlugin.localize('No language mark'),
-                                                                       value: 'none'
-                                                               });
-                                                       }
-                                                       combo.setValue(selectedLanguage);
-                                               },
-                                               scope: this
+                                                               // Load the language dropdown
+                                                       combo.getStore().load({
+                                                               callback: function () { combo.setValue(selectedLanguage); }
+                                                       });
+                                               }
                                        }
-                               },
-                               store: languageStore,
-                               valueField: 'value',
-                               width: 350
-                       }, this.configDefaults['combobox']));
+                               }
+                       }, this.configDefaults['combo']));
                }
                return {
                        xtype: 'fieldset',
                        title: this.getHelpTip('preDefined' + ((type == 'abbr') ? 'Abbreviation' : 'Acronym'), 'Defined_' + type),
                        items: itemsConfig,
                        listeners: {
-                               afterrender: {
+                               render: {
                                        fn: this.onDefinedTermFieldsetRender,
                                        scope: this
                                }
@@ -379,34 +357,15 @@ Ext.define('HTMLArea.Acronym', {
        },
        /*
         * Handler on rendering the defined abbreviation fieldset
-        */
-       onDefinedTermFieldsetRender: function (fieldset) {
-                       // Make sure the store is loaded
-               if (!this.abbreviationStore.getCount()) {
-                       this.abbreviationStore.load({
-                               callback: function (records) {
-                                       this.abbreviationStore.savedSnapshot = this.abbreviationStore.data.clone();
-                                       this.initializeFieldset(fieldset);
-                               },
-                               scope: this
-                       });
-               } else {
-                               // Refresh the store
-                       this.abbreviationStore.snapshot = this.abbreviationStore.savedSnapshot.clone();
-                       this.initializeFieldset(fieldset);
-               }
-       },
-       /*
-        * Initialize fieldset
         * If an abbr is selected but no term is selected, select any corresponding term with the correct language value, if any
         */
-       initializeFieldset: function (fieldset) {
-               var termSelector = fieldset.getComponent('termSelector');
+       onDefinedTermFieldsetRender: function (fieldset) {
+               var termSelector = fieldset.find('itemId', 'termSelector')[0];
                var term = termSelector.getValue();
-               var abbrSelector = fieldset.getComponent('abbrSelector');
+               var abbrSelector = fieldset.find('itemId', 'abbrSelector')[0];
                var abbr = abbrSelector.getValue();
                var language = '';
-               var languageSelector = fieldset.down('combobox[itemId=language]');
+               var languageSelector = fieldset.find('itemId', 'language')[0];
                if (languageSelector) {
                        var language = languageSelector.getValue();
                        if (language == 'none') {
@@ -421,34 +380,23 @@ Ext.define('HTMLArea.Acronym', {
                        if (index !== -1) {
                                term = abbrStore.getAt(index).get('term');
                                termSelector.setValue(term);
-                               fieldset.ownerCt.down('component[itemId=useTerm]').setValue(term);
+                               fieldset.ownerCt.find('itemId', 'useTerm')[0].setValue(term);
                        }
                }
-                       // Filter the abbreviation store
-               this.abbreviationStore.filterBy(function (record) {
-                       return !this.params.text
-                               || !this.params.title
-                               || this.params.text == record.get('term')
-                               || this.params.text == record.get('abbr')
-                               || this.params.title == record.get('term')
-                               || this.params.title == record.get('abbr');
-               }, this);
-                       // Make sure the combo lists are filtered
-               this.abbreviationStore.snapshot = this.abbreviationStore.data;
-               if (this.abbreviationStore.getCount()) {
-                               // Initialize combos
-                       this.initializeCombo(termSelector);
-                       this.initializeCombo(abbrSelector);
-               } else {
-                       fieldset.hide();
-               }
        },
        /*
+        * Filter the term and abbr selector lists
         * Set initial values
         * If there is already an abbr and the filtered list has only one or no element, hide the fieldset
         */
-       initializeCombo: function (combo) {
-               var store = this.abbreviationStore;
+       onSelectorRender: function (combo) {
+               var store = combo.getStore();
+               store.filterBy(function (record) {
+                       return !this.params.text || !this.params.title || this.params.text == record.get('term') || this.params.title == record.get('term') || this.params.title == record.get('abbr');
+               }, this);
+                       // Make sure the combo list is filtered
+               store.snapshot = store.data;
+               var store = combo.getStore();
                        // Initialize the term and abbr combos
                if (combo.getItemId() == 'termSelector') {
                        if (this.params.title) {
@@ -456,14 +404,14 @@ Ext.define('HTMLArea.Acronym', {
                                if (index !== -1) {
                                        var record = store.getAt(index);
                                        combo.setValue(record.get('term'));
-                                       this.onTermSelect(combo, [record], false);
+                                       this.onTermSelect(combo, record, index);
                                }
                        } else if (this.params.text) {
                                var index = store.findExact('term', this.params.text);
                                if (index !== -1) {
                                        var record = store.getAt(index);
                                        combo.setValue(record.get('term'));
-                                       this.onTermSelect(combo, [record], false);
+                                       this.onTermSelect(combo, record, index);
                                }
                        }
                } else if (combo.getItemId() == 'abbrSelector' && this.params.text) {
@@ -471,52 +419,56 @@ Ext.define('HTMLArea.Acronym', {
                        if (index !== -1) {
                                var record = store.getAt(index);
                                combo.setValue(record.get('abbr'));
-                               this.onAbbrSelect(combo, [record], false);
+                               this.onAbbrSelect(combo, record, index);
                        }
                }
        },
        /*
         * Handler when a term is selected
         */
-       onTermSelect: function (combo, records, options) {
-               var record = records[0];
+       onTermSelect: function (combo, record, index) {
                var fieldset = combo.findParentByType('fieldset');
                var tab = fieldset.findParentByType('container');
                var term = record.get('term');
                var abbr = record.get('abbr');
                var language = record.get('language');
                        // Update the abbreviation selector
-               tab.down('component[itemId=abbrSelector]').setValue(abbr);
+               var abbrSelector = tab.find('itemId', 'abbrSelector')[0];
+               abbrSelector.setValue(abbr);
                        // Update the language selector
-               var languageSelector = tab.down('combobox[itemId=language]');
-               if (!Ext.isEmpty(languageSelector) && !Ext.isBoolean(options)) {
-                       languageSelector.setValue(language ? language : 'none');
+               var languageSelector = tab.find('itemId', 'language');
+               if (!Ext.isEmpty(languageSelector)) {
+                       if (language) {
+                               languageSelector[0].setValue(language);
+                       } else {
+                               languageSelector[0].setValue('none');
+                       }
                }
                        // Update the term to use
-               if (!Ext.isBoolean(options)) {
-                       tab.down('component[itemId=useTerm]').setValue(term);
-               }
+               tab.find('itemId', 'useTerm')[0].setValue(term);
        },
        /*
         * Handler when an abbreviation or acronym is selected
         */
-       onAbbrSelect: function (combo, records, options) {
-               var record = records[0];
+       onAbbrSelect: function (combo, record, index) {
                var fieldset = combo.findParentByType('fieldset');
                var tab = fieldset.findParentByType('container');
                var term = record.get('term');
                var language = record.get('language');
                        // Update the term selector
-               tab.down('component[itemId=termSelector]').setValue(term);
+               var termSelector = tab.find('itemId', 'termSelector')[0];
+               termSelector.setValue(term);
                        // Update the language selector
-               var languageSelector = tab.down('combobox[itemId=language]');
-               if (!Ext.isEmpty(languageSelector) && !Ext.isBoolean(options)) {
-                       languageSelector.setValue(language ? language : 'none');
+               var languageSelector = tab.find('itemId', 'language');
+               if (!Ext.isEmpty(languageSelector)) {
+                       if (language) {
+                               languageSelector[0].setValue(language);
+                       } else {
+                               languageSelector[0].setValue('none');
+                       }
                }
                        // Update the term to use
-               if (!Ext.isBoolean(options)) {
-                       tab.down('component[itemId=useTerm]').setValue(term);
-               }
+               tab.find('itemId', 'useTerm')[0].setValue(term);
        },
        /*
         * This function builds the configuration object for the Abbreviation or Acronym to use fieldset
@@ -546,16 +498,16 @@ Ext.define('HTMLArea.Acronym', {
         */
        okHandler: function (button, event) {
                this.restoreSelection();
-               var tab = this.dialog.down('tabpanel').getActiveTab();
+               var tab = this.dialog.findByType('tabpanel')[0].getActiveTab();
                var type = tab.getItemId();
-               var languageSelector = tab.down('component[itemId=language]');
-               var language = !Ext.isEmpty(languageSelector) ? languageSelector.getValue() : '';
-               var term = tab.down('component[itemId=termSelector]').getValue();
+               var languageSelector = tab.find('itemId', 'language');
+               var language = !Ext.isEmpty(languageSelector) ? languageSelector[0].getValue() : '';
+               var term = tab.find('itemId', 'termSelector')[0].getValue();
                if (!this.params.abbr) {
                        var abbr = this.editor.document.createElement(type);
-                       abbr.title = tab.down('component[itemId=useTerm]').getValue();
+                       abbr.title = tab.find('itemId', 'useTerm')[0].getValue();
                        if (term == abbr.title) {
-                               abbr.innerHTML = tab.down('component[itemId=abbrSelector]').getValue();
+                               abbr.innerHTML = tab.find('itemId', 'abbrSelector')[0].getValue();
                        } else {
                                abbr.innerHTML = this.params.text;
                        }
@@ -565,12 +517,12 @@ Ext.define('HTMLArea.Acronym', {
                        this.editor.insertNodeAtSelection(abbr);
                } else {
                        var abbr = this.params.abbr;
-                       abbr.title = tab.down('component[itemId=useTerm]').getValue();
+                       abbr.title = tab.find('itemId', 'useTerm')[0].getValue();
                        if (language) {
                                this.getPluginInstance('Language').setLanguageAttributes(abbr, language);
                        }
                        if (term == abbr.title) {
-                               abbr.innerHTML = tab.down('component[itemId=abbrSelector]').getValue();
+                               abbr.innerHTML = tab.find('itemId', 'abbrSelector')[0].getValue();
                        }
                }
                this.close();
@@ -599,7 +551,7 @@ Ext.define('HTMLArea.Acronym', {
                                button.setInactive(!(el.nodeName.toLowerCase() == 'acronym' && !this.pageTSConfiguration.noAcronym) && !(el.nodeName.toLowerCase() == 'abbr' && !this.pageTSConfiguration.noAbbr));
                        }
                        button.setTooltip({
-                               text: this.localize((button.disabled || button.inactive) ? 'Insert abbreviation' : 'Edit abbreviation')
+                               title: this.localize((button.disabled || button.inactive) ? 'Insert abbreviation' : 'Edit abbreviation')
                        });
                        button.contextMenuTitle = '';
                        if (this.dialog) {
index b9b8780..38e0f40 100644 (file)
@@ -27,8 +27,7 @@
 /*
  * BlockElements Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.BlockElements', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.BlockElements = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -120,12 +119,11 @@ Ext.define('HTMLArea.BlockElements', {
                };
                if (this.buttonsConfiguration.formatblock) {
                        dropDownConfiguration.width = this.buttonsConfiguration.formatblock.width ? parseInt(this.buttonsConfiguration.formatblock.width, 10) : 200;
-                       dropDownConfiguration.listConfig = {};
                        if (this.buttonsConfiguration.formatblock.listWidth) {
-                               dropDownConfiguration.listConfig.width = parseInt(this.buttonsConfiguration.formatblock.listWidth, 10);
+                               dropDownConfiguration.listWidth = parseInt(this.buttonsConfiguration.formatblock.listWidth, 10);
                        }
                        if (this.buttonsConfiguration.formatblock.maxHeight) {
-                               dropDownConfiguration.listConfig.maxHeight = parseInt(this.buttonsConfiguration.formatblock.maxHeight, 10);
+                               dropDownConfiguration.maxHeight = parseInt(this.buttonsConfiguration.formatblock.maxHeight, 10);
                        }
                }
                this.registerDropDown(dropDownConfiguration);
@@ -1207,16 +1205,16 @@ Ext.define('HTMLArea.BlockElements', {
                        }
                }
                if (index == -1) {
-                       store.insert(0, {
+                       store.insert(0, new store.recordType({
                                text: this.localize('No block'),
                                value: 'none'
-                       });
+                       }));
                        select.setValue('none');
                } else {
-                       store.insert(0, {
+                       store.insert(0, new store.recordType({
                                text: this.localize('Remove block'),
                                value: 'none'
-                       });
+                       }));
                        select.setValue(store.getAt(index+1).get('value'));
                }
        },
index 3fc5d80..5fa0d4b 100644 (file)
 /*
  * Block Style Plugin for TYPO3 htmlArea RTE
  */
-/*
- * Define data model for blockstyle selector box
- */
-Ext.define('HTMLArea.model.BlockStyle', {
-       extend: 'Ext.data.Model',
-       fields: [{
-                       name: 'text',
-                       type: 'string'
-               },{
-                       name: 'value',
-                       type: 'string'
-               },{
-                       name: 'style',
-                       type: 'string'
-       }]
-});
-/*
- * Define BlockStyle plugin
- */
-Ext.define('HTMLArea.BlockStyle', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -125,28 +105,23 @@ Ext.define('HTMLArea.BlockStyle', {
                        fieldLabel = this.localize('Block style label');
                }
                var dropDownConfiguration = {
-                       action: 'onChange',
                        id: dropDownId,
                        tooltip: this.localize(dropDownId + '-Tooltip'),
                        fieldLabel: fieldLabel,
-                       options: [{
-                               text: this.localize('No style'),
-                               value: 'none',
-                               style: ''
-                       }],
-                       model: 'HTMLArea.model.BlockStyle',
-                       template: '<div data-qtip="{value}" style="{style}" class="htmlarea-combo-list-item">{text}</div>'
+                       options: [[this.localize('No style'), 'none']],
+                       action: 'onChange',
+                       storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
                };
                if (this.pageTSconfiguration) {
                        if (this.pageTSconfiguration.width) {
                                dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
                        }
-                       dropDownConfiguration.listConfig = {};
                        if (this.pageTSconfiguration.listWidth) {
-                               dropDownConfiguration.listConfig.width = parseInt(this.pageTSconfiguration.listWidth, 10);
+                               dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
                        }
                        if (this.pageTSconfiguration.maxHeight) {
-                               dropDownConfiguration.listConfig.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
+                               dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
                        }
                }
                this.registerDropDown(dropDownConfiguration);
@@ -234,7 +209,7 @@ Ext.define('HTMLArea.BlockStyle', {
                        // Monitor editor changing mode
                this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
                        // Create CSS Parser object
-               this.blockStyles = Ext.create('HTMLArea.CSS.Parser', {
+               this.blockStyles = new HTMLArea.CSS.Parser({
                        prefixLabelWithClassName: this.prefixLabelWithClassName,
                        postfixLabelWithClassName: this.postfixLabelWithClassName,
                        showTagFreeClasses: this.showTagFreeClasses,
@@ -309,10 +284,10 @@ Ext.define('HTMLArea.BlockStyle', {
        initializeDropDown: function (dropDown) {
                var store = dropDown.getStore();
                store.removeAll(false);
-               store.insert(0, {
+               store.insert(0, new store.recordType({
                        text: this.localize('No style'),
                        value: 'none'
-               });
+               }));
                dropDown.setValue('none');
        },
        /*
@@ -338,11 +313,11 @@ Ext.define('HTMLArea.BlockStyle', {
                                                style = HTMLArea.classesValues[RegExp.leftContext + '-'];
                                        }
                                }
-                               store.add({
+                               store.add(new store.recordType({
                                        text: value,
                                        value: cssClass,
                                        style: style
-                               });
+                               }));
                        }, this);
                }
        },
@@ -361,10 +336,10 @@ Ext.define('HTMLArea.BlockStyle', {
                                }
                        }
                        if (index == -1 && !noUnknown) {
-                               store.add({
+                               store.add(new store.recordType({
                                        text: this.localize('Unknown style'),
                                        value: classNames[classNames.length-1]
-                               });
+                               }));
                                index = store.getCount()-1;
                                dropDown.setValue(classNames[classNames.length-1]);
                                if (!defaultClass) {
index 2f15cec..3abf811 100644 (file)
@@ -31,8 +31,7 @@
 /*
  * Character Map Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.CharacterMap', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.CharacterMap = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -51,24 +50,17 @@ Ext.define('HTMLArea.CharacterMap', {
                };
                this.registerPluginInformation(pluginInformation);
                /*
-                * Registering the buttons
-                */
-               for (var i = 0, n = this.buttons.length; i < n; ++i) {
-                       var button = this.buttons[i];
-                       buttonId = button[0];
-                       var buttonConfiguration = {
-                               id: buttonId,
-                               tooltip: this.localize(buttonId + '-Tooltip'),
-                               action: 'onButtonPress',
-                               context: button[1],
-                               dialog: false,
-                               iconCls: 'htmlarea-action-' + button[2]
-                       };
-                       this.registerButton(buttonConfiguration);
-               }
-               /*
-                * Localizing the maps
+                * Registering the button
                 */
+               var buttonId = 'InsertCharacter';
+               var buttonConfiguration = {
+                       id              : buttonId,
+                       tooltip         : this.localize(buttonId + '-Tooltip'),
+                       action          : 'onButtonPress',
+                       dialog          : true,
+                       iconCls         : 'htmlarea-action-character-insert-from-map'
+               };
+               this.registerButton(buttonConfiguration);
                Ext.iterate(this.maps, function (key, map, maps) {
                        for (var i = map.length; --i >= 0;) {
                                maps[key][i].push(this.localize(map[i][1]));
@@ -77,13 +69,6 @@ Ext.define('HTMLArea.CharacterMap', {
                return true;
         },
        /*
-        * The list of buttons added by this plugin
-        */
-       buttons: [
-               ['InsertCharacter', null, 'character-insert-from-map'],
-               ['InsertSoftHyphen', null, 'soft-hyphen-insert']
-       ],
-       /*
         * Character maps
         */
        maps: {
@@ -349,25 +334,12 @@ Ext.define('HTMLArea.CharacterMap', {
                        // Could be a button or its hotkey
                var buttonId = this.translateHotKey(id);
                buttonId = buttonId ? buttonId : id;
-               switch (buttonId) {
-                       case 'InsertCharacter':
-                               this.openDialogue(
-                                       buttonId,
-                                       'Insert special character',
-                                       this.getWindowDimensions(
-                                               {
-                                                       width: 402,
-                                                       height: 360
-                                               },
-                                               buttonId
-                                       ),
-                                       this.buildTabItems()
-                               );
-                               break;
-                       case 'InsertSoftHyphen':
-                               this.insertEntity('\xAD');
-                               break;
-               }
+               this.openDialogue(
+                       buttonId,
+                       'Insert special character',
+                       this.getWindowDimensions({width:434, height:360}, buttonId),
+                       this.buildTabItems()
+               );
                return false;
        },
        /*
@@ -382,13 +354,14 @@ Ext.define('HTMLArea.CharacterMap', {
         * @return      void
         */
        openDialogue: function (buttonId, title, dimensions, tabItems, handler) {
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.localize(title),
                        cls: 'htmlarea-window',
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                close: {
@@ -403,6 +376,10 @@ Ext.define('HTMLArea.CharacterMap', {
                                        activate: {
                                                fn: this.resetFocus,
                                                scope: this
+                                       },
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
                                        }
                                },
                                items: tabItems
@@ -422,12 +399,12 @@ Ext.define('HTMLArea.CharacterMap', {
                var tabItems = [];
                Ext.iterate(this.maps, function (id, map) {
                        tabItems.push({
-                               xtype: 'component',
-                               cls: 'htmlarea-character-map',
+                               xtype: 'box',
+                               cls: 'character-map',
                                title: this.localize(id),
                                itemId: id,
-                               tpl: Ext.create('Ext.XTemplate',
-                                       '<tpl for="."><a href="#" class="htmlarea-character-map-character" hidefocus="on" data-qtitle="<span>&</span>{1};" data-qtip="{2}">{0}</a></tpl>'
+                               tpl: new Ext.XTemplate(
+                                       '<tpl for="."><a href="#" class="character" hidefocus="on" ext:qtitle="<span>&</span>{1};" ext:qtip="{2}">{0}</a></tpl>'
                                ),
                                listeners: {
                                        render: {
@@ -451,43 +428,26 @@ Ext.define('HTMLArea.CharacterMap', {
                component.mon(component.el, 'click', this.insertCharacter, this, {delegate: 'a'});
        },
        /*
-        * Handle the click on an item of the map
+        * Insert the selected entity
         *
         * @param       object          event: the Ext event
         * @param       HTMLelement     target: the html element target
         *
-        * @return      boolean
+        * @return      void
         */
        insertCharacter: function (event, target) {
                event.stopEvent();
                this.editor.focus();
                this.restoreSelection();
                var entity = Ext.get(target).dom.innerHTML;
-               this.insertEntity(entity);
-               if (Ext.isIE) {
-                       this.saveSelection();
-               }
-               return false;
-       },
-       /*
-        * Insert the selected entity
-        *
-        * @param       string          entity: the entity to insert at the current selection
-        *
-        * @return      void
-        */
-       insertEntity: function (entity) {
-               this.editor.focus();
                if (Ext.isIE) {
                        this.editor.insertHTML(entity);
+                       this.saveSelection();
                } else {
                                // Firefox and WebKit convert '&nbsp;' to '&amp;nbsp;'
-                       var node = this.editor.document.createTextNode(((Ext.isGecko || Ext.isWebKit) && entity == '&nbsp;') ? '\xA0' : entity);
-                       this.editor.insertNodeAtSelection(node);
-                       if (!Ext.isIE) {
-                               this.editor.selectNode(node, false);
-                       }
+                       this.editor.insertNodeAtSelection(this.editor.document.createTextNode(((Ext.isGecko || Ext.isWebKit) && entity == '&nbsp;') ? '\xA0' : entity));
                }
+               return false;
        },
        /*
         * Reset focus on the the current selection, if at all possible
index 13bcbce..aca7694 100644 (file)
@@ -9,9 +9,6 @@
                        <trans-unit id="InsertCharacter-Tooltip" xml:space="preserve">
                                <source>Insert special character</source>
                        </trans-unit>
-                       <trans-unit id="InsertSoftHyphen-Tooltip" xml:space="preserve">
-                               <source>Insert soft hyphen</source>
-                       </trans-unit>
                        <trans-unit id="Insert special character" xml:space="preserve">
                                <source>Insert special character</source>
                        </trans-unit>
index 1cad4ad..6dfab8f 100644 (file)
@@ -30,8 +30,7 @@
 /*
  * Context Menu Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.ContextMenu', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.ContextMenu = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -50,7 +49,7 @@ Ext.define('HTMLArea.ContextMenu', {
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : '4.0',
+                       version         : '3.2',
                        developer       : 'Mihai Bazon & Stanislas Rolland',
                        developerUrl    : 'http://www.sjbr.ca/',
                        copyrightOwner  : 'dynarch.com & Stanislas Rolland',
@@ -65,51 +64,30 @@ Ext.define('HTMLArea.ContextMenu', {
         * This function gets called when the editor gets generated
         */
        onGenerate: function() {
-                       // Monitor contextmenu clicks on the iframe
-               this.editor.iframe.mon(Ext.get(this.editor.document.documentElement), 'contextmenu', this.show, this, {stopEvent: true, single: true});
-       },
-       /*
-        * Handler to show the context menu
-        */
-       show: function (event, target) {
-                       // Build the context menu on first use
-               if (!this.menu) {
-                       this.menu = Ext.create(Ext.menu.Menu, Ext.apply({
-                               bodyCls: 'htmlarea-context-menu',
-                               defaultType: 'menuitem',
-                               floating: true,
-                               items: this.buildItemsConfig(),
-                               listeners: {
-                                       afterrender: {
-                                               fn: this.afterRenderMenu,
-                                               scope: this,
-                                               single: true
-                                       },
-                                       click: {
-                                               fn: this.onItemClick,
-                                               scope: this
-                                       },
-                                       hide: {
-                                               fn: this.onMenuHide,
-                                               scope: this
-                                       },
-                                       show: {
-                                               fn: this.onMenuShow,
-                                               scope: this
-                                       }
+                       // Build the context menu
+               this.menu = new Ext.menu.Menu(Ext.applyIf({
+                       cls: 'htmlarea-context-menu',
+                       defaultType: 'menuitem',
+                       listeners: {
+                               itemClick: {
+                                       fn: this.onItemClick,
+                                       scope: this
                                },
-                               maxHeight: 500
-                       }, this.pageTSConfiguration));
-               }
-                       // Need to wait a while for the toolbar state to be updated
-               Ext.Function.defer(this.showMenu, 150, this, [target]);
-       },
-       /*
-        * Handler afterrender
-        */
-       afterRenderMenu: function (menu) {
+                               show: {
+                                       fn: this.onShow,
+                                       scope: this
+                               },
+                               hide: {
+                                       fn: this.onHide,
+                                       scope: this
+                               }
+                       },
+                       items: this.buildItemsConfig()
+               }, this.pageTSConfiguration));
+                       // Monitor contextmenu clicks on the iframe
+               this.menu.mon(Ext.get(this.editor.document.documentElement), 'contextmenu', this.show, this);
                        // Monitor editor being destroyed
-               menu.mon(this.editor.iframe, 'beforedestroy', this.onBeforeDestroy, this, {single: true});
+               this.menu.mon(this.editor, 'beforedestroy', this.onBeforeDestroy, this, {single: true});
        },
        /*
         * Create the menu items config
@@ -123,10 +101,10 @@ Ext.define('HTMLArea.ContextMenu', {
                        firstInGroup = true;
                        Ext.each(row, function (group) {
                                if (!firstInGroup) {
-                                               // If a visible item was added to the line
+                                       // If a visible item was added to the line
                                        itemsConfig.push({
                                                        xtype: 'menuseparator',
-                                                       cls: 'htmlarea-context-menu-separator'
+                                                       cls: 'separator'
                                        });
                                }
                                firstInGroup = true;
@@ -140,23 +118,12 @@ Ext.define('HTMLArea.ContextMenu', {
                                                        var itemId = button.getItemId();
                                                        itemsConfig.push({
                                                                itemId: itemId,
-                                                               cls: 'htmlarea-context-menu-item',
-                                                               overCls: 'htmlarea-context-menu-hover',
-                                                               text: (button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.text),
+                                                               cls: 'button',
+                                                               overCls: 'hover',
+                                                               text: (button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.title),
                                                                iconCls: button.iconCls,
                                                                helpText: (button.helpText ? button.helpText : this.localize(itemId + '-tooltip')),
-                                                               listeners: {
-                                                                       afterrender: {
-                                                                               fn: function (menuitem) {
-                                                                                       if (menuitem.helpText) {
-                                                                                               Ext.tip.QuickTipManager.register({
-                                                                                                       target: menuitem,
-                                                                                                       text: menuitem.helpText
-                                                                                               });
-                                                                                       }
-                                                                               }
-                                                                       }
-                                                               }
+                                                               hidden: true
                                                        });
                                                        firstInGroup = false;
                                                }
@@ -171,7 +138,7 @@ Ext.define('HTMLArea.ContextMenu', {
                if (!firstInGroup) {
                        itemsConfig.push({
                                        xtype: 'menuseparator',
-                                       cls: 'htmlarea-context-menu-separator'
+                                       cls: 'separator'
                        });
                }
                        // Add special target delete item
@@ -186,10 +153,24 @@ Ext.define('HTMLArea.ContextMenu', {
                return itemsConfig;
        },
        /*
-        * Handler when the mouse goes down in the editor iframe
+        * Handler when the menu gets shown
+        */
+       onShow: function () {
+               this.menu.mon(Ext.get(this.editor.document.documentElement), 'mousedown', this.menu.hide, this.menu, {single: true});
+       },
+       /*
+        * Handler when the menu gets hidden
         */
-       hideMenu: function () {
-               this.menu.hide();
+       onHide: function () {
+               this.menu.mun(Ext.get(this.editor.document.documentElement), 'mousedown', this.menu.hide, this.menu);
+       },
+       /*
+        * Handler to show the context menu
+        */
+       show: function (event, target) {
+               event.stopEvent();
+                       // Need to wait a while for the toolbar state to be updated
+               this.showMenu.defer(150, this, [target]);
        },
        /*
         * Show the context menu
@@ -199,54 +180,48 @@ Ext.define('HTMLArea.ContextMenu', {
                if (!Ext.isIE) {
                        this.ranges = this.editor.getSelectionRanges();
                }
-                       // There is nothing to understand here...
-               this.menu.showBy(this.editor.iframe, 'tl-tr?');
-               this.menu.showBy(this.editor.iframe, 'tl-tr?');
+               var iframeEl = this.editor.iframe.getEl();
+                       // Show the context menu
+               this.menu.showAt([Ext.fly(target).getX() + iframeEl.getX(), Ext.fly(target).getY() + iframeEl.getY()]);
        },
        /*
         * Show items depending on context
         */
        showContextItems: function (target) {
-               var lastIsSeparator = false,
-                       lastIsButton = false,
-                       xtype,
-                       lastVisible;
-               this.menu.items.each(function (menuItem) {
+               var lastIsSeparator = false, lastIsButton = false, xtype, lastVisible;
+               this.menu.cascade(function (menuItem) {
                        xtype = menuItem.getXType();
-                       switch (xtype) {
-                               case 'menuseparator':
-                                       menuItem.setVisible(lastIsButton);
-                                       lastIsButton = false;
-                                       break;
-                               case 'menuitem':
-                                       var button = this.getButton(menuItem.getItemId());
-                                       if (button) {
-                                               var text = button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.text;
-                                               if (menuItem.text != text) {
-                                                       menuItem.setText(text);
-                                               }
-                                               menuItem.helpText = button.helpText ? button.helpText : menuItem.helpText;
-                                               menuItem.setVisible(!button.disabled);
-                                               lastIsButton = lastIsButton || !button.disabled;
+                       if (xtype === 'menuseparator') {
+                               menuItem.setVisible(lastIsButton);
+                               lastIsButton = false;
+                       } else if (xtype === 'menuitem') {
+                               var button = this.getButton(menuItem.getItemId());
+                               if (button) {
+                                       var text = button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.title;
+                                       if (menuItem.text != text) {
+                                               menuItem.setText(text);
+                                       }
+                                       menuItem.helpText = button.helpText ? button.helpText : menuItem.helpText;
+                                       menuItem.setVisible(!button.disabled);
+                                       lastIsButton = lastIsButton || !button.disabled;
+                               } else {
+                                               // Special target delete item
+                                       this.deleteTarget = target;
+                                       if (/^(html|body)$/i.test(target.nodeName)) {
+                                               this.deleteTarget = null;
+                                       } else if (/^(table|thead|tbody|tr|td|th|tfoot)$/i.test(target.nodeName)) {
+                                               this.deleteTarget = Ext.fly(target).findParent('table');
+                                       } else if (/^(ul|ol|dl|li|dd|dt)$/i.test(target.nodeName)) {
+                                               this.deleteTarget = Ext.fly(target).findParent('ul') || Ext.fly(target).findParent('ol') || Ext.fly(target).findParent('dl');
+                                       }
+                                       if (this.deleteTarget) {
+                                               menuItem.setVisible(true);
+                                               menuItem.setText(this.localize('Remove the') + ' &lt;' + this.deleteTarget.nodeName.toLowerCase() + '&gt; ');
+                                               lastIsButton = true;
                                        } else {
-                                                       // Special target delete item
-                                               this.deleteTarget = target;
-                                               if (/^(html|body)$/i.test(target.nodeName)) {
-                                                       this.deleteTarget = null;
-                                               } else if (/^(table|thead|tbody|tr|td|th|tfoot)$/i.test(target.nodeName)) {
-                                                       this.deleteTarget = Ext.fly(target).findParent('table');
-                                               } else if (/^(ul|ol|dl|li|dd|dt)$/i.test(target.nodeName)) {
-                                                       this.deleteTarget = Ext.fly(target).findParent('ul') || Ext.fly(target).findParent('ol') || Ext.fly(target).findParent('dl');
-                                               }
-                                               if (this.deleteTarget) {
-                                                       menuItem.setVisible(true);
-                                                       menuItem.setText(this.localize('Remove the') + ' &lt;' + this.deleteTarget.nodeName.toLowerCase() + '&gt; ');
-                                                       lastIsButton = true;
-                                               } else {
-                                                       menuItem.setVisible(false);
-                                               }
+                                               menuItem.setVisible(false);
                                        }
-                                       break;
+                               }
                        }
                        if (!menuItem.hidden) {
                                lastVisible = menuItem;
@@ -258,61 +233,43 @@ Ext.define('HTMLArea.ContextMenu', {
                }
        },
        /*
-        * Handler invoked when a menu is clicked on
+        * Handler invoked when a menu item is clicked on
         */
-       onItemClick: function (menu, item, event) {
-               if (item) {
-                       if (!Ext.isIE) {
-                               this.editor.setSelectionRanges(this.ranges);
-                       }
-                       var button = this.getButton(item.getItemId());
-                       if (button) {
-                               button.fireEvent('HTMLAreaEventContextMenu', button, event, null);
-                       } else if (item.getItemId() === 'DeleteTarget') {
+       onItemClick: function (item, event) {
+               if (!Ext.isIE) {
+                       this.editor.setSelectionRanges(this.ranges);
+               }
+               var button = this.getButton(item.getItemId());
+               if (button) {
+                       button.fireEvent('HTMLAreaEventContextMenu', button, event);
+               } else if (item.getItemId() === 'DeleteTarget') {
+                               // Do not leave a non-ie table cell empty
+                       var parent = this.deleteTarget.parentNode;
+                       parent.normalize();
+                       if (!Ext.isIE && /^(td|th)$/i.test(parent.nodeName) && parent.childNodes.length == 1) {
                                        // Do not leave a non-ie table cell empty
-                               var parent = this.deleteTarget.parentNode;
-                               parent.normalize();
-                               if (!Ext.isIE && /^(td|th)$/i.test(parent.nodeName) && parent.childNodes.length == 1) {
-                                               // Do not leave a non-ie table cell empty
-                                       parent.appendChild(this.editor.document.createElement('br'));
-                               }
-                                       // Try to find a reasonable replacement selection
-                               var nextSibling = this.deleteTarget.nextSibling;
-                               var previousSibling = this.deleteTarget.previousSibling;
-                               if (nextSibling) {
-                                       this.editor.selectNode(nextSibling, true);
-                               } else if (previousSibling) {
-                                       this.editor.selectNode(previousSibling, false);
-                               }
-                               HTMLArea.removeFromParent(this.deleteTarget);
-                               this.editor.updateToolbar();
+                               parent.appendChild(this.editor.document.createElement('br'));
+                       }
+                               // Try to find a reasonable replacement selection
+                       var nextSibling = this.deleteTarget.nextSibling;
+                       var previousSibling = this.deleteTarget.previousSibling;
+                       if (nextSibling) {
+                               this.editor.selectNode(nextSibling, true);
+                       } else if (previousSibling) {
+                               this.editor.selectNode(previousSibling, false);
                        }
+                       HTMLArea.removeFromParent(this.deleteTarget);
+                       this.editor.updateToolbar();
                }
        },
        /*
-        * Handler when the menu gets hidden
-        */
-       onMenuHide: function (menu) {
-                       // Stop listening to mousedown
-               menu.mun(Ext.get(this.editor.document.documentElement), 'mousedown', this.hideMenu, this);
-                       // Resume listening to contextmenu
-               menu.mon(Ext.get(this.editor.document.documentElement), 'contextmenu', this.show, this, {stopEvent: true, single: true});
-       },
-       /*
-        * Handler when the menu gets shown
-        */
-       onMenuShow: function (menu) {
-                       // Hide the menu when the mouse goes down in the editor iframe
-               menu.mon(Ext.get(this.editor.document.documentElement), 'mousedown', this.hideMenu, this, { single: true });
-       },
-       /*
         * Handler invoked when the editor is about to be destroyed
         */
        onBeforeDestroy: function () {
                this.menu.items.each(function (menuItem) {
                        Ext.QuickTips.unregister(menuItem);
                });
-               this.menu.removeAll(true);
-               this.menu.destroy();
+               this.menu.removeAll(true);
+               this.menu.destroy();
        }
 });
index e3078e3..58690c9 100644 (file)
@@ -27,8 +27,7 @@
 /*
  * Copy Paste for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.CopyPaste', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.CopyPaste = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -145,7 +144,7 @@ Ext.define('HTMLArea.CopyPaste', {
                                        if (Ext.isOpera || Ext.isGecko2) {
                                                var cleaner = this.getButton('CleanWord');
                                                if (cleaner) {
-                                                       Ext.Function.defer(cleaner.fireEvent, 250, cleaner, ['click', cleaner]);
+                                                       cleaner.fireEvent.defer(250, cleaner, ['click', cleaner]);
                                                }
                                        }
                                        break;
@@ -163,7 +162,7 @@ Ext.define('HTMLArea.CopyPaste', {
                                this.editor.inhibitKeyboardInput = true;
                                var bookmark = this.editor.getBookmark(this.editor._createRange(this.editor._getSelection()));
                                var html = this.editor.getInnerHTML();
-                               Ext.Function.defer(this.revertPaste, 200, this, [html, bookmark]);
+                               this.revertPaste.defer(200, this, [html, bookmark]);
                        }
                        return false;
                }
@@ -203,7 +202,7 @@ Ext.define('HTMLArea.CopyPaste', {
         * This function removes any link left over by the cut operation
         */
        cutHandler: function (event) {
-               Ext.Function.defer(this.removeEmptyLink, 50, this);
+               this.removeEmptyLink.defer(50, this);
        },
        /*
         * This function unlinks any empty link left over by the cut operation
index 467a3ef..b2d22b5 100644 (file)
@@ -26,8 +26,7 @@
 /**
  * Default Clean Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.DefaultClean', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultClean = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -167,6 +166,6 @@ Ext.define('HTMLArea.DefaultClean', {
         * Handler for paste, dragdrop and drop events
         */
        wordCleanHandler: function (event) {
-               Ext.Function.defer(this.clean, 250, this);
+               this.clean.defer(250, this);
        }
 });
index 584830e..b281c91 100644 (file)
@@ -29,8 +29,7 @@
 /*
  * Image Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.DefaultImage', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultImage = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -64,7 +63,7 @@ Ext.define('HTMLArea.DefaultImage', {
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : '3.0',
+                       version         : '2.2',
                        developer       : 'Stanislas Rolland',
                        developerUrl    : 'http://www.sjbr.ca/',
                        copyrightOwner  : 'Stanislas Rolland',
@@ -92,24 +91,17 @@ Ext.define('HTMLArea.DefaultImage', {
         * Sets of default configuration values for dialogue form fields
         */
        configDefaults: {
-               combobox: {
-                       cls: 'htmlarea-combo',
-                       displayField: 'text',
-                       listConfig: {
-                               cls: 'htmlarea-combo-list',
-                               getInnerTpl: function () {
-                                       return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
-                               }
-                       },
+               combo: {
                        editable: true,
-                       forceSelection: true,
-                       helpIcon: true,
-                       queryMode: 'local',
                        selectOnFocus: true,
-                       triggerAction: 'all',
                        typeAhead: true,
+                       triggerAction: 'all',
+                       forceSelection: true,
+                       mode: 'local',
                        valueField: 'value',
-                       xtype: 'combobox'
+                       displayField: 'text',
+                       helpIcon: true,
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
                }
        },
        /*
@@ -159,11 +151,11 @@ Ext.define('HTMLArea.DefaultImage', {
                        // Open dialogue window
                this.openDialogue(
                        buttonId,
-                       this.getButton(buttonId).tooltip.text,
+                       this.getButton(buttonId).tooltip.title,
                        this.getWindowDimensions(
                                {
                                        width: 460,
-                                       height: 300
+                                       height:300
                                },
                                buttonId
                        ),
@@ -182,13 +174,14 @@ Ext.define('HTMLArea.DefaultImage', {
         * @return      void
         */
        openDialogue: function (buttonId, title, dimensions, tabItems) {
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.localize(title) || title,
                        cls: 'htmlarea-window',
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                close: {
@@ -202,11 +195,17 @@ Ext.define('HTMLArea.DefaultImage', {
                                activeTab: 0,
                                defaults: {
                                        xtype: 'container',
-                                       layout: 'anchor',
+                                       layout: 'form',
                                        defaults: {
                                                labelWidth: 100
                                        }
                                },
+                               listeners: {
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
+                                       }
+                               },
                                items: tabItems
                        },
                        buttons: [
@@ -235,10 +234,10 @@ Ext.define('HTMLArea.DefaultImage', {
                                                labelSeparator: ''
                                        },
                                        items: [{
-                                                       fieldLabel: this.localize('Image URL:'),
-                                                       helpTitle: this.localize('Enter the image URL here'),
                                                        itemId: 'url',
-                                                       value: this.parameters.url
+                                                       fieldLabel: this.localize('Image URL:'),
+                                                       value: this.parameters.url,
+                                                       helpTitle: this.localize('Enter the image URL here')
                                                },{
                                                        itemId: 'alt',
                                                        fieldLabel: this.localize('Alternate text:'),
@@ -281,52 +280,6 @@ Ext.define('HTMLArea.DefaultImage', {
                });
                        // Layout tab
                if (!this.removeItems.test('layout')) {
-                               // Create image align options global store
-                       var imageAlignStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + 'imageAlign');
-                       if (!imageAlignStore) {
-                               imageAlignStore = Ext.create('Ext.data.ArrayStore', {
-                                       model: 'HTMLArea.model.Default',
-                                       storeId: 'HTMLArea' + '-store-' + this.name + 'imageAlign'
-                               });
-                               imageAlignStore.loadData([
-                                       {
-                                               text: this.localize('Not set'),
-                                               value: ''
-                                       },{
-                                               text: this.localize('Bottom'),
-                                               value: 'bottom'
-                                       },{
-                                               text: this.localize('Middle'),
-                                               value: 'middle'
-                                       },{
-                                               text: this.localize('Top'),
-                                               value: 'top'
-                                       }
-                               ]);
-                       }
-                               // Create cssFloat options global store
-                       var cssFloatStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + 'cssFloat');
-                       if (!cssFloatStore) {
-                               cssFloatStore = Ext.create('Ext.data.ArrayStore', {
-                                       model: 'HTMLArea.model.Default',
-                                       storeId: 'HTMLArea' + '-store-' + this.name + 'cssFloat'
-                               });
-                               cssFloatStore.loadData([
-                                       {
-                                               text: this.localize('Not set'),
-                                               value: ''
-                                       },{
-                                               text: this.localize('Non-floating'),
-                                               value: 'none'
-                                       },{
-                                               text: this.localize('Left'),
-                                               value: 'left'
-                                       },{
-                                               text: this.localize('Right'),
-                                               value: 'right'
-                                       }
-                               ]);
-                       }
                        tabItems.push({
                                title: this.localize('Layout'),
                                items: [{
@@ -334,43 +287,57 @@ Ext.define('HTMLArea.DefaultImage', {
                                                defaultType: 'textfield',
                                                defaults: {
                                                        helpIcon: true,
-                                                       width: 300,
+                                                       width: 250,
                                                        labelSeparator: ''
                                                },
                                                items: [
-                                                       Ext.applyIf(
-                                                               {
-                                                                       fieldLabel: this.localize('Image alignment:'),
-                                                                       helpTitle: this.localize('Positioning of this image'),
-                                                                       hidden: this.removeItems.test('align'),
-                                                                       hideLabel: this.removeItems.test('align'),
-                                                                       itemId: 'align',
-                                                                       store: imageAlignStore,
-                                                                       value: this.parameters.align
-                                                               },
-                                                               this.configDefaults['combobox']
-                                                       ),
-                                                       {
+                                                       Ext.apply({
+                                                               xtype: 'combo',
+                                                               fieldLabel: this.localize('Image alignment:'),
+                                                               itemId: 'align',
+                                                               value: this.parameters.align,
+                                                               helpTitle: this.localize('Positioning of this image'),
+                                                               store: new Ext.data.ArrayStore({
+                                                                       autoDestroy:  true,
+                                                                       fields: [ { name: 'text'}, { name: 'value'}],
+                                                                       data: [
+                                                                               [this.localize('Not set'), ''],
+                                                                               [this.localize('Bottom'), 'bottom'],
+                                                                               [this.localize('Middle'), 'middle'],
+                                                                               [this.localize('Top'), 'top']
+                                                                       ]
+                                                               }),
+                                                               hidden: this.removeItems.test('align'),
+                                                               hideLabel: this.removeItems.test('align')
+                                                               }, this.configDefaults['combo'])
+                                                       ,{
+                                                               itemId: 'border',
                                                                fieldLabel: this.localize('Border thickness:'),
+                                                               width: 100,
+                                                               value: this.parameters.border,
                                                                helpTitle: this.localize('Leave empty for no border'),
                                                                hidden: this.removeItems.test('border'),
-                                                               hideLabel: this.removeItems.test('border'),
-                                                               itemId: 'border',
-                                                               value: this.parameters.border,
-                                                               width: 200
+                                                               hideLabel: this.removeItems.test('border')
                                                        },
-                                                       Ext.applyIf(
-                                                               {
-                                                                       fieldLabel: this.localize('Float:'),
-                                                                       helpTitle: this.localize('Where the image should float'),
-                                                                       hidden: this.removeItems.test('float'),
-                                                                       hideLabel: this.removeItems.test('float'),
-                                                                       itemId: 'cssFloat',
-                                                                       store: cssFloatStore,
-                                                                       value: this.parameters.cssFloat
-                                                               },
-                                                               this.configDefaults['combobox']
-                                                       )
+                                                       Ext.apply({
+                                                               xtype: 'combo',
+                                                               fieldLabel: this.localize('Float:'),
+                                                               itemId: 'cssFloat',
+                                                               value: this.parameters.cssFloat,
+                                                               helpTitle: this.localize('Where the image should float'),
+                                                               store: new Ext.data.ArrayStore({
+                                                                       autoDestroy:  true,
+                                                                       fields: [ { name: 'text'}, { name: 'value'}],
+                                                                       data: [
+                                                                               [this.localize('Not set'), ''],
+                                                                               [this.localize('Non-floating'), 'none'],
+                                                                               [this.localize('Left'), 'left'],
+                                                                               [this.localize('Right'), 'right']
+                                                                       ]
+                                                               }),
+                                                               hidden: this.removeItems.test('float'),
+                                                               hideLabel: this.removeItems.test('float')
+                                                               }, this.configDefaults['combo'])
                                                ]
                                }]
                        });
@@ -384,7 +351,7 @@ Ext.define('HTMLArea.DefaultImage', {
                                                defaultType: 'textfield',
                                                defaults: {
                                                        helpIcon: true,
-                                                       width: 200,
+                                                       width: 100,
                                                        labelSeparator: ''
                                                },
                                                items: [{
@@ -426,8 +393,8 @@ Ext.define('HTMLArea.DefaultImage', {
         * Handler invoked when the Preview button is clicked
         */
        onPreviewClick: function () {
-               var tabPanel = this.dialog.down('component[itemId=tabpanel]');
-               var urlField = this.dialog.down('component[itemId=url]');
+               var tabPanel = this.dialog.find('itemId', 'tabpanel')[0];
+               var urlField = this.dialog.find('itemId', 'url')[0];
                var url = urlField.getValue().trim();
                if (url) {
                        try {
@@ -452,12 +419,12 @@ Ext.define('HTMLArea.DefaultImage', {
         * Handler invoked when the OK button is clicked
         */
        onOK: function () {
-               var urlField = this.dialog.down('component[itemId=url]');
+               var urlField = this.dialog.find('itemId', 'url')[0];
                var url = urlField.getValue().trim();
                if (url) {
                        var fieldNames = ['url', 'alt', 'align', 'border', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'cssFloat'];
                        Ext.each(fieldNames, function (fieldName) {
-                               var field = this.dialog.down('component[itemId=' + fieldName + ']');
+                               var field = this.dialog.find('itemId', fieldName)[0];
                                if (field && !field.hidden) {
                                        this.parameters[fieldName] = field.getValue();
                                }
@@ -465,7 +432,7 @@ Ext.define('HTMLArea.DefaultImage', {
                        this.insertImage();
                        this.close();
                } else {
-                       var tabPanel = this.dialog.down('component[itemId=tabpanel]');
+                       var tabPanel = this.dialog.find('itemId', 'tabpanel')[0];
                        TYPO3.Dialog.InformationDialog({
                                title: this.localize('image_url'),
                                msg: this.localize('image_url_required'),
@@ -555,9 +522,9 @@ Ext.define('HTMLArea.DefaultImage', {
                                image = null;
                        }
                        if (image) {
-                               button.setTooltip({ text: this.localize('Modify image') });
+                               button.setTooltip({ title: this.localize('Modify image') });
                        } else {
-                               button.setTooltip({ text: this.localize('Insert image') });
+                               button.setTooltip({ title: this.localize('Insert image') });
                        }
                }
        }
index 3cfa351..9841636 100644 (file)
@@ -21,9 +21,6 @@
                        <trans-unit id="Right:" xml:space="preserve">
                                <source>Right:</source>
                        </trans-unit>
-                       <trans-unit id="Left:" xml:space="preserve">
-                               <source>Left:</source>
-                       </trans-unit>
                        <trans-unit id="Bottom:" xml:space="preserve">
                                <source>Bottom:</source>
                        </trans-unit>
index ac12110..33f088d 100644 (file)
@@ -27,8 +27,7 @@
 /*
  * Default Inline Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.DefaultInline', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultInline = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
index b7f80a6..91e0b90 100644 (file)
@@ -29,8 +29,7 @@
 /*
  * Default Link Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.DefaultLink', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultLink = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -84,24 +83,17 @@ Ext.define('HTMLArea.DefaultLink', {
         * Sets of default configuration values for dialogue form fields
         */
        configDefaults: {
-               combobox: {
-                       cls: 'htmlarea-combo',
-                       displayField: 'text',
-                       listConfig: {
-                               cls: 'htmlarea-combo-list',
-                               getInnerTpl: function () {
-                                       return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
-                               }
-                       },
+               combo: {
                        editable: true,
-                       forceSelection: true,
-                       helpIcon: true,
-                       queryMode: 'local',
                        selectOnFocus: true,
-                       triggerAction: 'all',
                        typeAhead: true,
+                       triggerAction: 'all',
+                       forceSelection: true,
+                       mode: 'local',
                        valueField: 'value',
-                       xtype: 'combobox'
+                       displayField: 'text',
+                       helpIcon: true,
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
                }
        },
        /*
@@ -143,7 +135,7 @@ Ext.define('HTMLArea.DefaultLink', {
                                        var selection = this.editor._getSelection();
                                        if (this.editor._selectionEmpty(selection)) {
                                                TYPO3.Dialog.InformationDialog({
-                                                       title: this.getButton(buttonId).tooltip.text,
+                                                       title: this.getButton(buttonId).tooltip.title,
                                                        msg: this.localize('Select some text')
                                                });
                                                break;
@@ -163,7 +155,7 @@ Ext.define('HTMLArea.DefaultLink', {
                                        // Open dialogue window
                                this.openDialogue(
                                        buttonId,
-                                       this.getButton(buttonId).tooltip.text,
+                                       this.getButton(buttonId).tooltip.title,
                                        this.getWindowDimensions(
                                                {
                                                        width: 470,
@@ -186,39 +178,14 @@ Ext.define('HTMLArea.DefaultLink', {
         * @return      void
         */
        openDialogue: function (buttonId, title, dimensions) {
-                       // Create target options global store
-               var targetStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + '-target');
-               if (!targetStore) {
-                       targetStore = Ext.create('Ext.data.ArrayStore', {
-                               model: 'HTMLArea.model.Default',
-                               storeId: 'HTMLArea' + '-store-' + this.name + '-target'
-                       });
-                       targetStore.loadData([
-                               {
-                                       text: this.localize('target_none'),
-                                       value: ''
-                               },{
-                                       text: this.localize('target_blank'),
-                                       value: '_blank'
-                               },{
-                                       text: this.localize('target_self'),
-                                       value: '_self'
-                               },{
-                                       text: this.localize('target_top'),
-                                       value: '_top'
-                               },{
-                                       text: this.localize('target_other'),
-                                       value: '_other'
-                               }
-                       ]);
-               }
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.localize(title) || title,
                        cls: 'htmlarea-window',
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                afterrender: {
@@ -251,24 +218,35 @@ Ext.define('HTMLArea.DefaultLink', {
                                                        fieldLabel: this.localize('Title (tooltip):'),
                                                        value: this.parameters.title,
                                                        helpTitle: this.localize('link_title_tooltip')
-                                               }, Ext.applyIf({
-                                                               fieldLabel: this.localize('Target:'),
-                                                               helpTitle: this.localize('link_target_tooltip'),
-                                                               hidden: !this.showTarget,
-                                                               itemId: 'target',
-                                                               listeners: {
-                                                                       select: {
-                                                                               fn: this.onTargetSelect
-                                                                       }
-                                                               },
-                                                               store: targetStore
+                                               }, Ext.apply({
+                                                       xtype: 'combo',
+                                                       fieldLabel: this.localize('Target:'),
+                                                       itemId: 'target',
+                                                       helpTitle: this.localize('link_target_tooltip'),
+                                                       store: new Ext.data.ArrayStore({
+                                                               autoDestroy:  true,
+                                                               fields: [ { name: 'text'}, { name: 'value'}],
+                                                               data: [
+                                                                       [this.localize('target_none'), ''],
+                                                                       [this.localize('target_blank'), '_blank'],
+                                                                       [this.localize('target_self'), '_self'],
+                                                                       [this.localize('target_top'), '_top'],
+                                                                       [this.localize('target_other'), '_other']
+                                                               ]
+                                                       }),
+                                                       listeners: {
+                                                               select: {
+                                                                       fn: this.onTargetSelect
+                                                               }
                                                        },
-                                                       this.configDefaults['combobox']
-                                               ),{
-                                                       itemId: 'framename',
-                                                       name: 'framename',
+                                                       hidden: !this.showTarget
+                                                       }, this.configDefaults['combo'])
+                                               ,{
+                                                       itemId: 'frame',
+                                                       name: 'frame',
                                                        fieldLabel: this.localize('frame'),
                                                        helpTitle: this.localize('frame_help'),
+                                                       hideLabel: true,
                                                        hidden: true
                                                }
                                        ]
@@ -286,21 +264,16 @@ Ext.define('HTMLArea.DefaultLink', {
         * If the current target is not in the available options, show frame field
         */
        onAfterRender: function (dialog) {
-               var targetCombo = dialog.down('component[itemId=target]');
-                       // Somehow getStore method got lost...
-               if (!Ext.isFunction(targetCombo.getStore)) {
-                       targetCombo.getStore = function () {
-                               return targetCombo.store;
-                       };
-               }
-               if (!targetCombo.isHidden() && this.parameters.target) {
-                       var frameField = dialog.down('component[itemId=framename]');
+               var targetCombo = dialog.find('itemId', 'target')[0];
+               if (!targetCombo.hidden && this.parameters.target) {
+                       var frameField = dialog.find('itemId', 'frame')[0];
                        var index = targetCombo.getStore().find('value', this.parameters.target);
                        if (index == -1) {
                                        // The target is a specific frame name
                                targetCombo.setValue('_other');
                                frameField.setValue(this.parameters.target);
                                frameField.show();
+                               frameField.label.show();
                        } else {
                                targetCombo.setValue(this.parameters.target);
                        }
@@ -309,26 +282,28 @@ Ext.define('HTMLArea.DefaultLink', {
        /*
         * Handler invoked when a target is selected
         */
-       onTargetSelect: function (combo, records) {
-               var frameField = combo.ownerCt.getComponent('framename');
-               if (records[0].get('value') == '_other') {
+       onTargetSelect: function (combo, record) {
+               var frameField = combo.ownerCt.getComponent('frame');
+               if (record.get('value') == '_other') {
                        frameField.show();
+                       frameField.label.show();
                        frameField.focus();
-               } else if (!frameField.isHidden()) {
+               } else if (!frameField.hidden) {
                        frameField.hide();
+                       frameField.label.hide();
                }
        },
        /*
         * Handler invoked when the OK button is clicked
         */
        onOK: function () {
-               var hrefField = this.dialog.down('component[itemId=href]');
+               var hrefField = this.dialog.find('itemId', 'href')[0];
                var href = hrefField.getValue().trim();
                if (href && href != 'http://') {
-                       var title = this.dialog.down('component[itemId=title]').getValue();
-                       var target = this.dialog.down('component[itemId=target]').getValue();
+                       var title = this.dialog.find('itemId', 'title')[0].getValue();
+                       var target = this.dialog.find('itemId', 'target')[0].getValue();
                        if (target == '_other') {
-                               target = this.dialog.down('component[itemId=framename]').getValue().trim();
+                               target = this.dialog.find('itemId', 'frame')[0].getValue().trim();
                        }
                        this.createLink(href, title, target);
                        this.close();
@@ -427,9 +402,9 @@ Ext.define('HTMLArea.DefaultLink', {
                                                        node = el;
                                                }
                                                if (node != null && /^a$/i.test(node.nodeName)) {
-                                                       button.setTooltip({ text: this.localize('Modify link') });
+                                                       button.setTooltip({ title: this.localize('Modify link') });
                                                } else {
-                                                       button.setTooltip({ text: this.localize('Insert link') });
+                                                       button.setTooltip({ title: this.localize('Insert link') });
                                                }
                                        }
                                        break;
index 3d77b3a..4986dca 100644 (file)
@@ -27,8 +27,7 @@
 /*
  * DefinitionList Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.DefinitionList', {
-       extend: 'HTMLArea.BlockElements',
+HTMLArea.DefinitionList = Ext.extend(HTMLArea.BlockElements, {
        /*
         * This function gets called by the class constructor
         */
@@ -124,14 +123,14 @@ Ext.define('HTMLArea.DefinitionList', {
                                if (/^(dd|dt)$/i.test(parentElement.nodeName) && this.indentDefinitionList(parentElement, range)) {
                                        break;
                                } else {
-                                       this.callParent(arguments);
+                                       HTMLArea.DefinitionList.superclass.onButtonPress.call(this, editor, id, target, className);
                                }
                                break;
                        case "Outdent" :
                                if (/^(dt)$/i.test(parentElement.nodeName) && this.outdentDefinitionList(selection, range)) {
                                        break;
                                } else {
-                                       this.callParent(arguments);
+                                       HTMLArea.DefinitionList.superclass.onButtonPress.call(this, editor, id, target, className);
                                }
                                break;
                        case "DefinitionList":
@@ -145,7 +144,7 @@ Ext.define('HTMLArea.DefinitionList', {
                                this.editor.selectRange(this.editor.moveToBookmark(bookmark));
                                break;
                        default:
-                               this.callParent(arguments);
+                               HTMLArea.DefinitionList.superclass.onButtonPress.call(this, editor, id, target, className);
                }
                return false;
        },
@@ -321,7 +320,7 @@ Ext.define('HTMLArea.DefinitionList', {
                                                                && !endBlocks.end.nextSibling) {
                                                        button.setDisabled(false);
                                                } else {
-                                                       this.callParent(arguments);
+                                                       HTMLArea.DefinitionList.superclass.onUpdateToolbar.call(this, button, mode, selectionEmpty, ancestors);
                                                }
                                                break;
                                        case 'DefinitionList':
@@ -332,7 +331,7 @@ Ext.define('HTMLArea.DefinitionList', {
                        } else {
                                switch (button.itemId) {
                                        case 'Outdent':
-                                               this.callParent(arguments);
+                                               HTMLArea.DefinitionList.superclass.onUpdateToolbar.call(this, button, mode, selectionEmpty, ancestors);
                                                break;
                                }
                        }
index 966ecf9..5b131ca 100644 (file)
@@ -27,8 +27,7 @@
 /*
  * EditElement plugin for htmlArea RTE
  */
-Ext.define('HTMLArea.EditElement', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.EditElement = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -41,7 +40,7 @@ Ext.define('HTMLArea.EditElement', {
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : '2.0',
+                       version         : '1.1',
                        developer       : 'Stanislas Rolland',
                        developerUrl    : 'http://www.sjbr.ca/',
                        copyrightOwner  : 'Stanislas Rolland',
@@ -68,24 +67,17 @@ Ext.define('HTMLArea.EditElement', {
         * Sets of default configuration values for dialogue form fields
         */
        configDefaults: {
-               combobox: {
-                       cls: 'htmlarea-combo',
-                       displayField: 'text',
-                       listConfig: {
-                               cls: 'htmlarea-combo-list',
-                               getInnerTpl: function () {
-                                       return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
-                               }
-                       },
+               combo: {
                        editable: true,
-                       forceSelection: true,
-                       helpIcon: true,
-                       queryMode: 'local',
                        selectOnFocus: true,
-                       triggerAction: 'all',
                        typeAhead: true,
+                       triggerAction: 'all',
+                       forceSelection: true,
+                       mode: 'local',
                        valueField: 'value',
-                       xtype: 'combobox'
+                       displayField: 'text',
+                       helpIcon: true,
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
                }
        },
        /*
@@ -131,13 +123,14 @@ Ext.define('HTMLArea.EditElement', {
         * @return      void
         */
        openDialogue: function (buttonId, title, dimensions, tabItems, buttonsConfig) {
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.getHelpTip('', title),
                        cls: 'htmlarea-window',
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                close: {
@@ -150,11 +143,17 @@ Ext.define('HTMLArea.EditElement', {
                                activeTab: 0,
                                defaults: {
                                        xtype: 'container',
-                                       layout: 'anchor',
+                                       layout: 'form',
                                        defaults: {
                                                labelWidth: 150
                                        }
                                },
+                               listeners: {
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
+                                       }
+                               },
                                items: tabItems
                        },
                        buttons: buttonsConfig
@@ -172,13 +171,10 @@ Ext.define('HTMLArea.EditElement', {
                var tabItems = [];
                var generalTabItemConfig = [];
                if (this.removedFieldsets.indexOf('identification') == -1) {
-                               this.addConfigElement(this.buildIdentificationFieldsetConfig(element), generalTabItemConfig);
+                       this.addConfigElement(this.buildIdentificationFieldsetConfig(element), generalTabItemConfig);
                }
                if (this.removedFieldsets.indexOf('style') == -1 && this.removedProperties.indexOf('className') == -1) {
-                       this.stylePlugin = this.getPluginInstance(HTMLArea.isBlockElement(element) ? 'BlockStyle' : 'TextStyle');
-                       if (this.stylePlugin) {
-                               this.addConfigElement(this.buildClassFieldsetConfig(element), generalTabItemConfig);
-                       }
+                       this.addConfigElement(this.buildClassFieldsetConfig(element), generalTabItemConfig);
                }
                tabItems.push({
                        title: this.localize('general'),
@@ -250,48 +246,9 @@ Ext.define('HTMLArea.EditElement', {
         */
        buildClassFieldsetConfig: function (element) {
                var itemsConfig = [];
-                       // Create global style store if it does not exist already
-               var styleStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.stylePlugin.name);
-               if (!styleStore) {
-                       styleStore = Ext.create('Ext.data.ArrayStore', {
-                               model: 'HTMLArea.model.' + this.stylePlugin.name,
-                               storeId: this.editorId + '-store-' + this.stylePlugin.name,
-                               data: []
-                       });
-               }
-               function initStyleCombo (combo) {
-                       var nodeName = element.nodeName.toLowerCase();
-                       var classNames = HTMLArea.DOM.getClassNames(element);
-                               // Somehow getStore method got lost...
-                       if (!Ext.isFunction(combo.getStore)) {
-                               combo.getStore = function () {
-                                       return combo.store;
-                               };
-                       }
-                       this.stylePlugin.buildDropDownOptions(combo, nodeName);
-                       this.stylePlugin.setSelectedOption(combo, classNames, 'noUnknown');
-               }
-               itemsConfig.push(Ext.applyIf(
-                       {
-                               fieldLabel: this.getHelpTip('className', 'className'),
-                               listConfig: {
-                                       cls: 'htmlarea-combo-list',
-                                       getInnerTpl: function () {
-                                               return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
-                                       }
-                               },
-                               itemId: 'className',
-                               store: styleStore,
-                               width: ((this.properties['className'] && this.properties['className'].width) ? this.properties['className'].width : 300),
-                               listeners: {
-                                       afterrender: {
-                                               fn: initStyleCombo,
-                                               scope: this
-                                       }
-                               }
-                       },
-                       this.configDefaults['combobox']
-               ));
+               var stylingCombo = this.buildStylingField('className', 'className', 'className');
+               this.setStyleOptions(stylingCombo, element);
+               itemsConfig.push(stylingCombo);
                return {
                        xtype: 'fieldset',
                        title: this.localize('className'),
@@ -303,6 +260,48 @@ Ext.define('HTMLArea.EditElement', {
                };
        },
        /*
+        * This function builds a style selection field
+        *
+        * @param       string          fieldName: the name of the field
+        * @param       string          fieldLabel: the label for the field
+        * @param       string          cshKey: the csh key
+        *
+        * @return      object          the style selection field object
+        */
+       buildStylingField: function (fieldName, fieldLabel, cshKey) {
+               return new Ext.form.ComboBox(Ext.apply({
+                       xtype: 'combo',
+                       itemId: fieldName,
+                       fieldLabel: this.getHelpTip(fieldLabel, cshKey),
+                       width: ((this.properties['className'] && this.properties['className'].width) ? this.properties['className'].width : 300),
+                       store: new Ext.data.ArrayStore({
+                               autoDestroy:  true,
+                               fields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
+                               data: [[this.localize('No style'), 'none']]
+                       })
+                       }, {
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
+                       }, this.configDefaults['combo']
+               ));
+       },
+       /*
+        * This function populates the class store and sets the selected option
+        *
+        * @param       object:         comboBox: the combobox object
+        * @param       object          element: the element being edited, if any
+        *
+        * @return      object          the fieldset configuration object
+        */
+       setStyleOptions: function (comboBox, element) {
+               var nodeName = element.nodeName.toLowerCase();
+               this.stylePlugin = this.getPluginInstance(HTMLArea.isBlockElement(element) ? 'BlockStyle' : 'TextStyle');
+               if (comboBox && this.stylePlugin) {
+                       var classNames = HTMLArea.DOM.getClassNames(element);
+                       this.stylePlugin.buildDropDownOptions(comboBox, nodeName);
+                       this.stylePlugin.setSelectedOption(comboBox, classNames, 'noUnknown');
+               }
+       },
+       /*
         * This function builds the configuration object for the Language fieldset
         *
         * @param       object          element: the element being edited, if any
@@ -321,76 +320,48 @@ Ext.define('HTMLArea.EditElement', {
                        function initLanguageStore (store) {
                                if (selectedLanguage !== 'none') {
                                        store.removeAt(0);
-                                       store.insert(0, {
+                                       store.insert(0, new store.recordType({
                                                text: languagePlugin.localize('Remove language mark'),
                                                value: 'none'
-                                       });
+                                       }));
                                }
                        }
-                               // Create global language store if it does not exist already
-                       var languageStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + languagePlugin.name);
-                       if (languageStore) {
-                               initLanguageStore(languageStore);
-                       } else {
-                               languageStore = Ext.create('Ext.data.Store', {
-                                       autoLoad: true,
-                                       model: 'HTMLArea.model.default',
-                                       listeners: {
-                                               load: initLanguageStore
-                                       },
-                                       proxy: {
-                                               type: 'ajax',
-                                               url: languageConfigurationUrl,
-                                               reader: {
-                                                       type: 'json',
-                                                       root: 'options'
-                                               }
-                                       },
-                                       storeId: this.editorId + '-store-' + languagePlugin.name
-                               });
-                       }
-                       itemsConfig.push(Ext.applyIf(
-                               {
-                                       fieldLabel: languagePlugin.getHelpTip('languageCombo', 'Language'),
-                                       itemId: 'lang',
-                                       store: languageStore,
-                                       width: ((this.properties['language'] && this.properties['language'].width) ? this.properties['language'].width : 300),
-                                       value: selectedLanguage
-                               },
-                               this.configDefaults['combobox']
-                       ));
+                       var languageStore = new Ext.data.JsonStore({
+                               autoDestroy:  true,
+                               autoLoad: true,
+                               root: 'options',
+                               fields: [ { name: 'text'}, { name: 'value'} ],
+                               url: languageConfigurationUrl,
+                               listeners: {
+                                       load: initLanguageStore
+                               }
+                       });
+                       itemsConfig.push(Ext.apply({
+                               xtype: 'combo',
+                               fieldLabel: languagePlugin.getHelpTip('languageCombo', 'Language'),
+                               itemId: 'lang',
+                               store: languageStore,
+                               width: ((this.properties['language'] && this.properties['language'].width) ? this.properties['language'].width : 200),
+                               value: selectedLanguage
+                       }, this.configDefaults['combo']));
                }
                if (this.removedProperties.indexOf('direction') == -1) {
-                               // Create direction options global store
-                       var directionStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + languagePlugin.name + '-direction');
-                       if (!directionStore) {
-                               directionStore = Ext.create('Ext.data.ArrayStore', {
-                                       model: 'HTMLArea.model.Default',
-                                       storeId: 'HTMLArea' + '-store-' + languagePlugin.name + '-direction'
-                               });
-                               directionStore.loadData([
-                                       {
-                                               text: languagePlugin.localize('Not set'),
-                                               value: 'not set'
-                                       },{
-                                               text: languagePlugin.localize('RightToLeft'),
-                                               value: 'rtl'
-                                       },{
-                                               text: languagePlugin.localize('LeftToRight'),
-                                               value: 'ltr'
-                                       }
-                               ]);
-                       }
-                       itemsConfig.push(Ext.applyIf(
-                               {
-                                       fieldLabel: languagePlugin.getHelpTip('directionCombo', 'Text direction'),
-                                       itemId: 'dir',
-                                       store: directionStore,
-                                       value: !Ext.isEmpty(element) && element.dir ? element.dir : 'not set',
-                                       width: ((this.properties['direction'] && this.properties['dirrection'].width) ? this.properties['direction'].width : 300)
-                               },
-                               this.configDefaults['combobox']
-                       ));
+                       itemsConfig.push(Ext.apply({
+                               xtype: 'combo',
+                               fieldLabel: languagePlugin.getHelpTip('directionCombo', 'Text direction'),
+                               itemId: 'dir',
+                               store: new Ext.data.ArrayStore({
+                                       autoDestroy:  true,
+                                       fields: [ { name: 'text'}, { name: 'value'}],
+                                       data: [
+                                               [languagePlugin.localize('Not set'), 'not set'],
+                                               [languagePlugin.localize('RightToLeft'), 'rtl'],
+                                               [languagePlugin.localize('LeftToRight'), 'ltr']
+                                       ]
+                               }),
+                               width: ((this.properties['direction'] && this.properties['dirrection'].width) ? this.properties['direction'].width : 200),
+                               value: !Ext.isEmpty(element) && element.dir ? element.dir : 'not set'
+                       }, this.configDefaults['combo']));
                }
                return {
                        xtype: 'fieldset',
@@ -457,11 +428,11 @@ Ext.define('HTMLArea.EditElement', {
         */
        okHandler: function (button, event) {
                this.restoreSelection();
-               var textFields = this.dialog.query('textfield');
+               var textFields = this.dialog.findByType('textfield');
                Ext.each(textFields, function (field) {
                        this.element.setAttribute(field.getItemId(), field.getValue());
                }, this);
-               var comboFields = this.dialog.query('combobox');
+               var comboFields = this.dialog.findByType('combo');
                Ext.each(comboFields, function (field) {
                        var itemId = field.getItemId();
                        var value = field.getValue();
index 5a20d1f..315292e 100644 (file)
@@ -27,8 +27,7 @@
 /*
  * EditorMode Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.EditorMode', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.EditorMode = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
index 515e0d8..86593fb 100644 (file)
@@ -30,8 +30,7 @@
 /*
  * Find and Replace Plugin for TYPO3 htmlArea RTE
  */
-Ext.define('HTMLArea.FindReplace', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.FindReplace = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the class constructor
         */
@@ -117,13 +116,14 @@ Ext.define('HTMLArea.FindReplace', {
         * @return      void
         */
        openDialogue: function (buttonId, title, dimensions) {
-               this.dialog = Ext.create('Ext.window.Window', {
+               this.dialog = new Ext.Window({
                        title: this.localize(title),
                        cls: 'htmlarea-window',
                        border: false,
                        width: dimensions.width,
-                       layout: 'anchor',
-                       resizable: true,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
                        iconCls: this.getButton(buttonId).iconCls,
                        listeners: {
                                close: {
@@ -266,11 +266,11 @@ Ext.define('HTMLArea.FindReplace', {
         * Handler invoked when the replace all checkbox is checked
         */
        requestReplacement: function () {
-               if (!this.dialog.down('component[itemId=replacement]').getValue() && this.dialog.down('component[itemId=replaceAll]').getValue()) {
+               if (!this.dialog.find('itemId', 'replacement')[0].getValue() && this.dialog.find('itemId', 'replaceAll')[0].getValue()) {
                        TYPO3.Dialog.InformationDialog({
                                title: this.getButton('FindReplace').tooltip.title,
                                msg: this.localize('Inform a replacement word'),
-                               fn: function () { this.dialog.down('component[itemId=replacement]').focus(); },
+                               fn: function () { this.dialog.find('itemId', 'replacement')[0].focus(); },
                                scope: this
                        });
                }
@@ -280,11 +280,11 @@ Ext.define('HTMLArea.FindReplace', {
         * Handler invoked when the 'Next' button is pressed
         */
        onNext: function () {
-               if (!this.dialog.down('component[itemId=pattern]').getValue()) {
+               if (!this.dialog.find('itemId', 'pattern')[0].getValue()) {
                        TYPO3.Dialog.InformationDialog({
                                title: this.getButton('FindReplace').tooltip.title,
                                msg: this.localize('Enter the text you want to find'),
-                               fn: function () { this.dialog.down('component[itemId=pattern]').focus(); },
+                               fn: function () { this.dialog.find('itemId', 'pattern')[0].focus(); },
                                scope: this
                        });
                        return false;
@@ -298,7 +298,7 @@ Ext.define('HTMLArea.FindReplace', {
                ];
                var params = {};
                Ext.each(fields, function (field) {
-                       params[field] = this.dialog.down('component[itemId=' + field + ']').getValue();
+                       params[field] = this.dialog.find('itemId', field)[0].getValue();
                }, this);
                this.search(params);
                return false;
@@ -458,8 +458,6 @@ Ext.define('HTMLArea.FindReplace', {
                if (this.buffer != null) {
                        var transp = this.editor.getInnerHTML();
                        this.editor.setHTML(this.buffer);
-                               // Initialize a collapsed selection at the beginning of content
-                       this.editor.selectNode(this.editor.document.body, true);
                        this.buffer = transp;
                        this.disableActions('clear', true);
                }
@@ -472,7 +470,7 @@ Ext.define('HTMLArea.FindReplace', {
         */
        disableActions: function (actions, disabled) {
                Ext.each(actions.split(/[,; ]+/), function (action) {
-                       this.dialog.down('component[itemId=' + action + ']').setDisabled(disabled);
+                               this.dialog.find('itemId', action)[0].setDisabled(disabled);
                }, this);
        },
        /*
@@ -488,25 +486,21 @@ Ext.define('HTMLArea.FindReplace', {
         */
        onCancel: function () {
                this.clearDoc();
-                       // Initialize a collapsed selection at the beginning of content
-               this.editor.selectNode(this.editor.document.body, true);
                var plugin = this.getPluginInstance('UndoRedo');
                if (plugin) {
                        plugin.start();
                }
-               this.callParent(arguments);
+               HTMLArea.FindReplace.superclass.onCancel.call(this);
        },
        /*
         * Clear the document before leaving on window close handle
         */
        onClose: function () {
                this.clearDoc();
-                       // Initialize a collapsed selection at the beginning of content
-               this.editor.selectNode(this.editor.document.body, true);
                var plugin = this.getPluginInstance('UndoRedo');
                if (plugin) {
                        plugin.start();
                }
-               this.callParent(arguments);
+               HTMLArea.FindReplace.superclass.onClose.call(this);
        }
 });
index b5482a9..98b03cb 100644 (file)
@@ -30,8 +30,7 @@
 /*
  * Creation of the class of InlineElements plugins
  */
-Ext.define('HTMLArea.InlineElements', {
-       extend: 'HTMLArea.Plugin',
+HTMLArea.InlineElements = Ext.extend(HTMLArea.Plugin, {
        /*
         * This function gets called by the base constructor
         */
@@ -77,12 +76,11 @@ Ext.define('HTMLArea.InlineElements', {
                        if (this.editorConfiguration.buttons.formattext.width) {
                                dropDownConfiguration.listWidth = parseInt(this.editorConfiguration.buttons.formattext.width, 10);
                        }
-                       dropDownConfiguration.listConfig = {};
                        if (this.editorConfiguration.buttons.formattext.listWidth) {
-                               dropDownConfiguration.listConfig.width = parseInt(this.editorConfiguration.buttons.formattext.listWidth, 10);
+                               dropDownConfiguration.listWidth = parseInt(this.editorConfiguration.buttons.formattext.listWidth, 10);
                        }
                        if (this.editorConfiguration.buttons.formattext.maxHeight) {
-                               dropDownConfiguration.listConfig.maxHeight = parseInt(this.editorConfiguration.buttons.formattext.maxHeight, 10);
+                               dropDownConfiguration.maxHeight = parseInt(this.editorConfiguration.buttons.formattext.maxHeight, 10);
                        }
                }
                this.registerDropDown(dropDownConfiguration);
@@ -408,15 +406,15 @@ E