Jan 04, 2011, 9:06 PM
[CLOSED] Direct event parameter html value problem
Hi, When I push Button_ApplyChanges button, Button_ApplyChanges_Click javascript function works but, Ext.net.DirectMethods.Button_ApplyChanges_Click(ht ml); this code doesn't fire. And, As I understand that, if html variable takes from FCKeditor such as <b>Hello world</b> value. Event doesn't fire. But, if I change the value as directly Hello World. At that time, Event fires. So, problem is html variable has html syntax. and direct event doesn't fire. how can I set html value to direct event parameter.
function Button_ApplyChanges_Click() {
var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
var pnl = Ext.getCmp(Hidden_PanelName.getValue());
var FCKeditor1 = FCKeditorAPI.GetInstance('FCKeditor1');
var html = FCKeditor1.GetHTML();
//Problem is here
Ext.net.DirectMethods.Button_ApplyChanges_Click(html);
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace WebApplication9
{
public partial class WebForm2 : System.Web.UI.Page
{
private void ChangeMode(string mode)
{
foreach (Ext.Net.Cell item in TableLayout1.Cells)
{
Ext.Net.Container cnt = item.Items[0] as Ext.Net.Container;
Ext.Net.Panel pnl = cnt.Items[0] as Ext.Net.Panel;
bool header = true;
bool border = true;
if (mode == "DesignMode")
{
//pnl.AddScript(pnl.ClientID + ".header.show();");
//pnl.AddScript(pnl.ClientID + ".removeClass('no-border');");
header = true;
border = true;
}
else if (mode == "ViewMode")
{
//pnl.AddScript(pnl.ClientID + ".header.hide();");
//pnl.AddScript(pnl.ClientID + ".addClass('no-border');");
header = false;
border = false;
}
X.Js.Call("setBorder", new JRawValue(pnl.ClientID), header, border);
}
}
[DirectMethod]
public void Button_DesignMode_Click()
{
ChangeMode("DesignMode");
}
[DirectMethod]
public void Button_ViewMode_Click()
{
ChangeMode("ViewMode");
}
[DirectMethod]
public void Button_ApplyChanges_Click(string html)
{
string containerName = Hidden_ContainerName.Text;
string panelName = Hidden_PanelName.Text;
Ext.Net.Container cnt = Page.FindControl(containerName) as Ext.Net.Container;
Ext.Net.Panel pnl = Page.FindControl(panelName) as Ext.Net.Panel;
cnt.Width = int.Parse(NumberField_Width.Text);
cnt.Height = int.Parse(NumberField_Height.Text);
pnl.LoadContent(TextField_Url.Text);
pnl.Html = html;
}
[DirectMethod]
public void ShowWindow()
{
Window1.Show();
}
protected void Page_Load(object sender, EventArgs e)
{
Container[] panels = new Container[] { this.Container1, this.Container2, this.Container3 };
foreach (Container region in panels)
{
Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];
p.DraggableConfig.Group = "panelDD";
p.DraggableConfig.StartDrag.Fn = "startDrag";
p.DraggableConfig.EndDrag.Fn = "endDrag";
}
}
}
}
---------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication9.WebForm2" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<%@ 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></title>
<style type="text/css">
.invite {
background-color: #99bbe8 !important;
}
.x-drop-marker {
background-color: silver;
}
.no-border .x-panel-body {
border: 0;
}
</style>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
<script type="text/javascript">
var notifyDrop = function (source, e, data) {
var targetCt = Ext.getCmp(this.el.dom.id);
var targetPanel = targetCt.items.get(0);
var sourceCt = data.panel.ownerCt;
sourceCt.add(targetPanel);
targetCt.add(data.panel);
targetCt.doLayout.defer(10, targetCt);
sourceCt.doLayout.defer(10, sourceCt);
};
var startDrag = function () {
Ext.select(".dropable").addClass("x-drop-marker");
Ext.select(".draggable").hide();
};
var endDrag = function () {
Ext.select(".dropable").removeClass("x-drop-marker");
Ext.select(".draggable").show();
};
function setBorder(panel, useBorder, useHeader) {
var method = useBorder ? "removeClass" : "addClass";
panel.el[method](panel.baseCls + '-noborder');
panel.body[method](panel.bodyCls + '-noborder');
if (panel.header) {
panel.header[method](panel.headerCls + '-noborder');
panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
}
if (panel.footer) {
panel.footer[method](panel.footerCls + '-noborder');
}
if (panel.tbar) {
panel.tbar[method](panel.tbarCls + '-noborder');
}
if (panel.bbar) {
panel.bbar[method](panel.bbarCls + '-noborder');
}
}
function Button_DesignMode_Click() {
Ext.net.DirectMethods.Button_DesignMode_Click();
}
function Button_ViewMode_Click() {
Ext.net.DirectMethods.Button_ViewMode_Click();
}
function ShowWindow(container, panel) {
var Hidden_ContainerName = Ext.getCmp('<%= Hidden_ContainerName.ClientID %>');
var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
Hidden_ContainerName.setValue(container.id);
Hidden_PanelName.setValue(panel.id);
Ext.net.DirectMethods.ShowWindow();
}
function Button_ApplyChanges_Click() {
var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
var pnl = Ext.getCmp(Hidden_PanelName.getValue());
var FCKeditor1 = FCKeditorAPI.GetInstance('FCKeditor1');
var html = FCKeditor1.GetHTML();
//Problem is here
Ext.net.DirectMethods.Button_ApplyChanges_Click(html);
}
</script>
</ext:ResourcePlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Hidden ID="Hidden_ContainerName" runat="server">
</ext:Hidden>
<ext:Hidden ID="Hidden_PanelName" runat="server">
</ext:Hidden>
<ext:Hidden ID="Hidden_HTML" runat="server">
</ext:Hidden>
<ext:Window ID="Window1" runat="server" Collapsible="true" Height="530" Icon="Application"
Title="Title" Width="950" Padding="10" Hidden="true" Frame="true" Modal="true">
<Items>
<ext:NumberField ID="NumberField_Width" runat="server" FieldLabel="Width" MinValue="0" MaxValue="1000">
</ext:NumberField>
<ext:NumberField ID="NumberField_Height" runat="server" FieldLabel="Height" MinValue="0" MaxValue="1000">
</ext:NumberField>
<ext:TextField ID="TextField_Url" runat="server" FieldLabel="Url">
</ext:TextField>
<ext:Panel ID="Panel2" runat="server" Height="400" Layout="Fit" FieldLabel="HTML">
<Content>
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Height="398" BasePath="/FCKeditor/" Value="" HtmlEncodeOutput="true" EnableXHTML="true">
</FCKeditorV2:FCKeditor>
</Content>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="Button_ApplyChanges" runat="server" Text="Apply Changes">
<Listeners>
<Click Handler="Button_ApplyChanges_Click();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="Panel1" runat="server" Height="50" Region="North" Header="false" Border="false">
<Items>
<ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
<Listeners>
<Click Handler="Button_DesignMode_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
<Listeners>
<Click Handler="Button_ViewMode_Click();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel9" runat="server" Layout="Fit" Region="Center" Title="Center" AutoScroll="true">
<Items>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
<Cells>
<ext:Cell>
<ext:Container ID="Container1" runat="server" Cls="dropable" Layout="Fit" Width="200" Height="200">
<Items>
<ext:Panel ID="pnl1" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;" Title="Panel 1" >
<Tools>
<ext:Tool Type="Gear" Handler="ShowWindow(#{Container1},#{pnl1});" />
</Tools>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
<ext:Cell>
<ext:Container ID="Container2" runat="server" Cls="dropable" Layout="Fit" Width="200" Height="200">
<Items>
<ext:Panel ID="pnl2" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;" Title="Panel 2">
<Tools>
<ext:Tool Type="Gear" Handler="ShowWindow(#{Container2},#{pnl2});" />
</Tools>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:Container ID="Container3" runat="server" Cls="dropable" Layout="Fit" Width="400" Height="200">
<Items>
<ext:Panel ID="pnl3" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px" Title="Panel 3">
<AutoLoad Url="http://www.google.com"></AutoLoad>
<Tools>
<ext:Tool Type="Gear" Handler="ShowWindow(#{Container3},#{pnl3});" />
</Tools>
</ext:Panel>
</Items>
</ext:Container>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:DropTarget ID="DropTarget1" runat="server" Target="${.dropable}" Group="panelDD" OverClass="invite">
<NotifyDrop Fn="notifyDrop" />
<NotifyOut Handler="this.el.removeClass('invite');" />
<NotifyOver Handler="Ext.select('.dropable').removeClass('invite'); this.el.addClass('invite');" />
</ext:DropTarget>
<ext:Resizable ID="Resizable1"
runat="server"
Element="={#{Container1}.el}"
Transparent="true">
<Listeners>
<Resize Handler="#{Container1}.el.setStyle({width:'', height:''}); #{Container1}.setSize(width, height);" />
</Listeners>
</ext:Resizable>
<ext:Resizable ID="Resizable2"
runat="server"
Element="={#{Container2}.el}"
Transparent="true">
<Listeners>
<Resize Handler="#{Container2}.el.setStyle({width:'', height:''}); #{Container2}.setSize(width, height);" />
</Listeners>
</ext:Resizable>
<ext:Resizable ID="Resizable3"
runat="server"
Element="={#{Container3}.el}"
Transparent="true">
<Listeners>
<Resize Handler="#{Container3}.el.setStyle({width:'', height:''}); #{Container3}.setSize(width, height);" />
</Listeners>
</ext:Resizable>
</form>
</body>
</html>
Last edited by Daniil; Jan 05, 2011 at 3:15 PM.
Reason: [CLOSED]