IE9: 2 Problems with HtmlEditor

[asol]

Hi!
i have two problems with the HtmlEditor and Internet Explorer 9.

Sometimes when loading a page with an Editor all command buttons seems disabled. When form is submitted all data from editor is lost!
I have the same effects on demopage: http://dev.sencha.com/deploy/dev/exa...m/dynamic.html

popups to select different text colors are not completly visible. A minor problem of course ;-)

Anyone out there with same problems or even have an idea how to handle it?

Thanks!
Andreas

[Chap]

Hi,

I same the same problem with you. On IE9, colorMenu doesn't work in sometime. And the page http://dev.sencha.com/deploy/ext-4.0...m/dynamic.html would see the problem as below step:

1) use the HtmlEditor in Form 3, it works fine.
2) use the HtmlEditor in Form 5, it works fine.
3) use the HtmlEditor in Form 3 again, it doesn't work.

Anyone can help us? Thanks,

[rborg]

yep, I have this problem too. Here is another related post: http://forums.ext.net/showthread.php...tor-Render-Bug

I have had a brief look into this and as per the code below, once the button is clicked a number of times, you see the problem only in ie (Firefox etc. is fine). I am running Win 7 ie9 in IE9 standards mode. The only difference in the two sets of code is the layout. At this stage I gather any other layout that affects the height has a problem. It seems only to work on a layout of "form".

Works:

function TestNew(params) {
    new Ext.Window({
        height: 770,
        width: 650,
        padding: 0,
        id: 'tucnmwin',
        iconCls: 'x-icon-users',
        items: [
               {
                    xtype: 'htmleditor',
                    id: 'tucnm_text',
                    name: 'text',
                    width: 500,
                    height: 200,
                    autoScroll: true,
                    autoHeight: true,
                    enabled: true,
                    listeners: {
                        afterrender  : function( htmleditor ) {
                            //alert('tb rendered');
                            //htmleditor.getToolbar().show();
                        }
                    }
                },
                {xtype: 'button', 
                    handler: function(button, event) {
                        Ext.getCmp('tucnmwin').close();
                    },
                    text: 'Close',
                    tabIndex :99,
                    xtype: 'button'
                }
        ],
        layout: 'form',
        modal: true,
        closable: false,
        title: 'New Win'
    }).show();

}

Fails:

function TestNew(params) {
    new Ext.Window({
        height: 770,
        width: 650,
        padding: 0,
        id: 'tucnmwin',
        iconCls: 'x-icon-users',
        items: [
               {
                    xtype: 'htmleditor',
                    id: 'tucnm_text',
                    name: 'text',
                   anchor: '300, 200',
                    width: 500,
                    height: 200,
                    autoScroll: true,
                    autoHeight: true,
                    enabled: true,
                    listeners: {
                        afterrender  : function( htmleditor ) {
                            //alert('tb rendered');
                            //htmleditor.getToolbar().show();
                        }
                    }
                },
                {xtype: 'button', 
                    handler: function(button, event) {
                        Ext.getCmp('tucnmwin').close();
                    },
                    text: 'Close',
                    tabIndex :99,
                    xtype: 'button'
                }
        ],
        layout: 'anchor',
        modal: true,
        closable: false,
        title: 'New Win'
    }).show();

}

[rborg]

OK,this is a possible solution:

unction doWindow(params)
{
    new Ext.Window({
        height: 770,
        width: 650,
        padding: 0,
        id: 'ucnmwin',
        iconCls: 'x-icon-users',
        items: [
                
                {
                    title: 'here 40',
                    border: true,
                    width: '100%',
                    layout: 'form',
                    flex: 1,
                    items: [
                                {
                                    xtype: 'htmleditor',
                                     anchor: '100% -54',
                                    id: 'tucnm_text',
                                    hideLabel: true,
                                    autoScroll: true,
                                    tabIndex :5,
                                    enabled: true,
                                    listeners: {
                                        afterrender  : function( htmleditor ) {
                                        }
                                    }
                                }
                    ]                    
                },
                {xtype: 'button', 
                    handler: function(button, event) {
                        Ext.getCmp('ucnmwin').close();
                    },
                    text: 'Close 6',
                    tabIndex :99,
                    xtype: 'button'
                }
        
        ],
        layout: 'vbox',
        modal: true,
        closable: false,
        title: 'New Win',
        listeners: {
            afterrender  : function( p ) {
                p.doLayout();
            }
        }
    }).show();


};

[abydal]

The problem seems to occur when the function initEditor is executed too early.
At least a fix that we have stumbled upon is increasing the delay before this function executes.

You can either do it by overriding the function intiFrame in Ext.form.HtmlEditor or by just editing right in the ext-base file.

increasing the delay value on this line

this.initEditor.defer(10, this);

to something like 100, works in our cases at least.

this.initEditor.defer(100, this);

My theory is that browsers with a slow js-engine (ie. IE legacy versions or just slow machines) can in some cases lead to that the function executes too early and messes something up.

[Antjac]

Same issue with IE10,the problem still the same with "this.initEditor.defer(100, this);" and the component is in a form...

Another idea ?

[Antjac]

I give "1000" as Value, until now, i've no problem... wait and see