Jan 06, 2012, 8:52 AM
Dynamic generation page and dynamic change generated the content of a web page
this is my code:
I want to enter the Htmlcode and preview, like enter "<DIV class=InputField>this is test</DIV>" in TextArea, And then by dragging the tree node change content of preview pages, But always not success, please help me!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Style.aspx.cs" Inherits="EGS_2010.Manages.Pms_Template.Style" %>
<%@ 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>
<script type="text/javascript">
var Global = parent.Global;
var StyleHandle = {
InitTextAreaHeight: function () {
var height = StyleForm.getInnerHeight() - 40;
CssArea.setHeight(Math.round(height * 0.3));
StyleArea.setHeight(Math.round(height * 0.7));
},
ActivateEvent: function () {
//Ext.util.CSS.createStyleSheet(CssArea.getValue(), "CssRule");
Ext.net.ResourceMgr.registerCssClass('CssRule', CssArea.getValue(), false);
//HtmlPanel.addClass("CustomStyle");
//HtmlPanel.baseCls = "CustomStyle";
//HtmlPanel.doLayout();
HtmlPanel.update(StyleArea.getValue());
},
DeactivateEvent: function () {
Ext.util.CSS.removeStyleSheet("CssRule");
//HtmlPanel.removeClass("CustomStyle");
//HtmlPanel.doLayout();
StyleArea.setValue(HtmlPanel.body.dom.innerHTML.replace("\n", ""));
}
};
var notifyDrop = function (dd, e, data) {
var msg = [];
msg.push("text : " + data.node.text + "");
Ext.select("InputField").update(msg.join(""))
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
<Listeners>
<DocumentReady Handler="StyleHandle.InitTextAreaHeight();" />
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Cls="transparence-background" Layout="BorderLayout">
<Items>
<ext:TabPanel ID="TabFormPanels" runat="server" Region="Center">
<Items>
<ext:Panel runat="server" Padding="20" Title="式样格式" Layout="BorderLayout">
<Items>
<ext:FormPanel ID="StyleForm" runat="server" Padding="10" Margins="10" LabelWidth="50"
Region="Center">
<Defaults>
<ext:Parameter Name="anchor" Value="100%" Mode="Value" />
</Defaults>
<Items>
<ext:TextArea ID="CssArea" runat="server" FieldLabel="式样" />
<ext:TextArea ID="StyleArea" runat="server" FieldLabel="格式" />
</Items>
<Listeners>
<Resize Handler="StyleHandle.InitTextAreaHeight();" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="ViewForm" runat="server" Padding="20" Border="false" Title="预览设置"
Layout="BorderLayout">
<Items>
<ext:TreePanel ID="DefineTree" runat="server" Margins="5 5 5 5" Width="250" Icon="PageWhiteOffice"
Title="模板定义" ButtonAlign="Left" RootVisible="False" EnableDrag="true" DDGroup="SetField"
AutoScroll="True" Region="West">
<Root>
<ext:TreeNode Text="Root" Expanded="true">
<Nodes>
<ext:TreeNode Text="Folder 1" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 1 data" Mode="Value" />
</CustomAttributes>
<Nodes>
<ext:TreeNode Text="Child 1" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 1 Child 1 data" Mode="Value" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Folder 2" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 2 data" Mode="Value" />
</CustomAttributes>
<Nodes>
<ext:TreeNode Text="Child 2" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 2 Child 2 data" Mode="Value" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Leaf 1" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Leaf 1 data" Mode="Value" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<StartDrag Handler="" />
<EndDrag Handler="" />
</Listeners>
<SelectionModel>
<ext:DefaultSelectionModel runat="server">
<%--<Listeners>
<BeforeSelect Fn="DefineHandle.BeforeSelectFn" />
<SelectionChange Fn="DefineHandle.SelectionChangeFn" />
</Listeners>--%>
</ext:DefaultSelectionModel>
</SelectionModel>
</ext:TreePanel>
<ext:Panel runat="server" AutoScroll="true" Margins="5 5 5 5" Padding="10" Region="Center">
<Items>
<ext:Panel ID="HtmlPanel" runat="server" Border="false" AutoHeight="true" BodyCssClass="CustomStyle" />
</Items>
</ext:Panel>
</Items>
<Listeners>
<Activate Handler="StyleHandle.ActivateEvent();" />
<Deactivate Handler="StyleHandle.DeactivateEvent();" />
</Listeners>
</ext:Panel>
</Items>
<Buttons>
<ext:Button runat="server" Text="保存">
<Listeners>
<Click Handler="" />
</Listeners>
</ext:Button>
</Buttons>
</ext:TabPanel>
</Items>
</ext:Viewport>
<ext:DropTarget runat="server" Target="${.InputField}" Group="SetField">
<NotifyDrop Fn="notifyDrop" />
</ext:DropTarget>
</form>
</body>
</html>
I want to enter the Htmlcode and preview, like enter "<DIV class=InputField>this is test</DIV>" in TextArea, And then by dragging the tree node change content of preview pages, But always not success, please help me!
Last edited by Daniil; Jan 08, 2012 at 5:04 AM.
Reason: Please use [CODE] tags