Hello!
I am trying to copy the character count bottom bar from https://examples1.ext.net/#/Toolbar/StatusBar/Overview/, but looks like a js error is showing up.
Can you guys have a look, please?
Thanks
Hello!
I am trying to copy the character count bottom bar from https://examples1.ext.net/#/Toolbar/StatusBar/Overview/, but looks like a js error is showing up.
Can you guys have a look, please?
Thanks
Hi,
Thank you for the report.
To fix please replace 'el' with 'this' in KeyDown listener.
Code:<KeyDown
Handler="var v = this.getValue(),
No problemo. I was trying to add the statusbar to the htmleditor, but I just found out, htmleditors dont have top or bottom bars.
Thanks, please, mark as solved.
Well, there is another problem. StatusBar you could place anywhere.
I can provide you with the example which almost works good:) But I would recommend you to give up this idea - HtmlEditor is rather specific control and depends on browser. Something is not under us control, so, implementing this feature can take a lot of development time with no success.
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Width="800" Layout="FitLayout">
<Items>
<ext:HtmlEditor runat="server" EscapeValue="false">
<Listeners>
<Initialize Handler="var fn = function () {
var v = this.getValue(),
wc = 0, cc = v.length ? v.length : 0;
if (cc > 0) {
wc = v.match(/\b/g);
wc = wc ? wc.length / 2 : 0;
}
#{wordCount}.setText('Words: ' + wc);
#{charCount}.setText('Chars: ' + cc);
};
fn = fn.createDelegate(this);
Ext.EventManager.on(this.getDoc(), {
keyup : fn
});
this.setValue('');" />
</Listeners>
</ext:HtmlEditor>
</Items>
<BottomBar>
<ext:StatusBar runat="server" DefaultText="Ready">
<Items>
<ext:ToolbarFill runat="server" />
<ext:ToolbarTextItem ID="wordCount" runat="server" Text="Words: 0" />
<ext:ToolbarSeparator runat="server" />
<ext:ToolbarTextItem ID="charCount" runat="server" Text="Chars: 0" />
</Items>
</ext:StatusBar>
</BottomBar>
</ext:Panel>
</form>
</body>
</html>