PDA

View Full Version : [CLOSED] HtmlEditor as a editor issue



hdsoso
Jun 06, 2014, 9:30 AM
hi,i am in trouble with the htmlediot in edtor
1,when pop up the htmleditor, i edit it . the editor can not auto disappear after editing.
2,the htmleditor is out of page.

sample code


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm54.aspx.cs" Inherits="web.qizweb.com.test.WebForm54" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script runat="server">
protected void LoadAnnounce(object sender, StoreReadDataEventArgs e)
{
var ll = new object[]
{
new {id=1,title="aaa",info="bbb",addtime="1992-11-28 12:23:33"},
new {id=2,title="aaa",info="bbb",addtime="1992-11-28 12:23:33"},
new {id=3,title="aaa",info="bbb",addtime="1992-11-28 12:23:33"},
new {id=4,title="aaa",info="bbb",addtime="1992-11-28 12:23:33"},
new {id=5,title="aaa",info="bbb",addtime="1992-11-28 12:23:33"},
new {id=6,title="aaa",info="bbb",addtime="1992-11-28 12:23:33"}
};
e.Total = 6;
s_announce.DataSource = ll;
s_announce.DataBind();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:GridPanel runat="server" Title="公告管理">
<Store>
<ext:Store runat="server" ID="s_announce" OnReadData="LoadAnnounce">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="title"></ext:ModelField>
<ext:ModelField Name="info"></ext:ModelField>
<ext:ModelField Name="addtime"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy></ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:Column runat="server" DataIndex="title" Text="标题">
<Editor>
<ext:TextField runat="server"></ext:TextField>
</Editor>
</ext:Column>

<ext:Column runat="server" DataIndex="info" Text="内容" Flex="1">
<Editor>
<ext:HtmlEditor runat="server"></ext:HtmlEditor>
</Editor>
</ext:Column>
<ext:DateColumn runat="server" DataIndex="addtime" Text="入库时间" Format="yyyy-MM-dd HH:mm:ss" Width="140"></ext:DateColumn>

</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server"></ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi"></ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jun 06, 2014, 1:33 PM
Hi @hdsoso,

Yes, it might be too problematic or just impossible to use an HtmlEditor as a Column's Editor. Mostly, because of the fact that an HtmlEditor uses an iframe.

As a possible solution I can suggest to use a TriggerField in a similar way as it is done in this example.
http://examples2.ext.net/#/Form/TriggerField/Trigger_with_Dialog_Editor/

hdsoso
Jun 06, 2014, 3:41 PM
can place a htmleditor into the window in above example?
could you please provide an example of poping up a window which in it there is a htmleditor when click a cell ,after editing , the htmledtor's text will place into the cell?

Daniil
Jun 06, 2014, 4:11 PM
can place a htmleditor into the window in above example?

Please just put an HtmlEditor into a Window's Items.

hdsoso
Jun 07, 2014, 2:00 AM
Cannot call method 'saveValue' of undefined
12301
setCompany not execute ?
the text of cell can not load to htmleditor's text?


<script>
var triggerClick = function (el, trigger, tag, auto, index) {
switch (tag) {
case "pick":
var w = App.PickWindow;
w.editor = el;
w.autoComplete = auto;

w.show(trigger, function () {
w.layout.setActiveItem(index);
w.layout.activeItem.initValue(w);
});
break;
case "complete":
App.CellEditing1.completeEdit();
break;
}
};
var setCompany = function (w) {
var record = App.CellEditing1.getActiveRecord(),
company = w.editor.getValue();
// rating = record.get("rating");

App.HtmlEditor1.setValue(company);
};

var saveCompany = function (w) {
w.editor.setValue(App.CellEditing1.getValue());
// App.CellEditing1.getActiveRecord().set("rating", App.CompanyRating.getChecked()[0].tag);
};
</script>



<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Window runat="server" ID="PickWindow" Title="内容" Hidden="true" Width="300" Height="250">
<Items>
<ext:Panel runat="server">
<Items>
<ext:HtmlEditor runat="server" ID="HtmlEditor1"></ext:HtmlEditor>
</Items>
<CustomConfig>
<ext:ConfigItem Name="initValue" Value="setCompany" Mode="Raw" />
<ext:ConfigItem Name="saveValue" Value="saveCompany" Mode="Raw" />
</CustomConfig>
</ext:Panel>
</Items>
<Buttons>
<ext:Button runat="server" Text="OK">
<Listeners>
<Click Handler="#{PickWindow}.hide(); #{PickWindow}.layout.activeItem.saveValue(#{PickWi ndow}); if (#{PickWindow}.autoComplete) {#{CellEditing1}.completeEdit();}" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Cancel">
<Listeners>
<Click Handler="#{PickWindow}.hide(); if (#{PickWindow}.autoComplete) {#{CellEditing1}.cancelEdit();}" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>



<ext:Column runat="server" DataIndex="info" Text="内容" Flex="1">
<Editor>
<ext:TriggerField runat="server">
<Triggers>
<ext:FieldTrigger Icon="SimpleEllipsis" Tag="pick" />
<ext:FieldTrigger Icon="SimpleTick" Tag="complete" />
</Triggers>
<Listeners>
<TriggerClick Handler="triggerClick(this, trigger, tag, true, 0);" />
</Listeners>
</ext:TriggerField>
</Editor>
<EditorOptions AllowBlur="false" />
</ext:Column>



<Plugins>
<ext:CellEditing runat="server" ID="CellEditing1">
<DirectEvents>
<Edit OnEvent="EditAnn">
<ExtraParams>
<ext:Parameter Name="title" Value="e.record.data.title" Mode="Raw" />
<ext:Parameter Name="info" Value="e.record.data.info" Mode="Raw" />
<ext:Parameter Name="id" Value="e.record.data.id" Mode="Raw" />
</ExtraParams>
</Edit>
</DirectEvents>
</ext:CellEditing>
</Plugins>

Daniil
Jun 09, 2014, 11:17 AM
Please provide a full test case.