[CLOSED] ReadOnly property in HtmlEditor

[methode]

Hi all,

in some cases it does not make sense, but I need it.
ReadOnly property doesn't work in HtmlEditor.

Matteo

[geoffrey.mcgill]

Hi Matteo,

How about the following override file, see*http://extjs.com/forum/showthread.php?t=26657

[methode]

Hi Geoff,

thanx for the link, the code works but I still have a problem, hope you can help with this.
My HtmlEditor has fixed height, masking the editor to make it ReadOnly masks also the scroll bar in case I have long text.
This is my code:

....

//after ScriptManager tag

<script type="text/javascript">


        Ext.override(Ext.form.HtmlEditor, {
            /**
            * Set a readonly mask over the editor
            * @param {Boolean} readOnly - True to set the read only property, False to switch to the editor
            */
            setReadOnly: function(readOnly)
            {
                if (readOnly)
                {
                    this.syncValue();
                    var roMask = this.wrap.mask();
                    roMask.dom.style.filter = "alpha(opacity=20);"; //IE
                    roMask.dom.style.opacity = "0.2"; //Mozilla
                    roMask.dom.style.background = "white";
                    roMask.dom.innerHTML = this.getValue();
                    roMask.dom.style.height = "300px";
                    roMask.dom.style.overflow = "scroll";
                    this.el.dom.readOnly = true;
                }
                else
                {
                    if (this.rendered) this.wrap.unmask();
                    this.el.dom.readOnly = false;
                }
            }
        });
    
    </script>

then in the page

...

<ext:HtmlEditor ID="HtmlEditor2" Width="784px" Height="300px" ReadOnly="true" FieldLabel="Anteprima"
                                    LabelStyle="padding-left:8px;font-weight:bold" EnableViewState="true" runat="server"
                                    StyleSpec="margin:0px 0px 0px 4px;">
                                        <Listeners>
                                            <Render Handler="this.setReadOnly(true);" />
                                        </Listeners>
                                    </ext:HtmlEditor>

If you load long text inside editor, you'll see also scrollbar is disabled, I need it active.

Thanx

Matteo

[methode]

Hi all,

can you help with this?

Thanx

Matteo

[geoffrey.mcgill]

Hi Matteo,

At the moment we do not have a solution. It's a difficult problem to solve (or, at least there are no obvious solution to me right now). I'll have to do some more research into the problem and try to come up with some other ideas.

[methode]

Hi Geoff,

ok thanx.

I'll deeply investigate and let you know.

Matteo

[methode]

post error

matteo

[methode]

post error

Matteo

[methode]

Hi Geoff,

I partially solved issue, setting also width in the overrider script.
I said partially because I had to set opacity to its minimun value: 0.

If you increase the value you'll get the ugly effect shown in picture attached.
Should work fine if people don't necessarly need to set opacity.

Width and height must be set according to the area of your own editor.

Here it is my code:

<ext:ScriptManager ID="ScriptManager1" Theme="Slate" runat="server">
    </ext:ScriptManager>
    
    <script type="text/javascript">


        Ext.override(Ext.form.HtmlEditor, {
            /**
            * Set a readonly mask over the editor
            * @param {Boolean} readOnly - True to set the read only property, False to switch to the editor
            */
            setReadOnly: function(readOnly)
            {
                if (readOnly)
                {
                    this.syncValue();
                    var roMask = this.wrap.mask();
                    roMask.dom.style.filter = "alpha(opacity=0);"; //IE
                    roMask.dom.style.opacity = "0.0"; //Mozilla
                    roMask.dom.style.background = "white";
                    roMask.dom.innerHTML = this.getValue();
                    roMask.dom.style.width = "487px";
                    roMask.dom.style.height = "302px";
                    this.el.dom.readOnly = true;
                }
                else
                {
                    if (this.rendered) this.wrap.unmask();
                    this.el.dom.readOnly = false;
                }
            }
        });
    
    </script>

<ext:HtmlEditor ID="HtmlEditor1" runat="server" EnableSourceEdit="false"
    Text=" insert lot of text here to enable scrollbar ">
        <Listeners>
            <Render Handler="this.setReadOnly(true);" />
        </Listeners>
    </ext:HtmlEditor>

Thanx

Matteo

[jlertle]

I haven't tested it but this looks cleaner:

http://forums.ext.net/showthread.php?1567#post8088