PDA

View Full Version : [CLOSED] TreePanel itemClick DirectEvent



cwolcott
Oct 23, 2012, 3:17 PM
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
}

Daniil
Oct 23, 2012, 7:22 PM
Hi Chris,

I am afraid I don't understand this question well.


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.

cwolcott
Oct 24, 2012, 1:53 AM
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?


4966

cwolcott
Oct 24, 2012, 1:23 PM
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.

Daniil
Oct 24, 2012, 2:17 PM
Well, a record is passed to an ItemClick listener.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Table-event-itemclick

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

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

Please feel free to ask further if needed:)

cwolcott
Oct 25, 2012, 5:12 PM
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>


49744975

Daniil
Oct 26, 2012, 4:53 AM
Thank you for sharing a solution. It can help someone on the forums in the future.