[CLOSED] TreePanel itemClick DirectEvent

  1. #1

    [CLOSED] TreePanel itemClick DirectEvent

    I have created a TreePanel with several nodes in behindCode. Based on other threads I added a CustomAttribute to the node and want to access the info when the item is clicked.

    How can I access it?
    How can I add a second configItem named - "Action"?

    
       private void BuildTreePanel ()
       {
          Ext.Net.TreePanel YearPanel = new Ext.Net.TreePanel();
          YearPanel.Title = "Some Year";
          YearPanel.Icon = Icon.Calendar;
          YearPanel.BodyPadding = 5;
          YearPanel.RootVisible = false;
    
          YearPanel.DirectEvents.ItemClick.Event += OverviewItemClicked;
    
          Ext.Net.Node root = new Ext.Net.Node();
          root.NodeId= "root";
          root.Expanded = true;
    
          YearPanel.Root.Add(root);
          
          for(yeardt = 2005; yeardt <= 2012; yeardt ++)
          {       
             Ext.Net.Node yearNode = new Ext.Net.Node();
             yearNode.Text = yeardt.ToString();
             yearNode.Icon = Icon.Calendar;
             yearNode.CustomAttributes.Add(new ConfigItem {Name = "Year", Value = yeardt, Mode = ParameterMode.Value});
    
             root.children.Add(yearNode);
          }
          ....
          //Additional code that adds the tree panel to the page and other stuff.
       }
     
       protected void OverviewItemClicked(object sender, DirectEventArgs e)
       {
           // Add code here because of the item clicked
       }
    Last edited by Daniil; Oct 26, 2012 at 4:53 AM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    I am afraid I don't understand this question well.
    Quote Originally Posted by cwolcott View Post
    How can I add a second configItem named - "Action"?
    Please note that you can send anything from client to a DirectEvent handler using its ExtraParams.
  3. #3
    I apologize. Because of our work environment I can't create full examples while at work because of our network configuration. So I need to wait until I get home to work up an example.

    The following code represents the WestPanel in my Viewport. The nodes are representative of what I would pull from the database. I would like to be able to click on any of the nodes and know some information about what item was clicked. At first I thought I was going to need a DirectEvent, but I think a Listener will work even better.

    <%@ 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">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            BuildOverviewTree();
        }
    
        private void BuildOverviewTree()
        {
            var random = new Random();
    
            Ext.Net.TreePanel byYear = new Ext.Net.TreePanel();
            byYear.ID = "ByYear";
            byYear.Title = "By Year";
            byYear.Icon = Icon.Calendar;
            byYear.BodyPadding = 5;
            byYear.Flex = 1;
            byYear.RootVisible = false;
            
            Ext.Net.Node rootNode = new Ext.Net.Node();
            rootNode.NodeID = "root";
            rootNode.Expanded = true;
    
            byYear.Root.Add(rootNode);
    
            for (int yeardt = 2005; yeardt <= 2012; yeardt++)
            {
                Ext.Net.Node yearNode = new Ext.Net.Node();
                yearNode.Text = yeardt.ToString();
                yearNode.Icon = Icon.Calendar;
    
                Ext.Net.Node pendingNode = new Ext.Net.Node();
                double pendingRequests = Math.Floor(Math.Max(random.NextDouble() * 100, 0));
                pendingNode.Text = "Pending (" + pendingRequests.ToString() + ")";
                pendingNode.Icon = Icon.BookOpen;
    
                if (pendingRequests > 50)
                {
                    Ext.Net.Node unassignedNode = new Ext.Net.Node();
                    double unassignedRequests = Math.Floor(Math.Max(random.NextDouble() * pendingRequests, 0));
                    unassignedNode.Text = "Unassigned (" + unassignedRequests.ToString() + ")";
                    unassignedNode.Icon = Icon.UserAlert;
                    unassignedNode.Leaf = true;
                    
                    pendingNode.Children.Add(unassignedNode);
                }
                else
                    pendingNode.Leaf = true;
                
                yearNode.Children.Add(pendingNode);
    
                Ext.Net.Node ClosedNode = new Ext.Net.Node();
                double closedRequests = Math.Floor(Math.Max(random.NextDouble() * 400, 0));
                ClosedNode.Text = "Closed (" + closedRequests.ToString() + ")";
                ClosedNode.Icon = Icon.BookRed;
                ClosedNode.Leaf = true;
                yearNode.Children.Add(ClosedNode);
    
                rootNode.Children.Add(yearNode);
            }
    
            Overview.Items.Add(byYear);
        }
    
        protected void Page2Click(object sender, DirectEventArgs e)
        {
            Response.Redirect("Page2.aspx");
        }
        protected void RequestData(object sender, DirectEventArgs e)
        {
            Response.Redirect("EWNSC02.aspx");
            // What can I do to have EWNSC02.apsx show up as a model window on this page instead
            // of a redirect.
        }
    </script>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <ext:Panel ID="Overview" runat="server" Title="OverView" width="300" Height="400" Layout="FitLayout">
        </ext:Panel>
        </form>
    </body>
    </html>
    If I select any Node representing a year (1st Level) I would like to know:
    • Year is Selected Year
    • ReqeustStatus is "ALL"
    • ActionOfficer is "ALL"


    If I select any Node representing a Request Status (2nd Level) I would like to know:
    • Year is Parent Node
    • RequestStatus is PENDING or CLOSED
    • ActionOfficer is "ALL"


    If I select any Node representing the Action Officer assignment (3rd Level) I would like to know:
    • Year is Parent Node
    • RequestStatus is Parent Node
    • ActionOfficer is Unassigned


    When I build each node I could hard code the information to be passed when click.

    How do I ...
    • Assigned data to each node to be passed when the node is selected?
    • How do I access this information in the listener?


    Click image for larger version. 

