Added feature #15884: htmlArea RTE: Remove class Ext.ux.StatusBar
authorStanislas Rolland <typo3@sjbr.ca>
Mon, 4 Oct 2010 01:27:41 +0000 (01:27 +0000)
committerStanislas Rolland <typo3@sjbr.ca>
Mon, 4 Oct 2010 01:27:41 +0000 (01:27 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@8944 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/rtehtmlarea/ChangeLog
typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js
typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index 18c9b4a..05683dc 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2010-10-03  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #15884: htmlArea RTE: Remove class Ext.ux.StatusBar
+
 2010-10-02  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Added feature #15879: htmlArea RTE: Use TYPO3 ExtJS API for RTE notification dialogues
index f18a637..a35a6c5 100644 (file)
@@ -1,3 +1,7 @@
+2010-10-03  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #15884: htmlArea RTE: Remove class Ext.ux.StatusBar
+
 2010-10-02  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Added feature #15879: htmlArea RTE: Use TYPO3 ExtJS API for RTE notification dialogues
index 142ff7d..e4fd513 100644 (file)
@@ -1423,424 +1423,6 @@ HTMLArea.Iframe = Ext.extend(Ext.BoxComponent, {
        }
 });
 Ext.reg('htmlareaiframe', HTMLArea.Iframe);
