Aug 02, 2011, 10:52 AM
[CLOSED] form body click events not firing correctly on form with ext:treeview
I have a form that contains a treeview.
The body of the form has onclick and oncontextmenu attributes.
The functions associated with these attributes are fired as long as they occur within the height of the items displayed in the treeview. However, if the treeview does not fill the full height of the page then there is a 'blind spot' below the treeview and if the user clicks in this area the functions are not fired.
I have created a simple example below
Could you please offer a solution to this problem so that i can capture the event within the entire form?
Thanks
The body of the form has onclick and oncontextmenu attributes.
The functions associated with these attributes are fired as long as they occur within the height of the items displayed in the treeview. However, if the treeview does not fill the full height of the page then there is a 'blind spot' below the treeview and if the user clicks in this area the functions are not fired.
I have created a simple example below
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
this.BuildTree(trpSystem.Root);
}
}
private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
{
if (nodes == null)
{
nodes = new Ext.Net.TreeNodeCollection();
}
Ext.Net.TreeNode root = new Ext.Net.TreeNode();
root.Text = "Root";
nodes.Add(root);
string prefix = DateTime.Now.Second + "_";
for (int i = 0; i < 10; i++)
{
Ext.Net.TreeNode node = new Ext.Net.TreeNode();
node.Text = prefix + i;
root.Nodes.Add(node);
}
return nodes;
}
[DirectMethod]
public string RefreshMenu()
{
Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);
return nodes.ToJson();
}
</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 id="Head2" runat="server">
<title>SiteMap - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var refreshTree = function (tree) {
Ext.net.DirectMethods.RefreshMenu({
success: function (result) {
var nodes = eval(result);
if (nodes.length > 0) {
tree.initChildren(nodes);
}
else {
tree.getRootNode().removeChildren();
}
}
});
}
</script>
</head>
<body onclick="alert();" oncontextmenu="alert();">
<form id="Form1" runat="server">
<ext:ResourceManager ID="rsmMain" runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" ID="Viewport1">
<Items>
<ext:FitLayout ID="FitLayout1" runat="server">
<Items>
<ext:TreePanel
ID="trpSystem"
runat="server"
Title="System Breakdown"
AutoScroll="true">
<Tools>
<ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{trpSystem});" />
</Tools>
<Editors>
<ext:TreeEditor runat="server" AutoEdit="true" ID="TreeEditor1" Visible="false">
<Field>
<ext:TextField runat="server" ID="TextField1" SelectOnFocus="true">
<Listeners>
<Change Fn="SystemBreakdown_txtTreeEdit_change"/>
</Listeners>
</ext:TextField>
</Field>
</ext:TreeEditor>
</Editors>
</ext:TreePanel>
</Items>
</ext:FitLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
If you click over a treeview node the alert is displayed but if you click below the treeview the click event is not bubbled down to the body of the form and there is no alert.Could you please offer a solution to this problem so that i can capture the event within the entire form?
Thanks
Last edited by Daniil; Aug 08, 2011 at 1:24 PM.
Reason: [CLOSED]