[CLOSED] Example of dynamic window with form from Client Side, created on Server Side
Hi,
I'd like to be able to call a [DirectMethod] from the clients side, have it generate a window with a dynamic form on the server-side, then show the window on the client. right now, the window is showing, but there are no fields?!
Is this possible? Can you show me a quick example?
Client Code Call to method.:
Code:
<ext:XScript runat="server">
<script>
var intervalId
function OpenTaskModal(title, assignid, taskid, worklfowid, soeid, userid) {
try {
#{DirectMethods}.ShowTaskWindow(title, assignid, taskid, worklfowid, soeid, userid);
}
catch (e) {
alert(e);
}
}
</script>
</ext:XScript>
Client Code Window to be populated then shown.:
Code:
<ext:Window runat="server" ID="winTask" Shadow="Drop" ShadowOffset="15" Modal="true" InitCenter="true" Hidden="true">
<Content>
<ext:FormPanel runat="server" ID="formPanelTask">
<Content>
<ext:FormLayout runat="server" ID="formLayoutTask">
</ext:FormLayout>
</Content>
</ext:FormPanel>
</Content>
<BottomBar>
<ext:Toolbar runat="server" ID="taskToolbar">
<Items>
<ext:ToolbarFill />
<ext:Button runat="server" ID="btnComplete" Icon="Accept" Text="Complete Task"></ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Window>
Server code:
Code:
[DirectMethod]
public void ShowTaskWindow(string title, string assignid, string taskid, string worklfowid, string soeid, string userid)
{
this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() { AllowBlank = true, Text = taskid }));
this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() { AllowBlank = true, Text = soeid }));
this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() { AllowBlank = true, Text = userid }));
this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() {AllowBlank=true, Text=title}));
this.formLayoutTask.Anchors.Add(new Checkbox (new Checkbox.Config() { Checked = true }));
this.winTask.Hidden = false;
}
-Raphael
RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side
Hi Raphael,
Here's how I would build your sample.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public void AddFields(string name, string premium)
{
this.Window1.Show();
var form = new FormPanel {
ID = "FormPanel1",
RenderFormElement = false,
Border = false,
DefaultAnchor = "100%",
Padding = 5
};
form.Items.Add(new TextField { AllowBlank = true, FieldLabel = name });
form.Items.Add(new Checkbox { Checked = true, FieldLabel = premium });
form.Render(this.Window1, RenderMode.AddTo);
}
</script>
<!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>Json.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="CompanyX" />
<script type="text/javascript">
var addFields = function (name, premium) {
CompanyX.AddFields(name, premium);
};
</script>
<ext:Window
ID="Window1"
runat="server"
Shadow="Drop"
ShadowOffset="15"
Modal="true"
InitCenter="true"
Hidden="true"
Height="185"
Width="350"
Layout="fit">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button runat="server" Icon="Accept" Text="Complete Task" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Window>
<ext:Button runat="server" Text="Add Fields" OnClientClick="addFields('Name', 'Premium');" />
</form>
</body>
</html>
I had to simplify your sample a bit, although all the same/similar pieces are still there.
Summary:
1. Use <Items> instead of <Content> if adding Ext.NET Components to your Container.
2. I built the full FormPanel in the DirectMethod.
3. Call .Render when you're ready to render your component during a DirectEvent/DirectMethod. The .Render Method must be called.
Hope this helps.
RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side
Great, thanks!
What is the equivalent of:
this.Page.ClientScript.RegisterStartupScript ???
RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side
As a follow up to this Geoffrey,
How can I submit this dynamically generated form to obtain the values a user entered?
RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side
Hi,
1. The simplest way to read from Request object
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public void AddFields(string name, string premium)
{
this.Window1.Show();
var form = new FormPanel {
ID = "FormPanel1",
RenderFormElement = false,
Border = false,
DefaultAnchor = "100%",
Padding = 5
};
form.Items.Add(new TextField { ID = "TextField1", AllowBlank = true, FieldLabel = name });
form.Items.Add(new Checkbox { Checked = true, FieldLabel = premium });
form.Render(this.Window1, RenderMode.AddTo);
}
protected void ShowValues(object sender, DirectEventArgs e)
{
X.Js.Alert(this.Request["TextField1"]);
}
</script>
<!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>Json.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="CompanyX" />
<script type="text/javascript">
var addFields = function (name, premium) {
CompanyX.AddFields(name, premium);
};
</script>
<ext:Window
ID="Window1"
runat="server"
Shadow="Drop"
ShadowOffset="15"
Modal="true"
InitCenter="true"
Hidden="true"
Height="185"
Width="350"
Layout="fit">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button runat="server" Icon="Accept" Text="Complete Task" />
<ext:Button runat="server" Text="Show values">
<DirectEvents>
<Click OnEvent="ShowValues" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Window>
<ext:Button runat="server" Text="Add Fields" OnClientClick="addFields('Name', 'Premium');" />
</form>
</body>
</html>
2. Or recreate from on each request. In this case the controls will read submitted values automaticvally
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
object restore = this.ViewState["restoreForm"];
if(restore != null && (bool)restore)
{
this.Window1.Items.Add(this.CreateForm("", ""));
}
}
private FormPanel CreateForm(string name, string premium)
{
var form = new FormPanel
{
ID = "FormPanel1",
RenderFormElement = false,
Border = false,
DefaultAnchor = "100%",
Padding = 5
};
form.Items.Add(new TextField { ID = "TextField1", AllowBlank = true, FieldLabel = name });
form.Items.Add(new Checkbox { ID = "Checkbox1", Checked = true, FieldLabel = premium });
return form;
}
[DirectMethod(ViewStateMode = ViewStateMode.Enabled)]
public void AddFields(string name, string premium)
{
this.Window1.Show();
var formPanel = this.CreateForm(name, premium);
this.Window1.Items.Add(formPanel);
formPanel.Render();
this.ViewState["restoreForm"] = true;
}
protected void ShowValues(object sender, DirectEventArgs e)
{
X.Js.Alert(Ext.Net.Utilities.ControlUtils.FindControl<TextField>(Window1, "TextField1").Text);
}
</script>
<!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>Json.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="CompanyX" />
<script type="text/javascript">
var addFields = function (name, premium) {
CompanyX.AddFields(name, premium);
};
</script>
<ext:Window
ID="Window1"
runat="server"
Shadow="Drop"
ShadowOffset="15"
Modal="true"
InitCenter="true"
Hidden="true"
Height="185"
Width="350"
Layout="fit">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button runat="server" Icon="Accept" Text="Complete Task" />
<ext:Button runat="server" Text="Show values">
<DirectEvents>
<Click OnEvent="ShowValues" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Window>
<ext:Button runat="server" Text="Add Fields" OnClientClick="addFields('Name', 'Premium');" />
</form>
</body>
</html>