Results 1 to 6 of 6

Thread: Help adding a toolbar with menu item to a Panel in the north region of a viewport

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    6

    Default Help adding a toolbar with menu item to a Panel in the north region of a viewport

    Hello! I'm new to ExtJS and need some help understanding how to add a toolbar to a panel, where the panel is in the northern region of a viewport. It's quite likely that I'm going about this all wrong. I googled my butt off and could not find an answer that worked for me.

    Here's my code. Please note that I don't have a <div id="toolbar"> defined in my HTML. I'm not sure if I need one, or how that would even work.

    PHP Code:

            Ext
    .require('Ext.tab.*');
            
            
    Ext.onReady(function(){
            
                
    // Create Toolbar 
             
                
    var tb = new Ext.Toolbar('toolbar', [{
                    
    text:'Our first Menu',
                    
    menu: {
                        
    id'basicMenu',
                            
    items: [
                                {
                                    
    text:'An item',
                                }
                            ]
                    }
                }]);
            
                
    // Create panel for north region
            
                
    var north_region = new Ext.Panel({
                    
    id'contentArea',
                    
    region'north',                        
                    
    borderfalse,
                    
    margins'0 0 5 0'        
                
    });
            
                var 
    viewport Ext.create('Ext.container.Viewport', {
                    
    layout'border',
                    
    items: [
                        
    north_region
                        {
                            
    region'west',
                            
    collapsibletrue,
                            
    title'Navigation',
                            
    width150
                        
    }, 
                        {
                            
    region'south',
                            
    title'South Panel',
                            
    collapsibletrue,
                            
    html'Information goes here',
                            
    splittrue,
                            
    height100,
                            
    minHeight100
                        
    }, 
                        {
                            
    region'east',
                            
    title'East Panel',
                            
    collapsibletrue,
                            
    splittrue,
                            
    width150
                        
    }, 
                        {
                            
    region'center',
                            
    xtype'tabpanel'// TabPanel itself has no title
                            
    activeTab0,      // First tab active by default
                            
    items: {
                                
    title'Default Tab',
                                
    html'The first tab\'s content. Others may be added dynamically'
                            
    }
                        }
                    ]
                });
            
                
    north_region.add(tb);
                
    north_region.doLayout();
            
            }); 
    Here's what it looks like:

    toolbar.jpg

    The code.. north_region.add(tb); .. does seem to add something to the top of my layout. It appears to be an empty toolbar.

    Any suggestions?

    Thanks!
    - Bret

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    56

    Default

    Code:
    var north_region = new Ext.Panel({
        id: 'contentArea',
        tbar : tb,
        ...
    });
    The add method on a panel is for component items, not toolbar items. You'd need to be using addDocked for the toolbar. But... I think it's easier to just put it in the config using the tbar/bbar shorthand properties.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    6

    Default

    Hmm, I'm still having trouble, even after putting in the 'tbar' code. Here's my new code

    PHP Code:
            Ext.onReady(function(){
            
                
    // Create Toolbar 
             
                
    var tb = new Ext.Toolbar('toolbar', [{
                    
    text:'Our first Menu',
                    
    menu: {
                        
    id'basicMenu',
                            
    items: [
                                {
                                    
    text:'An item',
                                }
                            ]
                    }
                }]);
            
                
    // Create panel for north region
            
                
    var north_region = new Ext.Panel({
                    
    id'contentArea',
                    
    region'north',                        
                    
    tbar tb,
                    
    height:30            
                
    });
            
                var 
    viewport Ext.create('Ext.container.Viewport', {
                    
    layout'border',
                    
    items: [
                        
    north_region
                        {
                            
    region'west',
                            
    collapsibletrue,
                            
    title'Navigation',
                            
    width150
                        
                        
    }, 
                        {
                            
    region'south',
                            
    title'South Panel',
                            
    collapsibletrue,
                            
    html'Information goes here',
                            
    splittrue,
                            
    height100,
                            
    minHeight100
                        
    }, 
                        {
                            
    region'east',
                            
    title'East Panel',
                            
    collapsibletrue,
                            
    splittrue,
                            
    width150
                        
    }, 
                        {
                            
    region'center',
                            
    xtype'tabpanel'// TabPanel itself has no title
                            
    activeTab0,      // First tab active by default
                            
    items: {
                                
    title'Default Tab',
                                
    html'The first tab\'s content. Others may be added dynamically'
                            
    }
                        }
                    ]
                });
            
                
    north_region.doLayout(); 
    My HTML body is empty. The toolbar does seem to show up (I gave it a height of 30 just to be sure), but it appears empty:

    toolbar2.jpg

    Here's the generated HTML for the northern content area, plus the toolbar:
    PHP Code:
    <div id="contentArea" class="x-panel x-box-item x-panel-default" style="height: 30px; width: 774px; margin: 0pt; left: 0px; top: 0px;" role="presentation"
    <
    div id="toolbar" class="x-toolbar x-toolbar-default x-docked x-docked-top x-toolbar-docked-top x-toolbar-default-docked-top x-box-layout-ct" role="toolbar" tabindex="-1" style="width: 774px; left: 0px; top: 0px;">
    <
    div id="ext-gen1017" class="x-panel-body  x-panel-body-default x-panel-body-default" style="height: 25px; left: 0px; top: 5px; width: 774px;">
    </
    div>
    </
    div
    It appears that the toolbar is being added... I just don't see the menu in the toolbar. Is this part of my code (which I copied from http://www.sencha.com/learn/legacy/T...xt_Menu_Widget) correct?

    PHP Code:
                var tb = new Ext.Toolbar('toolbar', [{
                    
    text:'Our first Menu',
                    
    menu: {
                        
    id'basicMenu',
                            
    items: [
                                {
                                    
    text:'An item',
                                }
                            ]
                    }
                }]); 

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    6

    Default

    James19.... I'm not sure what you mean by "great suggestion". I just wanted to warn people that the code I posted doesn't work yet. Hopefully someone can help me out.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    56

    Default

    Lazy Instantiation

    Seems to work better with lazy instantiation. Try this -

    http://jsfiddle.net/7sp6k/

    Code:
        // Create Menu
        var menu = {
            xtype: 'menu',
            id: 'basicMenu',
            items: [{
                text: 'An Item'
            }]
        };
        //Create toolbar
        var tb = {
            xtype: 'toolbar',
            items: [{
                text: 'Our first Menu',
                menu: menu
            }]
        };
    
        // Create panel for north region
        var north_region = new Ext.Panel({
            id: 'contentArea',
            region: 'north',
            tbar: tb,
            height: 50
        });
    ...

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    6

    Default

    Erikvip, you are my savior. Thanks so much! Works great.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •