|
|
|
Rank: Member
Groups: Registered
Joined: 3/24/2014
Posts: 4
|
Hello, I’m new to this forum and we are in process of evaluating this tool on one of my project and if someone implemented this tool for Ext-JS textarea component, could you please share sample code with me My textarea is very simple in side "Ext.form.Panel" items: [{ xtype:'textarea', fieldLabel: 'Project Description', name: 'project_description', anchor:'96%', listeners: { render: function(){ alert("Hello"); } } }] Will really appreciate if you can share some sample code how to implement for EXTJS textarea component… I saw some sample for RSCustomInterface but not very clear one this. Thanks -Srini Srini
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 8/13/2004
Posts: 2,669
Location: Canada
|
Hi Srini, we have a project for MVC that uses ExtJS's rich text editor - is that suitable? It was setup like this Code:
Ext.form.HtmlEditor.SpellCheck = Ext.extend(Ext.util.Observable, {
spellCheckerID: '',
init: function (cmp) {
this.cmp = cmp;
this.cmp.on("render", this.onRender,this);
},
onRender: function () {
//$Spelling.SpellCheckAsYouType(this.cmp);
rsw_recalculateOverlayPosition = false;
rsw_adjustOffsetSizeForStrict = false;
this.cmp.getToolbar().add({
iconCls: "x-edit-spellcheck",
pressed: false,
handler: function () {
rapidSpell.setParameterValue('default', "IgnoreXML", 'true');
rapidSpell.ayt_spellCheck(this.cmp.iframeEl.id, this);
spellDiv = document.getElementById(this.cmp.iframeEl.id + "_D");
spellDiv.style.padding = "3px";
spellDiv.style.width = (2 + parseInt(spellDiv.style.width.substring(0, spellDiv.style.width.length - 2))) + "px"
spellDiv.style.height = (-17 + parseInt(spellDiv.style.height.substring(0, spellDiv.style.height.length - 2))) + "px"
spellDiv.style.marginTop = "3px";
spellDiv.style.marginLeft = "2px";
},
scope: this,
tooltip: {
text: "<b>Spell Check</b><br/>Checks the spelling mistakes in the document"
},
overflowText: "Spell Check"
})
}
});
With the standard script import <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js" type="text/javascript"></script> Please let me know what your environment is - I assume it's .NET? Jim -your feedback is helpful to other users, thank you!-your feedback is helpful to other users, thank you!
|
|
|
|
Rank: Member
Groups: Registered
Joined: 3/24/2014
Posts: 4
|
Hello Jim, Thank you for your quick response and this is something like for HTML editor which is not working in my case and my case is very simple textarea created using Ext-JS. I want to enable both "Model dialog" and "As You Type" features My application environment is J2EE along with Ext-JS MVC model. As long as if you have some working sample either in J2EE or .Net web it doesn’t matter for me I can integrate in my app. In My application all UI components are created using EXT-JS, if you have some working sample that will be really great or maybe you can guide me how to do this? This is bit urgent for my project and appreciate your help! Thanks -Srini quote:
Originally posted by Jim
Hi Srini, we have a project for MVC that uses ExtJS's rich text editor - is that suitable?
It was setup like this
Code:
Ext.form.HtmlEditor.SpellCheck = Ext.extend(Ext.util.Observable, {
spellCheckerID: '',
init: function (cmp) {
this.cmp = cmp;
this.cmp.on("render", this.onRender,this);
},
onRender: function () {
//$Spelling.SpellCheckAsYouType(this.cmp);
rsw_recalculateOverlayPosition = false;
rsw_adjustOffsetSizeForStrict = false;
this.cmp.getToolbar().add({
iconCls: "x-edit-spellcheck",
pressed: false,
handler: function () {
rapidSpell.setParameterValue('default', "IgnoreXML", 'true');
rapidSpell.ayt_spellCheck(this.cmp.iframeEl.id, this);
spellDiv = document.getElementById(this.cmp.iframeEl.id + "_D");
spellDiv.style.padding = "3px";
spellDiv.style.width = (2 + parseInt(spellDiv.style.width.substring(0, spellDiv.style.width.length - 2))) + "px"
spellDiv.style.height = (-17 + parseInt(spellDiv.style.height.substring(0, spellDiv.style.height.length - 2))) + "px"
spellDiv.style.marginTop = "3px";
spellDiv.style.marginLeft = "2px";
},
scope: this,
tooltip: {
text: "<b>Spell Check</b><br/>Checks the spelling mistakes in the document"
},
overflowText: "Spell Check"
})
}
});
With the standard script import
<script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js" type="text/javascript"></script>
Please let me know what your environment is - I assume it's .NET?
Jim
-your feedback is helpful to other users, thank you!
Srini
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 8/13/2004
Posts: 2,669
Location: Canada
|
Sorry, as you type isn't going to work with ExtJS and even a regular textarea, it seems something is going on under the covers with ExtJS that is not compatible with what we do to the textarea. Static underlining would probably work (where the user presses a button and the underlines appear in the textarea which also becomes read only until the button is pressed again) - would you like info on that? You can do dialog check very easily app.jsCode:
/*global Ext:false */
Ext.onReady(function() {
Ext.create('Ext.form.FormPanel', {
title: 'Sample TextArea',
width: 400,
bodyPadding: 10,
renderTo: 'panel',
items: [{
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%'
}]
});
});
index.htmlCode:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Ext.form.field.TextArea Example</title> <link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/> <script src="a.rapidspellweb?t=r&n=RapidSpell-DIALOG.js"></script> <script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script> <script src="app.js"></script> </head> <body> <form> <div id='panel'> </div> </form> <input type="button" onclick="rapidSpell.dialog_spellCheck()" value="Spell"/> </body> </html> (This assumes you've setup the web.xml per our installation section in the Help). http://keyoti.com/produc...on%20&%20Deployment.htm
Note it's important that the textarea is added to something inside of a <form>. Best Jim -your feedback is helpful to other users, thank you!-your feedback is helpful to other users, thank you!
|
|
|
