1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    17
    Answers
    2
    Vote Rating
    0
    Anver is on a distinguished road

      0  

    Default Answered: HtmlEditor in IE8 rendering problem

    Answered: HtmlEditor in IE8 rendering problem


    Hi guys!

    I've defined HtmlEditor with special plug-in in my panel that way:
    Code:
    //HtmlEditor's plug-in definition
    Ext.ns('Ext.ux.form.HtmlEditor');
    Ext.ux.form.HtmlEditor.IMG = Ext.extend(Ext.util.Observable, {
        init: function (cmp)
        {
            this.cmp = cmp;
            Suprema.distribution.htmlEditor = this.cmp;
            this.cmp.on('render', this.onRender, this);
        },
        onRender: function ()
        {
            this.cmp.getToolbar().add(['-', {
                icon: '<html:rewrite page="/img/distributions/add_image.gif"/>',
                handler: function ()
                {
                    Suprema.distribution.fileUploader = Ext.create('Ext.form.Panel', {
                        title: 'Добавление изображения',
                        width: 400,
                        bodyPadding: 10,
                        frame: true,
                        renderTo: 'warning_holder',
                        items: [
                            {
                                xtype: 'filefield',
                                name: 'photo',
                                hideLabel: true,
                                labelWidth: 50,
                                msgTarget: 'side',
                                allowBlank: false,
                                anchor: '100%',
                                buttonText: 'Выберите файл с изображением...'
                            }
                        ],
    
    
                        buttons: [
                            {
                                text: 'Добавить',
                                handler: function ()
                                {
                                    var form = this.up('form').getForm();
                                    if (form.isValid())
                                    {
                                        form.submit({
                                            url: '<html:rewrite action="/distribution/creation/image/store"/>',
                                            waitMsg: 'Добавление изображения...',
                                            success: function (form, action)
                                            {
                                                var hostAddress = document.location.protocol + "//" + document.location.host;
                                                Suprema.distribution.htmlEditor.insertAtCursor('<img src="' + hostAddress + action.result.imageUrl + '" alt="[image]"></img>');
                                                Suprema.distribution.fileUploader.destroy();
                                            }
                                        });
                                    }
                                }
                            }
                        ]
                    });
                },
                scope: this
            }])
        }
    });
    //HtmlEditor definition
    {
                xtype: 'htmleditor',
                id: Suprema.distribution.messageEditorId,
                width: parseInt(panelWidth),
                height: 300,
                plugins: [new Ext.ux.form.HtmlEditor.IMG()]
            }
    And in google chrome or firefox it renders well, but in IE8 I have following error: "Unsupported ext-all-debug.js line 19910 symbol 21". When I go yo the specified file, to the line - I have following block of code:
    Code:
    // NOTE: CSS expressions are resource intensive and to be used only as a last resort
                    // These expressions are removed as soon as they are no longer necessary - in the unmask method.
                    // In normal use cases an element will be masked for a limited period of time.
                    // Fix for https://sencha.jira.com/browse/EXTJSIV-19.
                    // IE6 strict mode and IE6-9 quirks mode takes off left+right padding when calculating width!
                    if (!Ext.supports.IncludePaddingInWidthCalculation && setExpression) {
                        mask.dom.style.setExpression('width', 'this.parentNode.offsetWidth + "px"');
                    }
    This is a part of " mask : function(msg, msgCls)" function of "Ext.core.Element.addMethods". Can you help me?

    Google Chrome's screenshot:
    Chrome_screen.gif
    Internet Explorer 8 screenshot:
    IE8_screen.gif
    Last edited by Anver; 13 Dec 2012 at 11:54 PM. Reason: Screenshots were added

  2. Thank you for the reply!
    I'm used extjs 4.0. I've figured that the big problem is on that string "mask.dom.style.setExpression()" - setExpression function is not available in IE8. So, I've resolved my issue by starting using 4.1 version.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,218
    Answers
    3519
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What Ext JS 4.x.x version are you using?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    17
    Answers
    2
    Vote Rating
    0
    Anver is on a distinguished road

      0  

    Default


    Thank you for the reply!
    I'm used extjs 4.0. I've figured that the big problem is on that string "mask.dom.style.setExpression()" - setExpression function is not available in IE8. So, I've resolved my issue by starting using 4.1 version.

Thread Participants: 1

Tags for this Thread