Name:	TreePanel.jpg 
Views:	262 
Size:	23.8 KB 
ID:	4966
  4. #4
    A good night sleep has the brain working again. I am slowing working through this. Go ahead and bypass the thread for now, unless you have nothing better to do and want to answer. If I get stuck I will ask for additional help.
  5. #5
    Well, a record is passed to an ItemClick listener.
    http://docs.sencha.com/ext-js/4-1/#!...vent-itemclick

    Node API is here:
    http://docs.sencha.com/ext-js/4-1/#!....NodeInterface

    Using it you should be able to get the required data.

    Please feel free to ask further if needed:)
  6. #6
    Please go ahead a close the thread. I was able to complete this example of gathering the hierarchy of a TreePanel when an item is click.

    <%@ 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">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            BuildOverviewTree();
        }
    
        private void BuildOverviewTree()
        {
            var random = new Random();
            Ext.Net.TreePanel YearPanel = YearPanel01;
    
            Ext.Net.Node rootNode = new Ext.Net.Node();
            rootNode.NodeID = "root";
            rootNode.Expanded = true;
    
            YearPanel.Root.Add(rootNode);
    
            for (int yeardt = 2005; yeardt <= 2012; yeardt++)
            {
                // Prepare the YEAR Node
                Ext.Net.Node yearNode = new Ext.Net.Node()
                {
                    Text = yeardt.ToString(),
                    Icon = Icon.Calendar,
                    CustomAttributes =
                        {
                        new ConfigItem("Value", yeardt.ToString()),
                        },
                    Expanded = false,
                };
    
                // Prepare the PENDING Requests Node
                double pendingRequests = Math.Floor(Math.Max(random.NextDouble() * 100, 0));
                Ext.Net.Node pendingNode = new Ext.Net.Node()
                {
                    Text = "Pending - " + pendingRequests.ToString(),
                    Icon = Icon.BookOpen,
                    CustomAttributes =
                            {
                            new ConfigItem("Value", "Pending", ParameterMode.Value ),
                            },
                    Expanded = false
                };
    
                if (pendingRequests > 50)
                {
                    double unassignedRequests = Math.Floor(Math.Max(random.NextDouble() * pendingRequests, 0));
                    Ext.Net.Node unassignedNode = new Ext.Net.Node()
                    {
                        Text = "Unassigned - " + unassignedRequests.ToString(),
                        Icon = Icon.UserAlert,
                        CustomAttributes =
                                {
                                new ConfigItem("Value", "Unassigned", ParameterMode.Value ),
                                 },
                        Leaf = true
                    };
    
                    pendingNode.Children.Add(unassignedNode);
                }
                else
                    pendingNode.Leaf = true;
    
                yearNode.Children.Add(pendingNode);
    
                // Prepare the CLOSED Request Node
                double closedRequests = Math.Floor(Math.Max(random.NextDouble() * 400, 0));
                Ext.Net.Node closedNode = new Ext.Net.Node()
                {
                    Text = "Closed - " + closedRequests.ToString(),
                    Icon = Icon.BookRed,
                    CustomAttributes =
                        {
                        new ConfigItem("Value", "Closed", ParameterMode.Value ),
                        },
                    Expanded = false,
                    Leaf = true
                };
                yearNode.Children.Add(closedNode);
    
                rootNode.Children.Add(yearNode);
            }
    
        }
    
    </script>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <ext:Panel ID="Info" runat="server" Title="Info" Width="300" Height="100" Layout="FitLayout"
            BodyPadding="5" ClientIDMode="Static" />
        <ext:Panel ID="Overview" runat="server" Title="OverView" Width="300" Height="400"
            Layout="FitLayout">
            <HtmlBin>
                <script type="text/javascript">
                    var overviewByYearClicked = function (panel, record) {
    
                        var aoText = "All";
                        var aoIcon = "icon-user";
                        var statusText = "All";
                        var statusIcon = "icon-book";
    
                        var node = record;
    
                        for (var i = record.data.depth; i >= 1; i--) {
    
                            switch (i) {
                                case 3:
                                    aoText = node.raw["Value"];
                                    aoIcon = node.raw["iconCls"];
                                    break;
    
                                case 2:
                                    statusText = node.raw["Value"];
                                    statusIcon = node.raw["iconCls"];
                                    break;
    
                                case 1:
                                    var yearText = node.raw["Value"];
                                    var yearIcon = node.raw["iconCls"];
                                    break;
                            }
                            node = node.parentNode;
                        }
    
                        App.Info.update('Year: <b>' + yearText + ' | ' + yearIcon + '</b>' + '</br>' +
                                        'Status: <b>' + statusText + ' | ' + statusIcon + '</b>' + '</br>' +
                                        'AO: <b>' + aoText + ' | ' + aoIcon + '</b>');
                    }
                </script>
            </HtmlBin>
            <Items>
                <ext:TreePanel ID="YearPanel01" runat="server" Title="By Year" Icon="Calendar" BodyPadding="5"
                    RootVisible="false">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                <ext:Button runat="server" Icon="ApplicationCascade" ToolTip="Expand">
                                    <Listeners>
                                        <Click Handler="#{YearPanel01}.expandAll();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Icon="Application" ToolTip="Collapse">
                                    <Listeners>
                                        <Click Handler="#{YearPanel01}.collapseAll();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Icon="ArrowRefresh" ToolTip="Refresh" Disabled="true">
                                    <Listeners>
                                        <Click Handler="" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Listeners>
                        <ItemClick Fn="overviewByYearClicked" />
                    </Listeners>
                </ext:TreePanel>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Click image for larger version. 

Name:	ItemClick02.jpg 
Views:	207 
Size:	34.8 KB 
ID:	4974Click image for larger version. 

Name:	ItemClick01.jpg 
Views:	225 
Size:	36.1 KB 
ID:	4975
  7. #7
    Thank you for sharing a solution. It can help someone on the forums in the future.

Similar Threads

  1. [CLOSED] TreePanel DirectEvent BehindCode
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 17, 2012, 6:30 PM
  2. Replies: 1
    Last Post: Jun 09, 2011, 7:04 PM
  3. [CLOSED] Send all treepanel nodes to directevent as extraparam
    By KorsG in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 09, 2011, 4:57 PM
  4. [CLOSED] TreePanel DirectEvent CheckChange
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 10, 2010, 4:44 AM
  5. [CLOSED] [1.0] TreePanel add node at DirectEvent
    By methode in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 08, 2009, 1:56 PM

Posting Permissions