-/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**
- * @class Ext.ux.StatusBar
- * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
- * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
- * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
- * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.</p>
- * <pre><code>
-new Ext.Panel({
-    title: 'StatusBar',
-    // etc.
-    bbar: new Ext.ux.StatusBar({
-        id: 'my-status',
-
-        // defaults to use when the status is cleared:
-        defaultText: 'Default status text',
-        defaultIconCls: 'default-icon',
-
-        // values to set initially:
-        text: 'Ready',
-        iconCls: 'ready-icon',
-
-        // any standard Toolbar items:
-        items: [{
-            text: 'A Button'
-        }, '-', 'Plain Text']
-    })
-});
-
-// Update the status bar later in code:
-var sb = Ext.getCmp('my-status');
-sb.setStatus({
-    text: 'OK',
-    iconCls: 'ok-icon',
-    clear: true // auto-clear after a set interval
-});
-
-// Set the status bar to show that something is processing:
-sb.showBusy();
-
-// processing....
-
-sb.clearStatus(); // once completeed
-</code></pre>
- * @extends Ext.Toolbar
- * @constructor
- * Creates a new StatusBar
- * @param {Object/Array} config A config object
- */
-Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
-    /**
-     * @cfg {String} statusAlign
-     * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
-     * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
-     * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
-     * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
-     * expand to take up all sapce left over by any other items.  Example usage:
-     * <pre><code>
-// Create a left-aligned status bar containing a button,
-// separator and text item that will be right-aligned (default):
-new Ext.Panel({
-    title: 'StatusBar',
-    // etc.
-    bbar: new Ext.ux.StatusBar({
-        defaultText: 'Default status text',
-        id: 'status-id',
-        items: [{
-            text: 'A Button'
-        }, '-', 'Plain Text']
-    })
-});
-
-// By adding the statusAlign config, this will create the
-// exact same toolbar, except the status and toolbar item
-// layout will be reversed from the previous example:
-new Ext.Panel({
-    title: 'StatusBar',
-    // etc.
-    bbar: new Ext.ux.StatusBar({
-        defaultText: 'Default status text',
-        id: 'status-id',
-        statusAlign: 'right',
-        items: [{
-            text: 'A Button'
-        }, '-', 'Plain Text']
-    })
-});
-</code></pre>
-     */
-    /**
-     * @cfg {String} defaultText
-     * The default {@link #text} value.  This will be used anytime the status bar is cleared with the
-     * <tt>useDefaults:true</tt> option (defaults to '').
-     */
-    /**
-     * @cfg {String} defaultIconCls
-     * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
-     * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
-     */
-    /**
-     * @cfg {String} text
-     * A string that will be <b>initially</b> set as the status message.  This string
-     * will be set as innerHTML (html tags are accepted) for the toolbar item.
-     * If not specified, the value set for <code>{@link #defaultText}</code>
-     * will be used.
-     */
-    /**
-     * @cfg {String} iconCls
-     * A CSS class that will be <b>initially</b> set as the status bar icon and is
-     * expected to provide a background image (defaults to '').
-     * Example usage:<pre><code>
-// Example CSS rule:
-.x-statusbar .x-status-custom {
-    padding-left: 25px;
-    background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
-}
-
-// Setting a default icon:
-var sb = new Ext.ux.StatusBar({
-    defaultIconCls: 'x-status-custom'
-});
-
-// Changing the icon:
-sb.setStatus({
-    text: 'New status',
-    iconCls: 'x-status-custom'
-});
-</code></pre>
-     */
-
-    /**
-     * @cfg {String} cls
-     * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
-     */
-    cls : 'x-statusbar',
-    /**
-     * @cfg {String} busyIconCls
-     * The default <code>{@link #iconCls}</code> applied when calling
-     * <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
-     * It can be overridden at any time by passing the <code>iconCls</code>
-     * argument into <code>{@link #showBusy}</code>.
-     */
-    busyIconCls : 'x-status-busy',
-    /**
-     * @cfg {String} busyText
-     * The default <code>{@link #text}</code> applied when calling
-     * <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
-     * It can be overridden at any time by passing the <code>text</code>
-     * argument into <code>{@link #showBusy}</code>.
-     */
-    busyText : 'Loading...',
-    /**
-     * @cfg {Number} autoClear
-     * The number of milliseconds to wait after setting the status via
-     * <code>{@link #setStatus}</code> before automatically clearing the status
-     * text and icon (defaults to <tt>5000</tt>).  Note that this only applies
-     * when passing the <tt>clear</tt> argument to <code>{@link #setStatus}</code>
-     * since that is the only way to defer clearing the status.  This can
-     * be overridden by specifying a different <tt>wait</tt> value in
-     * <code>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
-     * always clear the status bar immediately and ignore this value.
-     */
-    autoClear : 5000,
-
-    /**
-     * @cfg {String} emptyText
-     * The text string to use if no text has been set.  Defaults to
-     * <tt>'&nbsp;'</tt>).  If there are no other items in the toolbar using
-     * an empty string (<tt>''</tt>) for this value would end up in the toolbar
-     * height collapsing since the empty string will not maintain the toolbar
-     * height.  Use <tt>''</tt> if the toolbar should collapse in height
-     * vertically when no text is specified and there are no other items in
-     * the toolbar.
-     */
-    emptyText : '&nbsp;',
-
-    // private
-    activeThreadId : 0,
-
-    // private
-    initComponent : function(){
-        if(this.statusAlign=='right'){
-            this.cls += ' x-status-right';
-        }
-        Ext.ux.StatusBar.superclass.initComponent.call(this);
-    },
-
-    // private
-    afterRender : function(){
-        Ext.ux.StatusBar.superclass.afterRender.call(this);
-
-        var right = this.statusAlign == 'right';
-        this.currIconCls = this.iconCls || this.defaultIconCls;
-        this.statusEl = new Ext.Toolbar.TextItem({
-            cls: 'x-status-text ' + (this.currIconCls || ''),
-            text: this.text || this.defaultText || ''
-        });
-
-        if(right){
-            this.add('->');
-            this.add(this.statusEl);
-        }else{
-            this.insert(0, this.statusEl);
-            this.insert(1, '->');
-        }
-        this.doLayout();
-    },
-
-    /**
-     * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
-     * status that was set after a specified interval.
-     * @param {Object/String} config A config object specifying what status to set, or a string assumed
-     * to be the status text (and all other options are defaulted as explained below). A config
-     * object containing any or all of the following properties can be passed:<ul>
-     * <li><tt>text</tt> {String} : (optional) The status text to display.  If not specified, any current
-     * status text will remain unchanged.</li>
-     * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
-     * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
-     * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
-     * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
-     * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
-     * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
-     * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
-     * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
-     * All other options will be defaulted as with the boolean option.  To customize any other options,
-     * you can pass an object in the format:<ul>
-     *    <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
-     *    (defaults to {@link #autoClear}).</li>
-     *    <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
-     *    executes (defaults to true which fades the status out).</li>
-     *    <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
-     *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
-     * </ul></li></ul>
-     * Example usage:<pre><code>
-// Simple call to update the text
-statusBar.setStatus('New status');
-
-// Set the status and icon, auto-clearing with default options:
-statusBar.setStatus({
-    text: 'New status',
-    iconCls: 'x-status-custom',
-    clear: true
-});
-
-// Auto-clear with custom options:
-statusBar.setStatus({
-    text: 'New status',
-    iconCls: 'x-status-custom',
-    clear: {
-        wait: 8000,
-        anim: false,
-        useDefaults: false
-    }
-});
-</code></pre>
-     * @return {Ext.ux.StatusBar} this
-     */
-    setStatus : function(o){
-        o = o || {};
-
-        if(typeof o == 'string'){
-            o = {text:o};
-        }
-        if(o.text !== undefined){
-            this.setText(o.text);
-        }
-        if(o.iconCls !== undefined){
-            this.setIcon(o.iconCls);
-        }
-
-        if(o.clear){
-            var c = o.clear,
-                wait = this.autoClear,
-                defaults = {useDefaults: true, anim: true};
-
-            if(typeof c == 'object'){
-                c = Ext.applyIf(c, defaults);
-                if(c.wait){
-                    wait = c.wait;
-                }
-            }else if(typeof c == 'number'){
-                wait = c;
-                c = defaults;
-            }else if(typeof c == 'boolean'){
-                c = defaults;
-            }
-
-            c.threadId = this.activeThreadId;
-            this.clearStatus.defer(wait, this, [c]);
-        }
-        return this;
-    },
-
-    /**
-     * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
-     * @param {Object} config (optional) A config object containing any or all of the following properties.  If this
-     * object is not specified the status will be cleared using the defaults below:<ul>
-     * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
-     * to false which clears immediately).</li>
-     * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
-     * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
-     * </ul>
-     * @return {Ext.ux.StatusBar} this
-     */
-    clearStatus : function(o){
-        o = o || {};
-
-        if(o.threadId && o.threadId !== this.activeThreadId){
-            // this means the current call was made internally, but a newer
-            // thread has set a message since this call was deferred.  Since
-            // we don't want to overwrite a newer message just ignore.
-            return this;
-        }
-
-        var text = o.useDefaults ? this.defaultText : this.emptyText,
-            iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
-
-        if(o.anim){
-            // animate the statusEl Ext.Element
-            this.statusEl.el.fadeOut({
-                remove: false,
-                useDisplay: true,
-                scope: this,
-                callback: function(){
-                    this.setStatus({
-                           text: text,
-                           iconCls: iconCls
-                       });
-
-                    this.statusEl.el.show();
-                }
-            });
-        }else{
-            // hide/show the el to avoid jumpy text or icon
-            this.statusEl.hide();
-               this.setStatus({
-                   text: text,
-                   iconCls: iconCls
-               });
-            this.statusEl.show();
-        }
-        return this;
-    },
-
-    /**
-     * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.
-     * @param {String} text (optional) The text to set (defaults to '')
-     * @return {Ext.ux.StatusBar} this
-     */
-    setText : function(text){
-        this.activeThreadId++;
-        this.text = text || '';
-        if(this.rendered){
-            this.statusEl.setText(this.text);
-        }
-        return this;
-    },
-
-    /**
-     * Returns the current status text.
-     * @return {String} The status text
-     */
-    getText : function(){
-        return this.text;
-    },
-
-    /**
-     * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.
-     * See {@link #iconCls} for complete details about customizing the icon.
-     * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
-     * @return {Ext.ux.StatusBar} this
-     */
-    setIcon : function(cls){
-        this.activeThreadId++;
-        cls = cls || '';
-
-        if(this.rendered){
-               if(this.currIconCls){
-                   this.statusEl.removeClass(this.currIconCls);
-                   this.currIconCls = null;
-               }
-               if(cls.length > 0){
-                   this.statusEl.addClass(cls);
-                   this.currIconCls = cls;
-               }
-        }else{
-            this.currIconCls = cls;
-        }
-        return this;
-    },
-
-    /**
-     * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
-     * a "busy" state, usually for loading or processing activities.
-     * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
-     * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
-     * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
-     * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
-     * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
-     * @return {Ext.ux.StatusBar} this
-     */
-    showBusy : function(o){
-        if(typeof o == 'string'){
-            o = {text:o};
-        }
-        o = Ext.applyIf(o || {}, {
-            text: this.busyText,
-            iconCls: this.busyIconCls
-        });
-        return this.setStatus(o);
-    }
-});
-Ext.reg('statusbar', Ext.ux.StatusBar);
 /*
  * HTMLArea.StatusBar extends Ext.Container
  */
index 9f70284..ff9de2e 100644 (file)
@@ -362,22 +362,24 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                                        ]
                                }
                        ],
-                       bbar: new Ext.ux.StatusBar({
-                               id: this.editor.editorId + '-spell-check-status',
-                               defaultText: this.localize('statusBarReady'),
-                               defaultIconCls: 'status-ready',
-                               text: this.localize('Please wait. Calling spell checker.'),
-                               iconCls: 'status-wait',
+                       bbar: {
                                defaults: {
-                                       minWidth: 100,
                                        disabled: true
                                },
                                items: [
+                                       {
+                                               xtype: 'tbtext',
+                                               itemId: 'spell-check-status',
+                                               text: this.localize('Please wait. Calling spell checker.'),
+                                               cls: 'status-wait',
+                                               disabled: false
+                                       },
+                                       '->',
                                        this.buildButtonConfig('OK', this.onOK),
                                        this.buildButtonConfig('Info', this.onInfoClick),
                                        this.buildButtonConfig('Cancel', this.onCancel)
                                ]
-                       })
+                       }
                });
                this.show();
        },
@@ -397,6 +399,8 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                        'accept-charset': this.contentCharset.toUpperCase()
                });
                this.dialog.getComponent('spell-check-form').getForm().submit();
+               this.status = this.dialog.getBottomToolbar().getComponent('spell-check-status');
+               this.statusIconClass = 'status-wait';
        },
        /*
         * Handler invoked after the window is resized
@@ -457,6 +461,18 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                }
        },
        /*
+        * Set icon in statusbar
+        *
+        * @param       string          iconCls: class to be assigned to the statusbar text
+        *
+        * @return      void
+        */
+       setStatusIconClass: function (iconCls) {
+               this.status.removeClass(this.statusIconClass);
+               this.statusIconClass = iconCls;
+               this.status.addClass(this.statusIconClass);
+       },
+       /*
         * Clean away span elements from the text before leaving or re-submitting
         *
         * @param       boolean         leaveFixed: if true, span elements of corrected words will be left in the text (re-submit case)
@@ -499,11 +515,8 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                        // Suggested words
                this.suggestedWords = contentWindow.suggestedWords;
                        // Set status
-               Ext.getCmp(this.editor.editorId + '-spell-check-status').setStatus({
-                   text: this.localize('statusBarReady'),
-                   iconCls: 'status-ready',
-                   clear: false
-               });
+               this.status.setText(this.localize('statusBarReady'));
+               this.setStatusIconClass('status-ready');
                        // Process all misspelled words
                var id = 0;
                var self = this;
@@ -532,7 +545,7 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                Ext.each(this.dialog.findByType('button'), function (button) {
                        button.setDisabled(false);
                });
-               Ext.each(Ext.getCmp(this.editor.editorId + '-spell-check-status').findByType('button'), function (button) {
+               Ext.each(this.dialog.getBottomToolbar().findByType('button'), function (button) {
                        button.setDisabled(false);
                });
                if (this.misspelledWords.length) {
@@ -640,11 +653,8 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                        txt = occurrences.length + ' ' + this.localize('occurrences');
                        txt2 = this.localize('were found.');
                }
-               Ext.getCmp(this.editor.editorId + '-spell-check-status').setStatus({
-                       text: txt + ' ' + this.localize('of the word') + ' "<b>' + this.currentElement.htmlareaOriginalWord + '</b>" ' + txt2,
-                       iconCls: 'status-info',
-                       clear: false
-               });
+               this.status.setText(txt + ' ' + this.localize('of the word') + ' "<b>' + this.currentElement.htmlareaOriginalWord + '</b>" ' + txt2);
+               this.setStatusIconClass('status-info');
                        // Update suggestions
                var suggestions = this.suggestedWords[this.currentElement.htmlareaOriginalWord];
                if (suggestions) {
@@ -784,14 +794,11 @@ HTMLArea.SpellChecker = HTMLArea.Plugin.extend({
                Ext.each(this.dialog.findByType('button'), function (button) {
                        button.setDisabled(true);
                });
-               Ext.each(Ext.getCmp(this.editor.editorId + '-spell-check-status').findByType('button'), function (button) {
+               Ext.each(this.dialog.getBottomToolbar().findByType('button'), function (button) {
                        button.setDisabled(true);
                });
-               Ext.getCmp(this.editor.editorId + '-spell-check-status').setStatus({
-                       text: this.localize('Please wait: changing dictionary to') + ': "' + this.dialog.find('itemId', 'dictionary')[0].getValue() + '".',
-                       iconCls: 'status-wait',
-                       clear: false
-               });
+               this.status.setText(this.localize('Please wait: changing dictionary to') + ': "' + this.dialog.find('itemId', 'dictionary')[0].getValue() + '".');
+               this.setStatusIconClass('status-wait');
                this.dialog.find('itemId', 'content')[0].setValue(this.cleanDocument(true));
                this.dialog.getComponent('spell-check-form').getForm().submit();
        },
index 58d2c4a..0dff624 100644 (file)
@@ -396,39 +396,38 @@ body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
        background-image:url("images/loading-balls.gif");
        background-position: 0px 6px;
 }
-.x-statusbar .x-btn {
+.htmlarea-window .x-toolbar .x-btn {
        margin-left: 5px;
 }
-.x-statusbar .x-status-text {
-    cursor: default;
+.htmlarea-window .x-toolbar .xtb-text {
+       cursor: default;
 }
-
 /* Button background positioning in window status bar*/
