[CLOSED] Topbar Treepanel within cardlayout stays empty

  1. #1

    [CLOSED] Topbar Treepanel within cardlayout stays empty

    I'm using the same treepanel standalone on another page. The Root is not filled yet, but I think not necessary for this example.

    I'm not able to see the topbar....

    <%@ page language="C#" autoeventwireup="true" codefile="GebruikerWijzigen.aspx.cs"
        inherits="beheer_GebruikerWijzigen" %>
    <%@ 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>Gebruiker wijzigen</title>
    
        <script type="text/javascript">
            var getChecked = function() {
                var msg = "",
                    selNodes = TreePanel1.getChecked("id");
                //Ext.net.DirectMethods.upDateDebiteuren(selNodes.toString());
            };
        
            var filterTree = function(el, e) {
                var tree = TreePanel1,
                    text = this.getRawValue();
    
                tree.clearFilter();
    
                if (Ext.isEmpty(text, false)) {
                    return;
                }
    
                if (e.getKey() === Ext.EventObject.ESC) {
                    clearFilter();
                } else {
                    var re = new RegExp(".*" + text + ".*", "i");
    
                    tree.filterBy(function(node) {
                        return re.test(node.text);
                    });
                }
            };
    
            var clearFilter = function() {
                var field = TriggerField1,
                    tree = TreePanel1;
    
                field.setValue("");
                tree.clearFilter();
                tree.getRootNode().collapseChildNodes(true);
                tree.getRootNode().ensureVisible();
            };
    
            var expandAll = function(el, e) {
                var tree = TreePanel1
                tree.expandAll();
            };
    
            var collapseAll = function(el, e) {
                var tree = TreePanel1
                tree.collapseAll();
            };
    
        </script>
    
        <link href="../style/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .icon-combo-item
            {
                background-repeat: no-repeat !important;
                background-position: 3px 50% !important;
                padding-left: 24px !important;
            }
        </style>
    </head>
    <body>
        <form id="frmGebruikerWijzigen" runat="server">
        <ext:resourcemanager id="ResourceManager1" runat="server" theme="Gray" locale="nl" />
        <ext:panel id="WizardPanel" runat="server" padding="5" height="420" layout="card"
            activeindex="0" autowidth="true">
            <items>
                <ext:panel id="Panel1" runat="server" title="Gegevens">
                    <items>
                        <ext:formpanel id="frmPanel" runat="server" padding="5" monitorresize="true" border="false">
                            <items>
                                <ext:compositefield id="CompositeField1" runat="server" anchorhorizontal="98%">
                                    <items>
                                        <ext:datefield id="dtIngangsDatum" allowblank="false" runat="server" flex="1" note="Ingangsdatum"
                                            format="dd-MM-yyyy" regex="^((([0][1-9]|[12][\d])|[3][01])[-/]([0][13578]|[1][02])[-/][1-9]\d\d\d)|((([0][1-9]|[12][\d])|[3][0])[-/]([0][13456789]|[1][012])[-/][1-9]\d\d\d)|(([0][1-9]|[12][\d])[-/][0][2][-/][1-9]\d([02468][048]|[13579][26]))|(([0][1-9]|[12][0-8])[-/][0][2][-/][1-9]\d\d\d)$"
                                            regextext="Dit is geen juist datumformaat. dd-mm-jjjj wordt verwacht" validateonblur="true" />
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField2" runat="server" fieldlabel="Naam" anchorhorizontal="98%">
                                    <items>
                                        <ext:textfield id="txtVoorletters" runat="server" flex="1" note="Voorletters" />
                                        <ext:textfield id="txtVoornaam" runat="server" flex="1" note="Voornaam" />
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField3" runat="server" anchorhorizontal="98%">
                                    <items>
                                        <ext:textfield id="txtVoorvoegsel" runat="server" flex="1" note="Voorvoegsel" />
                                        <ext:textfield id="txtAchternaam" runat="server" flex="1" note="Achternaam" allowblank="false"
                                            validateonblur="true" />
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField4" runat="server" fieldlabel="Afdeling" anchorhorizontal="98%">
                                    <items>
                                        <ext:textfield id="txtAfdeling" runat="server" flex="1" note="Afdelingsnaam" />
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField5" runat="server" fieldlabel="Contact" anchorhorizontal="98%">
                                    <items>
                                        <ext:textfield id="txtTelefoon" runat="server" flex="1" note="Telefoon" />
                                        <ext:textfield id="txtEmail" runat="server" flex="1" note="Email" allowblank="false"
                                            regex="^(\w+)([-+.][\w]+)*@(\w[-\w]*\.){1,5}([A-Za-z]){2,4}$" regextext="Onjuist email formaat" />
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField6" runat="server" fieldlabel="Inlog" anchorhorizontal="98%">
                                    <items>
                                        <ext:textfield id="txtInlognaam" runat="server" flex="1" note="Inlognaam" allowblank="false" />
                                        <ext:textfield id="txtWachtwoord" vtype="password" runat="server" flex="1" note="Wachtwoord"
                                            allowblank="false" />
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField7" runat="server" fieldlabel="Recht lease"
                                    anchorhorizontal="98%">
                                    <items>
                                        <ext:multicombo id="mcRechtenLease" runat="server" flex="1" selectionmode="Selection">
                                            <items>
                                                <ext:listitem text="Contracten" value="Contracten" />
                                                <ext:listitem text="Brandstofcontracten" value="Brandstofcontracten" />
                                                <ext:listitem text="Bestuurder wijzigen" value="Bestuurderwijzigen" />
                                                <ext:listitem text="Autobestellingen" value="Autobestellingen" />
                                                <ext:listitem text="Kilometerstanden" value="Kilometerstanden" />
                                            </items>
                                            <selecteditems>
                                            </selecteditems>
                                        </ext:multicombo>
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField8" runat="server" fieldlabel="Recht rent" anchorhorizontal="98%">
                                    <items>
                                        <ext:multicombo id="mcRechtenRent" runat="server" flex="1" selectionmode="Selection">
                                            <items>
                                                <ext:listitem text="Contracten" value="Contracten" />
                                                <ext:listitem text="Reserveringen" value="Reserveringen" />
                                                <ext:listitem text="Reservering invoeren" value="Reserveringinvoeren" />
                                            </items>
                                            <selecteditems>
                                            </selecteditems>
                                        </ext:multicombo>
                                    </items>
                                </ext:compositefield>
                                <ext:compositefield id="CompositeField9" runat="server" fieldlabel="Recht algemeen"
                                    anchorhorizontal="98%">
                                    <items>
                                        <ext:multicombo id="mcRechtenAlgemeen" runat="server" flex="1" selectionmode="Selection">
                                            <items>
                                                <ext:listitem text="Rapporten" value="Rapporten" />
                                                <ext:listitem text="Facturen" value="Facturen" />
                                                <ext:listitem text="Schademeldingen" value="Schademeldingen" />
                                            </items>
                                            <selecteditems>
                                            </selecteditems>
                                        </ext:multicombo>
                                    </items>
                                </ext:compositefield>
                            </items>
                        </ext:formpanel>
                    </items>
                </ext:panel>
                <ext:panel id="Panel2" runat="server" title="Debiteuren" border="false">
                    <items>
                        <ext:treepanel id="TreePanel1" runat="server" height="550" usearrows="true" autoscroll="true"
                            animate="true" enabledd="true" containerscroll="true" layout="Fit">
                            <topbar>
                                <ext:toolbar id="Toolbar1" runat="server">
                                    <items>
                                        <ext:toolbartextitem id="ToolbarTextItem1" runat="server" text="Filter:" />
                                        <ext:toolbarspacer />
                                        <ext:triggerfield id="TriggerField1" runat="server" enablekeyevents="true">
                                            <triggers>
                                                <ext:fieldtrigger icon="Clear" />
                                            </triggers>
                                            <listeners>
                                                <keyup fn="filterTree" buffer="250" />
                                                <triggerclick handler="clearFilter();" />
                                            </listeners>
                                        </ext:triggerfield>
                                        <ext:toolbarspacer />
                                        <ext:toolbarseparator />
                                        <ext:button id="Button1" runat="server" text="Alles aanvinken">
                                            <listeners>
                                                <click handler="#{TreePanel1}.getRootNode().cascade(function(n){n.ui.toggleCheck(true);});" />
                                            </listeners>
                                        </ext:button>
                                        <ext:toolbarseparator />
                                        <ext:button id="Button2" runat="server" text="Alles uitvinken">
                                            <listeners>
                                                <click handler="#{TreePanel1}.getRootNode().cascade(function(n){n.ui.toggleCheck(false);});" />
                                            </listeners>
                                        </ext:button>
                                        <ext:toolbarseparator />
                                        <ext:button id="btnExpand" text="Uitklappen" runat="server">
                                            <listeners>
                                                <click fn="expandAll" buffer="250" />
                                            </listeners>
                                        </ext:button>
                                        <ext:toolbarseparator />
                                        <ext:button id="Button3" text="Inklappen" runat="server">
                                            <listeners>
                                                <click fn="collapseAll" buffer="250" />
                                            </listeners>
                                        </ext:button>
                                        <ext:toolbarseparator />
                                        <ext:button icon="BulletDisk" id="Button4" text="Opslaan" runat="server">
                                            <listeners>
                                                <click fn="getChecked" />
                                            </listeners>
                                        </ext:button>
                                    </items>
                                </ext:toolbar>
                            </topbar>
                            <Root>
                            </Root>
                        </ext:treepanel>
                    </items>
                </ext:panel>
                <ext:panel id="Panel3" runat="server" html="<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>"
                    border="false" header="false" />
            </items>
            <buttons>
                <ext:button id="btnPrev" runat="server" text="Vorige" disabled="true" icon="PreviousGreen">
                    <directevents>
                        <click onevent="Prev_Click">
                            <extraparams>
                                <ext:parameter name="index" value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)"
                                    mode="Raw" />
                            </extraparams>
                        </click>
                    </directevents>
                </ext:button>
                <ext:button id="btnNext" runat="server" text="Volgende" icon="NextGreen">
                    <directevents>
                        <click onevent="Next_Click">
                            <extraparams>
                                <ext:parameter name="index" value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)"
                                    mode="Raw" />
                            </extraparams>
                        </click>
                    </directevents>
                </ext:button>
            </buttons>
        </ext:panel>
        </form>
    </body>
    </html>
    Codebehind:
    using System;
    using Ext.Net;
    
    public partial class beheer_GebruikerWijzigen : System.Web.UI.Page
    {
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (ExtNet.IsAjaxRequest) return;
        }
    
        protected void Next_Click(object sender, DirectEventArgs e)
        {
            int index = int.Parse(e.ExtraParams["index"]);
    
            if ((index + 1) < WizardPanel.Items.Count)
            {
                WizardPanel.ActiveIndex = index + 1;
            }
    
            CheckButtons();
        }
    
        protected void Prev_Click(object sender, DirectEventArgs e)
        {
            int index = int.Parse(e.ExtraParams["index"]);
    
            if ((index - 1) >= 0)
            {
                WizardPanel.ActiveIndex = index - 1;
            }
    
            CheckButtons();
        }
    
        private void CheckButtons()
        {
            int index = WizardPanel.ActiveIndex;
    
            btnNext.Disabled = index == (WizardPanel.Items.Count - 1);
            btnPrev.Disabled = index == 0;
        }
    
    }
    Don't know where to look :)

    Martin
    Last edited by Daniil; Nov 22, 2010 at 9:20 AM. Reason: [CLOSED]
  2. #2
    Hi Martin,

    Here is a quote from ExtJS docs
    A TreePanel must have a root node before it is rendered.
    See,
    http://dev.sencha.com/deploy/dev/doc...tree.TreePanel

    So, to avoid an error please set Root node.

    Example
    <Root>
        <ext:TreeNode Text="Hello!" />
    </Root>
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Martin,

    Here is a quote from ExtJS docs


    See,
    http://dev.sencha.com/deploy/dev/doc...tree.TreePanel

    So, to avoid an error please set Root node.

    Example
    <Root>
        <ext:TreeNode Text="Hello!" />
    </Root>
    Did it. Still no topbar :(

    Martin
  4. #4
    Hi,

    I guess that you have to set Layout="fit" for Panel2 or just to remove that panel
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Quote Originally Posted by Vladimir View Post
    Hi,

    I guess that you have to set Layout="fit" for Panel2 or just to remove that panel
    Did it ! Thanks ..

    Martin

Similar Threads

  1. TopBar Size Problem in TreePanel, panle and grid panel
    By Ganesh3.shirsath in forum 1.x Help
    Replies: 0
    Last Post: Nov 18, 2010, 11:38 AM
  2. [CLOSED] TreePanel does not show with TopBar on Panel in a TabPanel
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 24, 2010, 6:19 PM
  3. Replies: 0
    Last Post: Apr 09, 2009, 5:12 PM
  4. [CLOSED] Model + Shadow stays grayed out
    By Zarzand in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Apr 03, 2009, 2:40 PM
  5. [CLOSED] CardLayout rendering ALL panel contents at once AND OUTSIDE the CardLayout?
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 26, 2009, 3:08 PM

Posting Permissions