Nov 05, 2014, 5:07 PM
Prevent event propagation on inner container
Hello,
I haven't tried everything, but have so far tried a lot of choices with no luck. Actually I could make it on sprites, not on buttons which I can nicely format using the UI= directives.
Thing is: I have a big click area but want from a given container in to ignore the general click event so I can use an exclusive there.
I want that the user may be able to click the entire entry to show its details, except for a box with different detail buttons.
In my example, I want the 'area click' event to be triggered everywhere else but into the pnlX panel. I kind of require building the screen from code behind so...
eventPropagationHandling.aspx.cs
p.s.: nice new forum layout! subtle yet comfortable!
I haven't tried everything, but have so far tried a lot of choices with no luck. Actually I could make it on sprites, not on buttons which I can nicely format using the UI= directives.
Thing is: I have a big click area but want from a given container in to ignore the general click event so I can use an exclusive there.
I want that the user may be able to click the entire entry to show its details, except for a box with different detail buttons.
In my example, I want the 'area click' event to be triggered everywhere else but into the pnlX panel. I kind of require building the screen from code behind so...
eventPropagationHandling.aspx.cs
using Ext.Net;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using x = Ext.Net;
namespace ExtNetPlayground
{
public partial class eventPropagationHandling : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var lbl1 = new x.Label
{
Text = "Word 001 (clickable)",
Margin = 2
};
var lbl2 = new x.Label
{
Text = "Word 002 (clickable)",
Margin = 2
};
var ctn1 = new x.Container
{
Layout = "HBoxLayout",
Items = { lbl1, lbl2 }
};
var btnZ = new x.Button
{
UI = x.UI.Primary,
Text = "Button 1",
OnClientClick = "alert('Button 1 click event.');"
};
var btnX = new x.Button
{
UI = x.UI.Primary,
Text = "Button 2",
OnClientClick = "alert('Button 2 click event.');"
};
var pnlX = new x.Panel
{
UI = x.UI.Primary,
Frame = true,
Padding = 2,
Items = { btnZ, btnX },
};
var clickBlock = new x.Container
{
ID = "ckBk",
Layout = "VBoxLayout",
Items = { ctn1, pnlX },
StyleSpec = "border: solid 1px gray"
};
var fnAlert = new x.JFunction { Handler = "alert('area click event triggered');" };
clickBlock.Element.AddListener("click", fnAlert);
pn1.Items.Add(clickBlock);
}
}
}
eventPropagationHandling.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="eventPropagationHandling.aspx.cs" Inherits="ExtNetPlayground.eventPropagationHandling" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" ID="pn1" Height="600" />
</div>
</form>
</body>
</html>
I can't see a light in the other end of this dark bluish UI=Primary tunnel...p.s.: nice new forum layout! subtle yet comfortable!