[CLOSED] Custom atributes of Treepanel's nodes on Itemclick listener

  1. #1

    [CLOSED] Custom atributes of Treepanel's nodes on Itemclick listener

    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);
            };
    Last edited by Daniil; Jan 23, 2013 at 11:24 AM. Reason: [CLOSED]
  2. #2
    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
    https://examples2.ext.net/#/TreePane...nced/TreeGrid/

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

    Solved

    Thanks, I made it to work!
    Last edited by profitsistemas; Jan 23, 2013 at 12:11 PM.

Similar Threads

  1. Replies: 18
    Last Post: Jan 23, 2013, 3:20 PM
  2. Replies: 2
    Last Post: Nov 26, 2012, 7:14 AM
  3. [CLOSED] TreePanel itemClick DirectEvent
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 26, 2012, 4:53 AM
  4. Custom TreeGrid nodes ?
    By Mohammad in forum 1.x Help
    Replies: 18
    Last Post: Aug 22, 2012, 9:49 AM
  5. [FIXED] [V0.8.0] TreeLoader base atributes
    By Justin_Wignall in forum Bugs
    Replies: 2
    Last Post: Feb 11, 2009, 9:44 AM

Tags for this Thread

Posting Permissions