-.x-statusbar .x-btn-tl{
+.htmlarea-window .x-toolbar .x-btn-tl{
        background-position: 0 0;
 }
-.x-statusbar .x-btn-tr{
+.htmlarea-window .x-toolbar .x-btn-tr{
        background-position: -3px 0;
 }
-.x-statusbar .x-btn-tc{
+.htmlarea-window .x-toolbar .x-btn-tc{
        background-position: 0 -6px;
 }
-.x-statusbar .x-btn-ml{
+.htmlarea-window .x-toolbar .x-btn-ml{
        background-position: 0 -24px;
 }
-.x-statusbar .x-btn-mr{
+.htmlarea-window .x-toolbar .x-btn-mr{
        background-position: -3px -24px;
 }
-.x-statusbar .x-btn-mc{
+.htmlarea-window .x-toolbar .x-btn-mc{
        background-position: 0 -1096px;
 }
-.x-statusbar .x-btn-bl{
+.htmlarea-window .x-toolbar .x-btn-bl{
        background-position: 0 -3px;
 }
-.x-statusbar .x-btn-br{
+.htmlarea-window .x-toolbar .x-btn-br{
        background-position: -3px -3px;
 }
-.x-statusbar .x-btn-bc{
+.htmlarea-window .x-toolbar .x-btn-bc{
        background-position: 0 -15px;
 }
 /* Action icon selectors for toolbar, context menu and window headers */
index 72aede3..13c85fa 100644 (file)
@@ -401,39 +401,38 @@ body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
        background-image: url("images/status/loading-balls.gif");
        background-position: 0px 6px;
 }
-.x-statusbar .x-btn {
+.htmlarea-window .x-toolbar .x-btn {
        margin-left: 5px;
 }
-.x-statusbar .x-status-text {
-    cursor: default;
+.htmlarea-window .x-toolbar .xtb-text {
+       cursor: default;
 }
-
 /* Button background positioning in window status bar*/
-.x-statusbar .x-btn-tl{
+.htmlarea-window .x-toolbar .x-btn-tl{
        background-position: 0 0;
 }
-.x-statusbar .x-btn-tr{
+.htmlarea-window .x-toolbar .x-btn-tr{
        background-position: -3px 0;
 }
-.x-statusbar .x-btn-tc{
+.htmlarea-window .x-toolbar .x-btn-tc{
        background-position: 0 -6px;
 }
-.x-statusbar .x-btn-ml{
+.htmlarea-window .x-toolbar .x-btn-ml{
        background-position: 0 -24px;
 }
-.x-statusbar .x-btn-mr{
+.htmlarea-window .x-toolbar .x-btn-mr{
        background-position: -3px -24px;
 }
-.x-statusbar .x-btn-mc{
+.htmlarea-window .x-toolbar .x-btn-mc{
        background-position: 0 -1096px;
 }
-.x-statusbar .x-btn-bl{
+.htmlarea-window .x-toolbar .x-btn-bl{
        background-position: 0 -3px;
 }
-.x-statusbar .x-btn-br{
+.htmlarea-window .x-toolbar .x-btn-br{
        background-position: -3px -3px;
 }
-.x-statusbar .x-btn-bc{
+.htmlarea-window .x-toolbar .x-btn-bc{
        background-position: 0 -15px;
 }
 /* Action icon selectors for toolbar, context menu and window headers */