PDA

View Full Version : HtmlEditor in IE8 rendering problem



Anver
13 Dec 2012, 6:23 AM
Hi guys!

I've defined HtmlEditor with special plug-in in my panel that way:


//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:


// 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:
40813
Internet Explorer 8 screenshot:
40814

mitchellsimoens
15 Dec 2012, 7:39 AM
What Ext JS 4.x.x version are you using?

Anver
15 Dec 2012, 1:20 PM
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.