Aug 27, 2015, 3:53 PM
[CLOSED] HtmlEditor issue: stylizing
Hi,
This is related to http://forums.ext.net/showthread.php...d=1#post274443. Applying a custom styling rule to stylize an HtmlEditor control as in v1.7 doesn't work as expected. The test case below shows how the rule affects the label only. I presume the HtmEditor control now features more style related attributes that can be used alone or in combination to achieve the desired effect. Please explain how to use them properly.
This is related to http://forums.ext.net/showthread.php...d=1#post274443. Applying a custom styling rule to stylize an HtmlEditor control as in v1.7 doesn't work as expected. The test case below shows how the rule affects the label only. I presume the HtmEditor control now features more style related attributes that can be used alone or in combination to achieve the desired effect. Please explain how to use them properly.
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
HtmlEditor1.Text = "Some text goes here...";
}
}
</script>
<style>
.x-theme-blue .read-only-htmleditor {
color: #696969;
border-width: 1px;
border-style: double;
border-color: #C6CBDA;
background-color: #F2F6FB;
width: 100%;
}
.read-only-htmleditor .x-html-editor-input {
border-top-width: 1px;
}
</style>
<script type="text/javascript">
var onDocumentReady = function () {
App.TextArea1.setVisible(false);
App.HtmlEditor1.addCls('read-only-htmleditor');
App.HtmlEditor1.getToolbar().hide();
App.HtmlEditor1.setAnchor("100% -50", true);
};
var showHide = function () {
if (App.TextArea1.hidden) {
App.TextArea1.setVisible(true);
App.HtmlEditor1.setAnchor("100% -255", true);
}
else {
App.TextArea1.setVisible(false);
App.HtmlEditor1.setAnchor("100% -50", true);
}
};
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>HtmlEditor - Ext.NET Examples</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Fn="onDocumentReady"></DocumentReady>
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:FormPanel runat="server" Padding="10" ButtonAlign="Left" Frame="false" Border="true">
<Items>
<ext:ToolbarSpacer Height="5"></ext:ToolbarSpacer>
<ext:TextArea ID="TextArea1" runat="server" AutoScroll="true"
AnchorHorizontal="100%" FieldLabel="My Notes" Height="200" MaxWidth="685"
SubmitValue="false" EnableKeyEvents="true" AllowBlank="false">
</ext:TextArea>
<ext:HtmlEditor
ID="HtmlEditor1"
runat="server"
AutoScroll="true"
AnchorHorizontal="100%" FieldLabel="Notes" MaxWidth="685" Cls="read-only-htmleditor"
SubmitValue="false" EnableKeyEvents="true" ReadOnly="true">
</ext:HtmlEditor>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Toggle">
<Listeners>
<Click Fn="showHide"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:FormPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Sep 01, 2015 at 4:48 PM.
Reason: [CLOSED]