What's New?

[CLOSED] form body click events not firing correctly on form with ext:treeview

  1. #1
    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

    <%@ 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]
  2. #2
    Aug 02, 2011, 12:59 PM
    Hi,

    Event model of TreePanel stops an event (click and contextmenu) and fire a
    "container" + type
    event.

    Type can be, for example, click or contextmenu.

    I'd suggest you to use these events of TreePanel: containerclick and containercontextmenu.

    Example

    <%@ Page Language="C#" %>

<%@ 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>Ext.Net Example</title>

    <script type="text/javascript">
        var onAfterRender = function() {
            this.on("click", onClick);
            this.on("contextmenu", onContextMenu);
            this.on("containerclick", onClick);
            this.on("containercontextmenu", onContextMenu);
        };
        
        var onClick = function () {
            alert("click");
        };
        
        var onContextMenu = function () {
            alert("contextmenu");
        };
    </script>

</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:TreePanel runat="server" Title="TreePanel">
                    <Root>
                        <ext:TreeNode Text="Root" />
                    </Root>
                    <Listeners>
                        <AfterRender Fn="onAfterRender" />
                    </Listeners>
                </ext:TreePanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Messagebus form iframe in IE8 keeps on firing
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 26, 2012, 12:03 PM
  2. [CLOSED] Form validation is not working correctly
    By Fahd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 13, 2012, 8:53 PM
  3. [CLOSED] Create a form in each node to treeview.
    By stoque in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 28, 2011, 9:18 PM
  4. [CLOSED] FormPanel: Execute all events on the form before submit it
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 13, 2010, 1:27 PM
  5. How to put a button inside of a Form's body
    By marcossoft in forum 1.x Help
    Replies: 3
    Last Post: Feb 04, 2009, 7:34 AM

Posting Permissions