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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar