What's New?

[CLOSED] HtmlEditor Mask with Scrollbars?

  1. #1
    Jan 16, 2012, 12:03 PM

    [CLOSED] HtmlEditor Mask with Scrollbars?

    Hi,

    I'm trying to achieve the effect that an HtmlEditor is disabled (masked in grey), but I still need the scrollbars to be functional, as the user should still be able to read all the text in the panel - just not make any changes. I want it to be very visible that it's read-only, hence why I would like to use the disabled mask over the control.

    Is there a way to do this?

    Thanks.
    Last edited by geoffrey.mcgill; Jan 18, 2012 at 7:39 AM. Reason: [CLOSED]
  2. #2
    Jan 16, 2012, 2:50 PM
    Hi,

    I can't see any way to enable scrollbars of disabled HtmlEditor.

    I can suggest to use the ReadOnly property or the setReadOnly method.
    HtmlEditor.setReadOnly(true);
    It disables a toolbar and makes an HtmlEditor not editable.

    Though, there is a disadvantage, it doesn't look so read only. I can suggest to resolve it via CSS.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var onInitialize = function () {
            this.defaultBackground = Ext.fly(this.getEditorBody()).getStyles("background-image", "background-color");
        };

        var setReadOnly = function (editor, readOnly) {
            var styles = readOnly ? "background-image: none; background-color: gray;" :
                                    editor.defaultBackground;
            editor.setReadOnly(readOnly);
            Ext.get(editor.getEditorBody()).applyStyles(styles);
        };
    </script>

    <style type="text/css">
        .my-disabled {
            background-image: none !important;
            background-color: red !important;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:HtmlEditor 
            ID="HtmlEditor1" 
            runat="server" 
            Width="200" 
            Height="200">
            <Listeners>
                <Initialize Fn="onInitialize" Delay="100" />
            </Listeners>    
        </ext:HtmlEditor>
        <ext:Button runat="server" Text="Set readOnly to true">
            <Listeners>
                <Click Handler="setReadOnly(HtmlEditor1, true);" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Set readOnly to false">
            <Listeners>
                <Click Handler="setReadOnly(HtmlEditor1, false);" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] HTMLEditor and scrollbars
    By krzak in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 28, 2011, 1:15 PM
  2. [CLOSED] AutoHeight gridpanel and scrollbars
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 22, 2010, 5:06 PM
  3. [CLOSED] How do I fix these scrollbars?
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 22, 2010, 1:48 PM
  4. [CLOSED] GridPanel vertical scrollbars
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 14, 2009, 7:07 PM
  5. [CLOSED] GridPanel scrollbars
    By danielg in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 21, 2009, 1:01 AM

Tags for this Thread

Posting Permissions