Index: typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js (révision 8943) +++ typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js (copie de travail) @@ -1423,424 +1423,6 @@ } }); 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 - *

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.

- *

-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
-
- * @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: - *

-// 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']
-    })
-});
-
- */ - /** - * @cfg {String} defaultText - * The default {@link #text} value. This will be used anytime the status bar is cleared with the - * useDefaults:true 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 useDefaults:true option (defaults to ''). - */ - /** - * @cfg {String} text - * A string that will be initially 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 {@link #defaultText} - * will be used. - */ - /** - * @cfg {String} iconCls - * A CSS class that will be initially set as the status bar icon and is - * expected to provide a background image (defaults to ''). - * Example usage:

-// 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'
-});
-
- */ - - /** - * @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 {@link #iconCls} applied when calling - * {@link #showBusy} (defaults to 'x-status-busy'). - * It can be overridden at any time by passing the iconCls - * argument into {@link #showBusy}. - */ - busyIconCls : 'x-status-busy', - /** - * @cfg {String} busyText - * The default {@link #text} applied when calling - * {@link #showBusy} (defaults to 'Loading...'). - * It can be overridden at any time by passing the text - * argument into {@link #showBusy}. - */ - busyText : 'Loading...', - /** - * @cfg {Number} autoClear - * The number of milliseconds to wait after setting the status via - * {@link #setStatus} before automatically clearing the status - * text and icon (defaults to 5000). Note that this only applies - * when passing the clear argument to {@link #setStatus} - * since that is the only way to defer clearing the status. This can - * be overridden by specifying a different wait value in - * {@link #setStatus}. Calls to {@link #clearStatus} - * 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 - * ' '). If there are no other items in the toolbar using - * an empty string ('') for this value would end up in the toolbar - * height collapsing since the empty string will not maintain the toolbar - * height. Use '' if the toolbar should collapse in height - * vertically when no text is specified and there are no other items in - * the toolbar. - */ - emptyText : ' ', - - // 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: - * Example usage:

-// 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
-    }
-});
-
- * @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: - * @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 - * text and/or iconCls 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: typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js (révision 8942) +++ typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js (copie de travail) @@ -362,22 +362,24 @@ ] } ], - 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 @@ '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 @@ } }, /* + * 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 @@ // 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 @@ 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 @@ 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') + ' "' + this.currentElement.htmlareaOriginalWord + '" ' + txt2, - iconCls: 'status-info', - clear: false - }); + this.status.setText(txt + ' ' + this.localize('of the word') + ' "' + this.currentElement.htmlareaOriginalWord + '" ' + txt2); + this.setStatusIconClass('status-info'); // Update suggestions var suggestions = this.suggestedWords[this.currentElement.htmlareaOriginalWord]; if (suggestions) { @@ -784,14 +794,11 @@ 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: typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css (révision 8941) +++ typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css (copie de travail) @@ -396,39 +396,38 @@ 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: typo3/sysext/t3skin/rtehtmlarea/htmlarea.css =================================================================== --- typo3/sysext/t3skin/rtehtmlarea/htmlarea.css (révision 8941) +++ typo3/sysext/t3skin/rtehtmlarea/htmlarea.css (copie de travail) @@ -401,39 +401,38 @@ 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 */