Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    96
    Vote Rating
    1
    Nam is on a distinguished road

      0  

    Default [FIXED-92][3.0.0/2.x] HtmlEditor readOnly and disabled not working

    [FIXED-92][3.0.0/2.x] HtmlEditor readOnly and disabled not working


    I originally posted a thread into the Help forum, but it has been suggested that I post it here...

    If I add the config options (which are listed in the docs) "readOnly: true" and "disabled: true" nothing actually happens. The content is still editable, and it's not disabled. Example code is posted in the following link to the other thread...

    http://extjs.com/forum/showthread.php?p=125101

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could use the following workaround for enable/disable:

    Code:
    Ext.override(Ext.form.HtmlEditor, {
    	onDisable: function(){
    		if(this.rendered){
    			this.wrap.mask();
    		}
    		Ext.form.HtmlEditor.superclass.onDisable.call(this);
    	},
    	onEnable: function(){
    		if(this.rendered){
    			this.wrap.unmask();
    		}
    		Ext.form.HtmlEditor.superclass.onEnable.call(this);
    	}
    });

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    96
    Vote Rating
    1
    Nam is on a distinguished road

      0  

    Default


    awesome, what about the readOnly part though? I want someone to be able to view the contents and scroll, just not edit the content.

    Thanks

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    96
    Vote Rating
    1
    Nam is on a distinguished road

      0  

    Default


    anyone know a workaround to make the htmleditor field readonly?

  5. #5
    Ext User
    Join Date
    Dec 2007
    Location
    Aguascalientes, Ags.
    Posts
    37
    Vote Rating
    0
    ortizSWF is on a distinguished road

      0  

    Thumbs up htmleditor readOnly (setReadOnly(true|false))

    htmleditor readOnly (setReadOnly(true|false))


    I did something like this, but i dont know if this could help you as well.

    Code:
    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=100);"; //IE
    			roMask.dom.style.opacity = "1"; //Mozilla
    			roMask.dom.style.background = "white";
    			roMask.dom.style.overflow = "scroll";
    			roMask.dom.innerHTML = this.getValue();
    			this.el.dom.readOnly = true;
    		} else {
    			if(this.rendered){
    				this.wrap.unmask();
    			}
    			this.el.dom.readOnly = false;
    		}
    	}
    });
    Also you need to add this in onRender method:

    Code:
    this.setReadOnly(this.readOnly);
    Complete:

    Code:
       // private
        onRender : function(ct, position){
            Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
            this.el.dom.style.border = '0 none';
            this.el.dom.setAttribute('tabIndex', -1);
            this.el.addClass('x-hidden');
            if(Ext.isIE){ // fix IE 1px bogus margin
                this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
            }
            this.wrap = this.el.wrap({
                cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
            });
    
            this.createToolbar(this);
    
            this.tb.items.each(function(item){
               if(item.itemId != 'sourceedit'){
                    item.disable();
                }
            });
    
            var iframe = document.createElement('iframe');
            iframe.name = Ext.id();
            iframe.frameBorder = 'no';
    
            iframe.src=(Ext.SSL_SECURE_URL || "javascript:false");
    
            this.wrap.dom.appendChild(iframe);
    
            this.iframe = iframe;
    
            if(Ext.isIE){
                iframe.contentWindow.document.designMode = 'on';
                this.doc = iframe.contentWindow.document;
                this.win = iframe.contentWindow;
            } else {
                this.doc = (iframe.contentDocument || window.frames[iframe.name].document);
                this.win = window.frames[iframe.name];
                this.doc.designMode = 'on';
            }
            this.doc.open();
            this.doc.write(this.getDocMarkup())
            this.doc.close();
    
            var task = { // must defer to wait for browser to be ready
                run : function(){
                    if(this.doc.body || this.doc.readyState == 'complete'){
                        Ext.TaskMgr.stop(task);
                        this.doc.designMode="on";
                        this.initEditor.defer(10, this);
                    }
                },
                interval : 10,
                duration:10000,
                scope: this
            };
            Ext.TaskMgr.start(task);
    
            if(!this.width){
                this.setSize(this.el.getSize());
            }
    
    		this.setReadOnly(this.readOnly);
    
        }
    all Code:

    Code:
    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=100);"; //IE
    			roMask.dom.style.opacity = "1"; //Mozilla
    			roMask.dom.style.background = "white";
    			roMask.dom.style.overflow = "scroll";
    			roMask.dom.innerHTML = this.getValue();
    			this.el.dom.readOnly = true;
    		} else {
    			if(this.rendered){
    				this.wrap.unmask();
    			}
    			this.el.dom.readOnly = false;
    		}
    	},
       // private
        onRender : function(ct, position){
            Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
            this.el.dom.style.border = '0 none';
            this.el.dom.setAttribute('tabIndex', -1);
            this.el.addClass('x-hidden');
            if(Ext.isIE){ // fix IE 1px bogus margin
                this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
            }
            this.wrap = this.el.wrap({
                cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
            });
    
            this.createToolbar(this);
    
            this.tb.items.each(function(item){
               if(item.itemId != 'sourceedit'){
                    item.disable();
                }
            });
    
            var iframe = document.createElement('iframe');
            iframe.name = Ext.id();
            iframe.frameBorder = 'no';
    
            iframe.src=(Ext.SSL_SECURE_URL || "javascript:false");
    
            this.wrap.dom.appendChild(iframe);
    
            this.iframe = iframe;
    
            if(Ext.isIE){
                iframe.contentWindow.document.designMode = 'on';
                this.doc = iframe.contentWindow.document;
                this.win = iframe.contentWindow;
            } else {
                this.doc = (iframe.contentDocument || window.frames[iframe.name].document);
                this.win = window.frames[iframe.name];
                this.doc.designMode = 'on';
            }
            this.doc.open();
            this.doc.write(this.getDocMarkup())
            this.doc.close();
    
            var task = { // must defer to wait for browser to be ready
                run : function(){
                    if(this.doc.body || this.doc.readyState == 'complete'){
                        Ext.TaskMgr.stop(task);
                        this.doc.designMode="on";
                        this.initEditor.defer(10, this);
                    }
                },
                interval : 10,
                duration:10000,
                scope: this
            };
            Ext.TaskMgr.start(task);
    
            if(!this.width){
                this.setSize(this.el.getSize());
            }
    
    		this.setReadOnly(this.readOnly);
    
        }
    });
    Example:
    JS:
    Code:
    Ext.onReady(function(){
    
    Ext.QuickTips.init();
    
    var html = '<h4>An Ordered List:</h4><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><br><br>' + 
    		'<h4>With a normal border:</h4><table border="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>With a thick border:</h4><table border="8"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>With a very thick border:</h4><table border="15"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table>' +
    		'<br><br><p>An image from W3Schools:<img src="http://www.w3schools.com/images/ie.gif"></p>';
    
    Editor = new Ext.form.HtmlEditor({
        id:'edi',
        fieldLabel:'Biography',
    	width: 500,
    	readOnly: true,
    	height: 250,
        anchor:'98%',
    	value: html
    });
    
    var top = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items: [Editor],
            buttons: [{
                text: 'Enable',
    			handler: function(){
    				Editor.setReadOnly(false);
    			}
            },{
                text: 'Disable',
    			handler: function(){
    				Editor.setReadOnly(true);
    			}
            }]
        });
    
    
    top.render(document.body);
    
    });
    PD: You could have problems with the CSS... This could help me at its moment

    Greetings...
    </war>

  6. #6
    Sencha User queej's Avatar
    Join Date
    Aug 2008
    Location
    Ithaca, NY
    Posts
    144
    Vote Rating
    0
    queej is on a distinguished road

      0  

    Thumbs up Wonderful!

    Wonderful!


    This works great. Thank you for the complete example!
    Tripping the light fantastic.

  7. #7
    Sencha User queej's Avatar
    Join Date
    Aug 2008
    Location
    Ithaca, NY
    Posts
    144
    Vote Rating
    0
    queej is on a distinguished road

      0  

    Default


    As mentioned above, it does have a problem with falling back to the CSS of the page, which is ext-all.css. Therefore, it loses all bullets, etc. Is there anyway to tweak the above solution and still preserve the isolation of styles from the ext-all.css?
    Tripping the light fantastic.

  8. #8
    Sencha User queej's Avatar
    Join Date
    Aug 2008
    Location
    Ithaca, NY
    Posts
    144
    Vote Rating
    0
    queej is on a distinguished road

      0  

    Smile Tweaked Solution Above

    Tweaked Solution Above


    Tweaked the above example so that it would not use the innerHTML, which inherits the ext-all.js styles, and changed the opacity of the mask to allow the actual editor text to be seen. Then I hide the toolbar. This provides a reasonable non-edit mode.

    Code:
                       roMask.dom.style.filter = "alpha(opacity=0);"; //IE
                       roMask.dom.style.opacity = "0"; //Mozilla
                       roMask.dom.style.background = "white";
                       roMask.dom.style.overflow = "scroll";
                       //roMask.dom.innerHTML = this.getValue();  // removed
    Hope this is useful to someone else who wants to disable the htmleditor.
    Tripping the light fantastic.

  9. #9
    Sencha User
    Join Date
    Sep 2007
    Posts
    14
    Vote Rating
    0
    NepalPro is on a distinguished road

      0  

    Thumbs up Very useful ...

    Very useful ...


    Very useful ...

  10. #10
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    UPDATE:
    nevermind, you just have to remove

    Code:
            if(!this.width){
                this.setSize(this.el.getSize());
            }
    works great, but when I define the height - it's not taking that parameter anymore.

    do you maybe have a fix for that?

    cheers,
    squarefan