PDA

View Full Version : [CLOSED] Custom atributes of Treepanel's nodes on Itemclick listener



profitsistemas
Jan 22, 2013, 4:28 PM
I have a treepanel which is populated in codebehind with database information.
My treepanel has an ItemClick listener to dynamically add Tabs in a TabPanel.

I want to set custom titles in tabs depending on which node has been clicked.Actually I use as tittle node's text.
This my actual code:

CodeBehind:




protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
this.ArmarArbol(this.MenuTree.Root);
}
}
private Ext.Net.NodeCollection ArmarArbol(Ext.Net.NodeCollection nodes)
{
if (nodes == null)
{
nodes = new Ext.Net.NodeCollection();
}
Ext.Net.Node root = new Ext.Net.Node();
root.Text = GetLocalResourceObject("nodoProyecto").ToString();
root.NodeID = "0";
root.Href = this.Page.ResolveUrl("projects.aspx");
root.Expanded = false;
nodes.Add(root);


proNeg = new ProjectNegocio();
try
{
//this method gets data from database.
List<Project> projs = this.proNeg.GetAll();

foreach (Project pro in projs)
{
Ext.Net.Node nodoProyecto = new Ext.Net.Node();
nodoProyecto.Text = pro.Name;
nodoProyecto.NodeID = "P" + pro.ID.ToString();
root.Children.Add(nodoProyecto);

Ext.Net.Node nodoVariable = new Ext.Net.Node();
nodoVariable.Text = GetLocalResourceObject("nodoVariable").ToString();
nodoVariable.Leaf = true;
nodoVariable.NodeID = "V" + pro.ID.ToString();
nodoVariable.Href = this.Page.ResolveUrl("variables.aspx?id=" + pro.ID.ToString());
nodoProyecto.Children.Add(nodoVariable);

Ext.Net.Node nodoConexion = new Ext.Net.Node();
nodoConexion.Text = GetLocalResourceObject("nodoConexion").ToString();
nodoConexion.Leaf = true;
nodoConexion.NodeID = "C" + pro.ID.ToString();
nodoConexion.Href = this.Page.ResolveUrl("connections.aspx?id=" + pro.ID.ToString());
nodoProyecto.Children.Add(nodoConexion);

}
}
catch (Exception ex)
{
string titulo = GetLocalResourceObject("mensajeErrorTitulo").ToString();
X.Msg.Show(new MessageBoxConfig
{
Title = titulo,
Message = ex.Message,
Icon = MessageBox.Icon.ERROR
});
//X.Msg.Alert(titulo, ex.Message).Show();
}
return nodes;
}

[DirectMethod]
public string RefreshMenu()
{
Ext.Net.NodeCollection nodes = this.ArmarArbol(null);

return nodes.ToJson();
}


Markup:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="ETL_Profit.Program.home" %>

<%@ 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></title>
<script>

var refreshTree = function (tree) {
App.direct.RefreshMenu({
success: function (result) {
var nodes = eval(result);
if (nodes.length > 0) {
tree.setRootNode(nodes[0]);
}
else {
tree.getRootNode().removeAll();
}
}
});
};
var loadPage = function (tabPanel, record) {
var tab = tabPanel.getComponent(record.getId());
if (!tab) {
tab = tabPanel.add({
id: record.getId(),
title: record.data.text,
closable: true,
loader: {
url : record.data.href,
renderer: "frame",
loadMask: {
showMask: true,
msg: record.data.href
}
},
autoScroll: true
});
}

tabPanel.setActiveTab(tab);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:Panel ID="PHeader" Height="100px" runat="server" Border= "true" Region="North" Layout="Fit" Collapsible ="false" >
<Content>
<ext:Label ID="Label1" Text="LOGO" runat="server">
</ext:Label>
</Content>
</ext:Panel>
<ext:Panel ID="PMenu" runat="server" Width="300" Border= "true" Region="West" Layout="Fit" Collapsible ="true" >
<Items>
<ext:Panel ID="PETL" Title="ETL" runat="server" Layout="Accordion" Margins="0 0 15 0">
<LayoutConfig>
<ext:AccordionLayoutConfig OriginalHeader="true" />
</LayoutConfig>
<Items>
<ext:TreePanel ID="MenuTree" runat="server" >
<Tools>
<ext:Tool Type="Refresh" Handler="refreshTree(#{MenuTree});">
<ToolTips>
<ext:ToolTip ID="tooltipRefresh" runat="server" Html="Refresh" />
</ToolTips>
</ext:Tool>
</Tools>
<Listeners>
<ItemClick Handler="if (record.data.href) {e.stopEvent();loadPage(#{tabs}, record);}" />
</Listeners>
</ext:TreePanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:TabPanel ID="tabs" Region="Center" runat="server">

</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


I've tried adding custom atributes to nodes like this:



ConfigItem con = new ConfigItem("tabname", pro.Name + "/Variables",ParameterMode.Value);
nodoVariable.CustomConfig.Add(con);


But when i want to use this custom config 'tabname' in javascript i can't get the value. I tried modifying my javascript like this:



var loadPage = function (tabPanel, record) {
var tab = tabPanel.getComponent(record.getId());
if (!tab) {
tab = tabPanel.add({
id: record.getId(),
title: record.tabname,
closable: true,
loader: {
url : record.data.href,
renderer: "frame",
loadMask: {
showMask: true,
msg: record.data.href
}
},
autoScroll: true
});
}

tabPanel.setActiveTab(tab);
};

Vladimir
Jan 22, 2013, 5:31 PM
Hi,

Any custom attributes (CustomConfig also) must be defined inside Fields collection of TreePanel or inside Fields of Model (if you use Store for TreePanel), see
http://examples2.ext.net/#/TreePanel/Advanced/TreeGrid/

To retrieve attribute you have to use 'record.data.tabname' instead 'record.tabname'

profitsistemas
Jan 23, 2013, 12:12 PM
Thanks, I made it to work!