[CLOSED] TreePanel does not show with TopBar on Panel in a TabPanel

**SFritsche** · Aug 23, 2010, 8:48 PM

Ponder this code which is a variation on https://examples1.ext.net/#/TreePane...h_Static_Tree/ where I have placed the TreePanel in a Panel inside a TabPanel. I put a TopBar on the Panel. With the TopBar, the TreePanel does no show. Without the TopBar, the TreePanel shows as expected. Is this a bug or an I doing something improperly?

Thanks,
-Steve

<%@ 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">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack && !X.IsAjaxRequest)
        {
            this.BuildTree(TreePanel1.Root);
        }
    }
    private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
    {
        if (nodes == null)
        {
            nodes = new Ext.Net.TreeNodeCollection();
        }
        Ext.Net.TreeNode root = new Ext.Net.TreeNode();
        root.Text = "Root";
        nodes.Add(root);
        string prefix = DateTime.Now.Second + "_";
        for (int i = 0; i < 10; i++)
        {
            Ext.Net.TreeNode node = new Ext.Net.TreeNode();
            node.Text = prefix + i;
            root.Nodes.Add(node);
        }
        return nodes;
    }
    [DirectMethod]
    public string RefreshMenu()
    {
        Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);
        return nodes.ToJson();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title>SiteMap - Ext.NET Examples</title>
    <script type="text/javascript">
        var refreshTree = function(tree) {
            Ext.net.DirectMethods.RefreshMenu({
                success: function(result) {
                    var nodes = eval(result);
                    if (nodes.length > 0) {
                        tree.initChildren(nodes);
                    }
                    else {
                        tree.getRootNode().removeChildren();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabPanel runat="server">
        <Items>
            <ext:Panel Title="The One" runat="server">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button Text="Search" Icon="UserMagnify" Flat="false" runat="server" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:TreePanel 
                    ID="TreePanel1" 
                    runat="server" 
                    Icon="Anchor" 
                    Title="Tree"
                    AutoScroll="true" 
                    Width="250" 
                    Collapsed="False" 
                    CollapseFirst="True" 
                    HideParent="False"
                    RootVisible="False" 
                    BodyStyle="padding-left:10px">
                    <Tools>            
                        <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />
                    </Tools>
                 </ext:TreePanel>
            </Items>
            </ext:Panel>
            <ext:Panel Title="The Other" runat="server">
            <Items>
            </Items>
            </ext:Panel>
        </Items>
        </ext:TabPanel>
    </form>
</body>
</html>

**Daniil** · Aug 24, 2010, 7:42 AM

Hello!

Thank you for the report. Actually there is an issue. It appears either there is a TopBar or a BottomBar. We're investigating.

Example

<%@ 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">
<head runat="server">
    <title>Issue TreePanel within Panel with TopBar - Ext.NET Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TabPanel runat="server">
        <Items>
            <ext:Panel runat="server" Title="Tab">
                <TopBar>
                    <ext:Toolbar runat="server"/>
                </TopBar>
                <Items>
                    <ext:TreePanel runat="server">
                        <Root>
                            <ext:TreeNode Text="Composers" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Beethoven" />
                                </Nodes>
                            </ext:TreeNode>
                        </Root>
                    </ext:TreePanel>
                </Items>
                <%--<BottomBar>
                    <ext:Toolbar runat="server"/>
                </BottomBar>--%>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
    </form>
</body>
</html>

**Vladimir** · Aug 24, 2010, 12:13 PM

Hi,

Please always set explicit height or place a control inside layout which manages control's size
Also you can use AutoHeight="true" (please note that AutoHeight doesn't work in all cases because it is just css instruction 'width:auto')

<%@ 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" >

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack && !X.IsAjaxRequest)
        {
            this.BuildTree(TreePanel1.Root);
        }
    }
    private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
    {
        if (nodes == null)
        {
            nodes = new Ext.Net.TreeNodeCollection();
        }
        Ext.Net.TreeNode root = new Ext.Net.TreeNode();
        root.Text = "Root";
        nodes.Add(root);
        string prefix = DateTime.Now.Second + "_";
        for (int i = 0; i < 10; i++)
        {
            Ext.Net.TreeNode node = new Ext.Net.TreeNode();
            node.Text = prefix + i;
            root.Nodes.Add(node);
        }
        return nodes;
    }
    [DirectMethod]
    public string RefreshMenu()
    {
        Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);
        return nodes.ToJson();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title>SiteMap - Ext.NET Examples</title>

    <script type="text/javascript">
        var refreshTree=function(tree) {
            Ext.net.DirectMethods.RefreshMenu({
                success: function(result) {
                    var nodes=eval(result);
                    if(nodes.length>0) {
                        tree.initChildren(nodes);
                    }
                    else {
                        tree.getRootNode().removeChildren();
                    }
                }
            });
        }
    </script>

</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:TabPanel runat="server" AutoHeight="true">
        <Items>
            <ext:Panel Title="The One" runat="server" AutoHeight="true">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button Text="Search" Icon="UserMagnify" Flat="false" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:TreePanel ID="TreePanel1" runat="server" Icon="Anchor" Title="Tree" AutoScroll="true"
                        Width="250" Collapsed="False" CollapseFirst="True" HideParent="False" RootVisible="False"
                        BodyStyle="padding-left:10px" AutoHeight="true">
                        <Tools>
                            <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />
                        </Tools>
                    </ext:TreePanel>
                </Items>
            </ext:Panel>
            <ext:Panel Title="The Other" runat="server" AutoHeight="true">
                <Items>
                </Items>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
    </form>
</body>
</html>

**SFritsche** · Aug 24, 2010, 6:19 PM

Perfect. That resolved it. Thanks.

-Steve

Thread: [CLOSED] TreePanel does not show with TopBar on Panel in a TabPanel

Thread Tools

Search Thread

Display

[CLOSED] TreePanel does not show with TopBar on Panel in a TabPanel

TreePanel with TopBar

Similar Threads

[CLOSED] TabPanel Show/Hide Panel

Show items of a panel in a tabpanel

[CLOSED] TreePanel with panel show other related data

TopBar Size Problem in TreePanel, panle and grid panel

[CLOSED] [1.0] TabPanel show hidden Panel

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] TreePanel does not show with TopBar on Panel in a TabPanel

[CLOSED] TreePanel does not show with TopBar on Panel in a TabPanel

TreePanel with TopBar

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us