Printable View
There is a bug in the HTML editor in IE 9 and IE 10. In your example, you get this odd looking box that you can resize when you click on the editor control. This editor works fine in Chrome and Firefox. Is there a workaround for this?
Attachment 6725
Hello!
Thank you for the report! We are investigating.
Hi everybody,
The problem appears to be in UseHtml="true" setting. This setting means that the Editor takes a bound element's HTML (in our case - it's a Panel's body), not just its text content. IE interprets that HTML in such a quirky way. Here is a test case to reproduce.
Example
As a solution I can suggest to replace:Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
Ext.Editor.override({
startEdit: function (el, value) {
if (!Ext.isDefined(value)) {
this.completeEdit();
this.boundEl = Ext.get(el);
if (this.useHtml) {
value = this.boundEl.dom.innerHTML; // the problem is here
if (this.htmlEncode) {
value = Ext.util.Format.htmlEncode(value);
}
}
else {
value = Ext.String.trim(this.boundEl.dom[Ext.isGecko ? "textContent" : "innerText"]);
}
}
this.callParent([el, value]);
if (this.editing && Ext.isIE) {
this.field.surpressBlur = true;
Ext.defer(function () {
this.field.surpressBlur = false;
this.field.focus();
}, 250, this);
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
ID="Panel1"
runat="server"
Width="610"
Height="300"
Html="Content"
BodyPadding="6"
Title="Editor panel">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Edit"
Icon="Pencil">
<Listeners>
<Click Handler="this.setDisabled(true);#{Button2}.setDisabled(false);#{PanelEditor}.startEdit(#{Panel1}.getBody());" />
</Listeners>
</ext:Button>
<ext:Button
ID="Button2"
runat="server"
Text="Save"
Icon="Disk"
Disabled="true">
<Listeners>
<Click Handler="this.setDisabled(true);#{Button1}.setDisabled(false);#{PanelEditor}.completeEdit();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:Editor
ID="PanelEditor"
runat="server"
HtmlEncode="true"
UseHtml="true"
AutoSize="true"
Alignment="tl-tl?"
AllowBlur="false"
Shadow="False">
<AutoSizeConfig Width="BoundEl" Height="BoundEl" />
<Field>
<ext:HtmlEditor ID="HtmlEditor1" runat="server" />
</Field>
<Listeners>
<StartEdit Handler="this.field.iframeEl.setHeight(this.field.getHeight() - this.field.getToolbar().getHeight() - 4); this.field.textareaEl.setHeight(this.field.getHeight() - this.field.getToolbar().getHeight() - 4);" Delay="10" />
</Listeners>
</ext:Editor>
</form>
</body>
</html>
withCode:#{PanelEditor}.startEdit(#{Panel1}.getBody());
Does it work well for you?Code:#{PanelEditor}.startEdit(#{Panel1}.getBody().down('div'));