PDA

View Full Version : [CLOSED] HTML Editor Cursor



RCM
Sep 20, 2012, 7:05 AM
hi.

How do i get the location of the cursor in the HTML editor. I tried using the textareaEl but that does not have the values. any ideas.

Daniil
Sep 20, 2012, 6:04 PM
Hi,

Will the insertAtCursor method suite your needs?
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.HtmlEditor-method-insertAtCursor

RCM
Sep 20, 2012, 6:20 PM
Hi,

Yes that method works for me but with a hitch. I am inserting some text in the htmleditor on double click of a gridpanel row. The text gets inserted but the cursors moves to beginning of the editor instead of staying infront of the input text. see image below. is there a way to force the cursor to end of text in the editor.

4810

Daniil
Sep 20, 2012, 6:32 PM
Please clarify do you just need to add a new text at the end, i.e. append?

RCM
Sep 20, 2012, 6:50 PM
hi,

I am using the
insertAtCursorAt method to insert some text at the current cursor location, the text gets inserted as expected but the cursor moves to the start of the editor (index 0) instead of staying ahead of the inserted text.

Daniil
Sep 20, 2012, 7:59 PM
Thank you for clarification.

But I am unable to reproduce. Tested with FireFox.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server">
<Listeners>
<Select Handler="App.HtmlEditor1.insertAtCursor(Ext.String.format(' the #{0} row is selected ', index));" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>

<ext:HtmlEditor ID="HtmlEditor1" runat="server" />
</body>
</html>

RCM
Sep 20, 2012, 8:17 PM
Hi,

The issue seem to be related to MVC. See sample below



View

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
<script src="/Scripts/Exporter.js" type="text/javascript"></script>
<style type="text/css">
.x-grid-row-over .x-grid-cell-inner {
font-weight : bold;
}

.red {background-color:red !Important;}

.blue {background-color: Aqua !Important;}
</style>

<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>

<form id="form1" class="x-hidden"></form>

<ext:ResourceManager runat="server" />

<h1>Simple Array Grid</h1>

<ext:Viewport Layout ="border" runat ="server">
<Defaults>

</Defaults>
<Items>
<ext:GridPanel IDMode ="Static" ID ="gridPanelCompanyInformation" runat="server" Region ="North" Title="Array Grid" Width="600" Height="350">
<TopBar>
<ext:Toolbar runat ="server">
<Items>
<ext:Button Text ="Export" runat ="server">
<Listeners>
<Click Handler="Exporter.ShowModal()" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<Listeners>
<ViewReady Handler ="Exporter.Initialize();" />
<%--<CellClick Fn = "Exporter.GetTableViewCellClicked" />--%>
<ItemDblClick Handler="App.HtmlEditor1.insertAtCursor(Ext.String.format(' the #{0} row is selected ', index));" />
</Listeners>
</ext:GridPanel>

<ext:HtmlEditor ID="HtmlEditor1" runat="server" Region="Center" Height="100" />
</Items>
</ext:Viewport>
</body>
</html>



Controller



public class ExporterController : Controller
{
//
// GET: /Exporter/

public ActionResult Index()
{
return View();
}

public ActionResult ExportToExcel(string Xml)
{
XslCompiledTransform transform = new XslCompiledTransform();
var submitData = new Ext.Net.SubmitHandler(Xml);
XmlNode xmlNode = submitData.Xml;
byte[] resultFileContent = System.Text.Encoding.UTF8.GetBytes(xmlNode.OuterXm l);
string contentType = string.Empty;


var s = new StringBuilder();
var settings = new XmlWriterSettings()
{
ConformanceLevel = ConformanceLevel.Auto
};
FileContentResult result = null;

contentType = "application/vnd.ms-excel";
transform.Load(Server.MapPath("/content/Excel.xsl"));

MemoryStream m = new MemoryStream(resultFileContent);
XPathDocument xpathDoc = new XPathDocument(new StreamReader(m));
StringBuilder resultString = new StringBuilder();
XmlWriter writer = XmlWriter.Create(resultString);
transform.Transform(xpathDoc, writer);
resultFileContent = Encoding.UTF8.GetBytes(resultString.ToString());
result = new FileContentResult(resultFileContent, contentType);
result.FileDownloadName = "Temp.xls";
return result;
return result;
}


public ActionResult ModalWindow()
{
Ext.Net.MVC.PartialViewResult partialViewResult = new Ext.Net.MVC.PartialViewResult();
partialViewResult.RenderMode = RenderMode.RenderTo;
partialViewResult.Model = new ExportWorkitemsWindowModel();
partialViewResult.SingleControl = true;
partialViewResult.ViewName = "ModalWindow";
return partialViewResult;
}

}


Javascritpt File


Exporter = {


Initialize: function () {
var data = new Array();
var item = { company: "Company1", price: 4852, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 4852, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 45345, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 64554, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 4852, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 6654, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 9006, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 1234, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 6456, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 5357, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 8723, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);
item = { company: "Company1", price: 6672, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
data.push(item);

App.gridPanelCompanyInformation.store.loadData(dat a);
},

Export: function () {

Ext.net.DirectEvent.request({
url: '/Exporter/ExportToExcel',
type: "submit",
isUpload: true,
formId: Ext.fly('form1'), // form1 is id of existing html form
cleanRequest: true,
success: function (result) {
alert(result);
},
failure: function (result, request) {
alert(result);
},
extraParams:
{
Xml: Ext.encode(App.gridPanelCompanyInformation.getRows Values())
}
});

},

GetTableViewCellClicked: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var column = grid.headerCt.getHeaderAtIndex(cellIndex);
//column.metaData.style = "background-color:grey";
grid.refresh();
var value = record.get(column.dataIndex);
},

ShowModal: function () {
Ext.net.DirectEvent.request({
url: '/Exporter/ModalWindow',
type: "load",
cleanRequest: true,
extraParams:
{
}
});


}


}


verify the behaviour of the cursor.

RCM
Sep 20, 2012, 8:21 PM
It works in firefox but not IE 9.

Daniil
Sep 21, 2012, 8:49 AM
Unfortunately, it is IE behavior. It doesn't maintain a cursor position in such scenario.

I am afraid we can't change this behavior.

RCM
Sep 22, 2012, 12:17 AM
hi,

Thanks Danil, will just put that down as a known issue.