EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 7 of 7

Thread: [CLOSED] TreePanel itemClick DirectEvent

  1. #1
    Premium Member cwolcott's Avatar
    Join Date
    Nov 2011
    Location
    Washington DC
    Posts
    722

    [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"?

    Code:
       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 5:53 AM. Reason: [CLOSED]
    Chris Wolcott, Leidos, Developing w/ v2.5+ Trunk Rev 5968 [Sept 17, 2014], using Chrome 33.0.1750.154 m, in Visual Studio 2010 transitioning to 2013 (unless noted)

  2. #2
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    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.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Premium Member cwolcott's Avatar
    Join Date
    Nov 2011
    Location
    Washington DC
    Posts
    722
    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.

    Code:
    <%@ 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:	191 
Size:	23.8 KB 
ID:	4966
    Chris Wolcott, Leidos, Developing w/ v2.5+ Trunk Rev 5968 [Sept 17, 2014], using Chrome 33.0.1750.154 m, in Visual Studio 2010 transitioning to 2013 (unless noted)

  4. #4
    Premium Member cwolcott's Avatar
    Join Date
    Nov 2011
    Location
    Washington DC
    Posts
    722
    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.
    Chris Wolcott, Leidos, Developing w/ v2.5+ Trunk Rev 5968 [Sept 17, 2014], using Chrome 33.0.1750.154 m, in Visual Studio 2010 transitioning to 2013 (unless noted)

  5. #5
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    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:)
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  6. #6
    Premium Member cwolcott's Avatar
    Join Date
    Nov 2011
    Location
    Washington DC
    Posts
    722
    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.

    Code:
    <%@ 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:	143 
Size:	34.8 KB 
ID:	4974Click image for larger version. 

Name:	ItemClick01.jpg 
Views:	160 
Size:	36.1 KB 
ID:	4975
    Chris Wolcott, Leidos, Developing w/ v2.5+ Trunk Rev 5968 [Sept 17, 2014], using Chrome 33.0.1750.154 m, in Visual Studio 2010 transitioning to 2013 (unless noted)

  7. #7
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    Thank you for sharing a solution. It can help someone on the forums in the future.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

Similar Threads

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

Posting Permissions