Jan 31, 2015, 12:41 PM
Ext:Button inside XTemplate
Hello,
Based on XTemplate example, I've added an Ext:Button and a DirectMethod to be called when button is clicked. The problem is that ext:button doesn't get rendered as an html button but appear as is (of course browser doesn't know what ext:button tag is). BTW: Similar problem I'm experiencing if I want to render an image using a javascript call because the javascript code doesn't get called
I've found this post, and according to @Vladimir it will be possible starting from v1. But the following code doesn't work.
Any hint/workaround? Thank you.
Based on XTemplate example, I've added an Ext:Button and a DirectMethod to be called when button is clicked. The problem is that ext:button doesn't get rendered as an html button but appear as is (of course browser doesn't know what ext:button tag is). BTW: Similar problem I'm experiencing if I want to render an image using a javascript call because the javascript code doesn't get called
I've found this post, and according to @Vladimir it will be possible starting from v1. But the following code doesn't work.
Any hint/workaround? Thank you.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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>XTemplate - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
List<Parent> persons = new List<Parent>(3);
for (int i = 0; i < 3; i++)
{
Parent person = new Parent();
person.Id = i;
person.Name = "Parent" + i;
person.Title = "Title" + i;
persons.Add(person);
}
ObjHolder1.Items.Add("persons", persons);
}
public class Parent
{
public int Id { get; set; }
public string Name { get; set; }
public string Title { get; set; }
}
[DirectMethod]
public void button_click (object sender, DirectEventArgs e)
{
X.Msg.Alert("Clicked", string.Format("You've clicked on: {1}: {0}", e.ExtraParams["N"].ToString(), e.ExtraParams["I"].ToString()));
}
</script>
<style type="text/css">
.x-panel-body p {
margin: 5px;
font-size: 11px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ObjectHolder ID="ObjHolder1" runat="server" />
<ext:XTemplate ID="Tpl1" runat="server">
<Html>
<tpl for=".">
<p>
<b>Name:</b> {Name}<br/>
<b>Title:</b> {Title}<br/>
<ext:Button ID="btn_{Id}" runat="server" Text="Click {Name}">
<DirectEvents>
<Click OnEvent="button_click">
<ExtraParams>
<ext:Parameter Mode="Value" Name="I" Value="{Id}"></ext:Parameter>
<ext:Parameter Mode="Value" Name="N" Value="{Name}"></ext:Parameter>
</ExtraParams>
<Confirmation ConfirmRequest="true" Title="Please confirm" Message="Do you clicked on {Id}: {Name}?" />
</Click>
</DirectEvents>
</ext:Button>
</p>
<hr />
</tpl>
</Html>
</ext:XTemplate>
<ext:Panel ID="Panel1" runat="server" BodyStyle="background-color:#F8F8F8; padding:5px; border:dotted 1px gray;">
<Listeners>
<Render Handler="#{Tpl1}.overwrite(this.body, #{ObjHolder1}.persons);" />
</Listeners>
</ext:Panel>
</form>
</body>
</html>