PDA

View Full Version : [CLOSED] TreePanel breaks ViewPort layout



RCN
Jan 28, 2015, 4:05 PM
When TreePanel is placed inside a ViewPort, the layout breaks:

http://forums.ext.net/attachment.php?attachmentid=19711&stc=1


<!DOCTYPE html>
<html>
<head id="Head2" runat="server">
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" runat="server" />
<ext:Viewport Layout="FitLayout" Border="false" runat="server">
<Items>
<ext:Panel Layout="BorderLayout" Border="false" BodyBorder="0" runat="server">
<Items>
<%--CENTER--%>
<ext:Panel Region="Center" Title="Ext.Net" Frame="false" Width="500" Html="Content" runat="server" />
<%--EAST--%>
<ext:Panel Title="East" Region="East" MinWidth="250" Layout="Accordion" runat="server">
<Items>
<ext:TreePanel Title="Products" RootVisible="false" runat="server">
<Root>
<ext:Node Text="Root">
<Children>
<ext:Node Text="Framework" Expanded="true">
<Children>
<ext:Node Text="Ext.Net" Icon="Building" Leaf="True" />
<ext:Node Text="Sencha" Icon="Building" Leaf="True" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
<ext:Panel Title="Ext.Net" runat="server" />
<ext:Panel Title="Sencha" runat="server" />
<ext:Panel Title=".Net Framwork" runat="server" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


http://forums.ext.net/attachment.php?attachmentid=19712&stc=1


<!DOCTYPE html>
<html>
<head id="Head2" runat="server">
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" runat="server" />
<ext:Viewport Layout="FitLayout" Border="false" runat="server">
<Items>
<ext:Panel Layout="BorderLayout" Border="false" BodyBorder="0" runat="server">
<Items>
<%--CENTER--%>
<ext:Panel Region="Center" Title="Ext.Net" Frame="false" Width="500" Html="Content" runat="server" />
<%--EAST--%>
<ext:TreePanel Region="East" Title="Products" RootVisible="false" runat="server">
<Root>
<ext:Node Text="Root">
<Children>
<ext:Node Text="Framework" Expanded="true">
<Children>
<ext:Node Text="Ext.Net" Icon="Building" Leaf="True" />
<ext:Node Text="Sencha" Icon="Building" Leaf="True" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


When TreePanel is removed, everything works as expected.
http://forums.ext.net/attachment.php?attachmentid=19721&stc=1


<!DOCTYPE html>
<html>
<head id="Head2" runat="server">
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" runat="server" />
<ext:Viewport Layout="FitLayout" Border="false" runat="server">
<Items>
<ext:Panel Layout="BorderLayout" Border="false" BodyBorder="0" runat="server">
<Items>
<%--CENTER--%>
<ext:Panel Region="Center" Title="Ext.Net" Frame="false" Width="500" Html="Content" runat="server" />
<%--EAST--%>
<ext:Panel Title="East" Region="East" MinWidth="250" Layout="Accordion" runat="server">
<Items>
<ext:Panel Title="Ext.Net" runat="server" />
<ext:Panel Title="Sencha" runat="server" />
<ext:Panel Title=".Net Framwork" runat="server" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

RCN
Jan 28, 2015, 4:07 PM
Similar issues:

http://forums.ext.net/showthread.php?51311
http://forums.ext.net/showthread.php?52071
http://forums.ext.net/showthread.php?52311

Dimitris
Jan 29, 2015, 11:14 AM
There is something wrong with the layouts in your example. For example, why Fit in Viewport and not Border layout directly? And I think there is some over-nesting, too.

The following example works and is based on the online Viewport example:



<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head id="Head2" runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" ScriptMode="Debug" runat="server" Theme="Default" />
<ext:Viewport ID="Viewport1" Layout="BorderLayout" Border="false" runat="server">
<Items>
<ext:Panel ID="TabPanel1" runat="server" Region="Center" Html="Center" Width="500"/>
<ext:Panel ID="Panel2"
runat="server"
Title="East"
Region="East"
Layout="AccordionLayout"
Width="225"
MinWidth="250"
Split="true"
Collapsible="true">
<Items>
<ext:TreePanel ID="TreePanel1" Title="Products" RootVisible="false" runat="server">
<Root>
<ext:Node Text="Root">
<Children>
<ext:Node Text="Framework" Expanded="true">
<Children>
<ext:Node Text="Ext.Net" Icon="Building" Leaf="True" />
<ext:Node Text="Sencha" Icon="Building" Leaf="True" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
<ext:Panel ID="Panel1" Title="Ext.Net" runat="server" />
<ext:Panel ID="Panel3" Title="Sencha" runat="server" />
<ext:Panel ID="Panel4" Title=".Net Framwork" runat="server" />
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>