May 28, 2013, 1:25 AM
[CLOSED] Nodes in TreePanel dissapear after collapsing another node
Here is my Scenario I have a TreePanel made in code behind. I use some javascript with direct method to refresh the tree. In my Tree I have root node, then another level of nodes, another level of nodes and then I have 1 more level of nodes with two nodes. The problem is the following when I expand last level nodes, when I collapse them, the nodes below them dissapear from the tree. If I use refresh they appear again.
I am using last Ext.Version just updated from trunk.I tried it in Chrome and Internet Explorer. Here are some pictures to ilustrate my problem.
Here is a sample I made to reproduce the problem:
I am using last Ext.Version just updated from trunk.I tried it in Chrome and Internet Explorer. Here are some pictures to ilustrate my problem.
Here is a sample I made to reproduce the problem:
<%@ Page Language="C#" AutoEventWireup="true" Inherits="TestExt.Arbol" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public class Project
{
private int _ProjectId;
public int ID
{
get { return _ProjectId; }
set {_ProjectId = value;}
}
private string _Description;
public string Description
{
get { return _Description; }
set { _Description = value; }
}
private string _Name;
public string Name
{
get { return _Name; }
set { _Name = value; }
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
this.ArmarArbol(this.MenuTree.Root);
}
}
private List<Project> GetAll()
{
List<Project> lista = new List<Project>();
Project pro = new Project();
pro.ID = 1;
pro.Name = "Test 1";
pro.Description = "Description 1";
lista.Add(pro);
pro = new Project();
pro.ID = 2;
pro.Name = "Test 2";
pro.Description = "Description 2";
lista.Add(pro);
pro = new Project();
pro.ID = 3;
pro.Name = "Test 3";
pro.Description = "Description 3";
lista.Add(pro);
return lista;
}
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.Icon = Icon.BoxWorld;
root.Text = "Projects";
root.NodeID = "0";
root.Href = this.Page.ResolveUrl("projects.aspx");
root.Expanded = false;
ConfigItem con = new ConfigItem("tabtitle", "Project", ParameterMode.Value);
root.CustomAttributes.Add(con);
nodes.Add(root);
try
{
List<Project> projs = this.GetAll();
foreach (Project pro in projs)
{
Ext.Net.Node nodoProyecto = new Ext.Net.Node();
nodoProyecto.Text = pro.Name;
nodoProyecto.NodeID = "P" + pro.ID.ToString();
nodoProyecto.Icon = Icon.Box;
root.Children.Add(nodoProyecto);
Ext.Net.Node nodoVariable = new Ext.Net.Node();
nodoVariable.Text = "Variables";
nodoVariable.Leaf = true;
nodoVariable.NodeID = "V" + pro.ID.ToString();
con = new ConfigItem("tabtitle", pro.Name + "/" + "Variable", ParameterMode.Value);
nodoVariable.CustomAttributes.Add(con);
nodoVariable.Href = this.Page.ResolveUrl("variables.aspx?id=" + pro.ID.ToString());
nodoProyecto.Children.Add(nodoVariable);
Ext.Net.Node nodoConexion = new Ext.Net.Node();
nodoConexion.Icon = Icon.ServerConnect;
nodoConexion.Text = "Connections";
nodoConexion.Leaf = true;
nodoConexion.NodeID = "C" + pro.ID.ToString();
nodoConexion.Href = this.Page.ResolveUrl("connections.aspx?id=" + pro.ID.ToString());
con = new ConfigItem("tabtitle", pro.Name + "/" + "Connection", ParameterMode.Value);
nodoConexion.CustomAttributes.Add(con);
nodoProyecto.Children.Add(nodoConexion);
Ext.Net.Node nodoExtraccion = new Ext.Net.Node();
nodoExtraccion.Icon = Icon.DatabaseTable;
nodoExtraccion.Text = "Extracts";
nodoExtraccion.Leaf = true;
nodoExtraccion.NodeID = "E" + pro.ID.ToString();
nodoExtraccion.Href = this.Page.ResolveUrl("extracts.aspx?id=" + pro.ID.ToString());
con = new ConfigItem("tabtitle", pro.Name + "/" + "Extract", ParameterMode.Value);
nodoExtraccion.CustomAttributes.Add(con);
nodoProyecto.Children.Add(nodoExtraccion);
Ext.Net.Node nodoCarga = new Ext.Net.Node();
nodoCarga.Icon = Icon.DatabaseCopy;
nodoCarga.Text = "Loads";
nodoCarga.Leaf = true;
nodoCarga.NodeID = "L" + pro.ID.ToString();
nodoCarga.Href = this.Page.ResolveUrl("loads.aspx?id=" + pro.ID.ToString());
con = new ConfigItem("tabtitle", pro.Name + "/" + "Load", ParameterMode.Value);
nodoCarga.CustomAttributes.Add(con);
nodoProyecto.Children.Add(nodoCarga);
Ext.Net.Node nodoProceso = new Ext.Net.Node();
nodoProceso.Icon = Icon.Cog;
nodoProceso.Text = "Jobs";
nodoProceso.NodeID = "J" + pro.ID.ToString();
nodoProceso.Href = this.Page.ResolveUrl("jobs.aspx?id=" + pro.ID.ToString());
con = new ConfigItem("tabtitle", pro.Name + "/" + "Job", ParameterMode.Value);
nodoProceso.CustomAttributes.Add(con);
nodoProyecto.Children.Add(nodoProceso);
Ext.Net.Node nodoProgramacion = new Ext.Net.Node();
nodoProgramacion.Icon = Icon.Clock;
nodoProgramacion.Text = "Schedule";
nodoProgramacion.Leaf = true;
nodoProgramacion.NodeID = "PR" + pro.ID.ToString();
nodoProgramacion.Href = this.Page.ResolveUrl("jobslistschedule.aspx?id=" + pro.ID.ToString());
con = new ConfigItem("tabtitle", pro.Name + "/" + "Schedule", ParameterMode.Value);
nodoProgramacion.CustomAttributes.Add(con);
nodoProceso.Children.Add(nodoProgramacion);
Ext.Net.Node nodoLog = new Ext.Net.Node();
nodoLog.Icon = Icon.PageWhiteText;
nodoLog.Text = "Log";
nodoLog.Leaf = true;
nodoLog.NodeID = "R" + pro.ID.ToString();
nodoLog.Href = this.Page.ResolveUrl("Log/jobslist.aspx?id=" + pro.ID.ToString());
con = new ConfigItem("tabtitle", pro.Name + "/" + "Log", ParameterMode.Value);
nodoLog.CustomAttributes.Add(con);
nodoProceso.Children.Add(nodoLog);
}
}
catch (Exception ex)
{
string titulo = GetLocalResourceObject("mensajeErrorTitulo").ToString();
X.Msg.Show(new MessageBoxConfig
{
Title = titulo,
Message = ex.Message,
Icon = MessageBox.Icon.ERROR,
Buttons = MessageBox.Button.OK
});
}
return nodes;
}
[DirectMethod]
public string RefreshMenu()
{
Ext.Net.NodeCollection nodes = this.ArmarArbol(null);
return nodes.ToJson();
}
</script>
<!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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Abacus BI</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.tabtitle,
closable: true,
loader: {
url: record.data.href,
renderer: "frame",
loadMask: {
showMask: true,
msg: record.data.tabtitle
}
},
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="65" runat="server" Border= "true" Region="North" Collapsible ="false" >
<Content>
</Content>
</ext:Panel>
<ext:Panel ID="PMenu" runat="server" Width="250" Border= "true" Region="West" Layout="Fit" Collapsible ="true" >
<Items>
<ext:Panel ID="PETL" runat="server" Layout="Accordion" Margins="0 0 0 0">
<LayoutConfig>
<ext:AccordionLayoutConfig OriginalHeader="true" />
</LayoutConfig>
<Items>
<ext:TreePanel Title="ETL" ID="MenuTree" runat="server" >
<Fields>
<ext:ModelField Name="tabtitle" Type="String"/>
</Fields>
<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>
Last edited by Daniil; May 28, 2013 at 1:19 PM.
Reason: [CLOSED]