Results 1 to 8 of 8

Thread: ExtJs 4.1 - tbar of tabpanel displays below the tab bar with tabposition as top

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    2
      0  

    Default Answered: ExtJs 4.1 - tbar of tabpanel displays below the tab bar with tabposition as top

    If in a tabpanel, we provide a tbar and also keep tabposition as top, then the tbar gets displayed below the tabbar as shown in the attached screenshot.

    How to correct this and get the tbar at top?

    Following is a small test case representing such a behaviour:

    Code:
    Ext.onReady(function(){
    	
    	new Ext.Viewport({
    		layout:"fit",
    		renderTo:Ext.getBody(),
    		items:[{
    			xtype: 'tabpanel',
    			id: 'mainTab',
    			activeTab: 0,
    			tabPosition:'top',
    			tbar: [{
    				text:"Documentation",
    				menu:[{
    					"text": "Vessel Documentation", 
    					"id":"idVesselDocumentation",
    					menu:[{
    						text:"Application For Berthing",
    						id:"idApplicationForBerthing",
    						handler:function(){
    								Ext.getCmp('mainTab').add({
    									xtype:"panel",
    									title:"Application For Berthing",
    									items:[{
    										xtype:"textfield",
    										fieldLabel:"Hello"										
    									}]
    								});
    						}
    					},{
    						text:"Berthing Monitoring"
    					},{
    						text:"VIA Generation"
    					},{
    						text:"ISPS Registration"
    					},{
    						text:"Voyage To Port Rotation"
    					}]
    				},{
    					"text": "Customer Documentation", 
    					"id":"idCustomerDocumentation",
    					menu:[{
    						text:"Party Master"
    					},{
    						text:"Party Role Mapper"
    					},{
    						text:"Consortium Master"
    					},{
    						text:"Special Agreement"
    					}]
    				}]
    			},{
    				text:"Container"
    			},{
    					text: "Masters"
    			}],
    			items:[
    				{
    					title:'First Tab',
    					html:'Content of the First Tab'
    				},
    				{
    					title:'Second Tab',
    					html:'Content of the Second Tab'
    				},{
    					title:'Third Tab',
    					html:'Content of the Third Tab'
    				}
    			]
    		}]
    	});
    });

    tabbar_tbar.jpg

  2. If you need a toolbar above the tabs you need to wrap it in another container that has a toolbar.

  3. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    603
    Answers
    67
    Vote Rating
    284
      0  

    Default

    If you need a toolbar above the tabs you need to wrap it in another container that has a toolbar.

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

    It is working as you instructed it to do:

    Code:
    xtype: 'tabpanel',
    id: 'mainTab',
    activeTab: 0,
    tabPosition:'top',
    tbar: [{ ... }]
    You placed it as an object of tabpanel

    As Tim explained, create a toolbar above the tabpanel.

    Scott.

  5. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    2
      0  

    Default

    Thanks for the post Tim and Scott. We too also used a panel to add tbar above tabpanel, but the only issue this leads to is an extra layer which gets added to layout in form of the panel.

    Thought there could be some other way out for this. But thanks for your time and sharing that its the only way out.

  6. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Answers
    676
    Vote Rating
    874
      0  

    Default

    Or...

    Code:
    Ext.require('*');
    Ext.onReady(function() {
    
        new Ext.Viewport({
            layout: "fit",
            items: [{
                xtype: 'tabpanel',
                id: 'mainTab',
                activeTab: 0,
                tabPosition: 'top',
                tbar: {
                    weight: -100,
                    items: [{
                        text: "Documentation",
                        menu: [{
                            "text": "Vessel Documentation",
                            "id": "idVesselDocumentation",
                            menu: [{
                                text: "Application For Berthing",
                                id: "idApplicationForBerthing",
                                handler: function() {
                                    Ext.getCmp('mainTab').add({
                                        xtype: "panel",
                                        title: "Application For Berthing",
                                        items: [{
                                            xtype: "textfield",
                                            fieldLabel: "Hello"
                                        }]
                                    });
                                }
                            }, {
                                text: "Berthing Monitoring"
                            }, {
                                text: "VIA Generation"
                            }, {
                                text: "ISPS Registration"
                            }, {
                                text: "Voyage To Port Rotation"
                            }]
                        }, {
                            "text": "Customer Documentation",
                            "id": "idCustomerDocumentation",
                            menu: [{
                                text: "Party Master"
                            }, {
                                text: "Party Role Mapper"
                            }, {
                                text: "Consortium Master"
                            }, {
                                text: "Special Agreement"
                            }]
                        }]
                    }, {
                        text: "Container"
                    }, {
                        text: "Masters"
                    }]
                },
                items: [{
                    title: 'First Tab',
                    html: 'Content of the First Tab'
                }, {
                    title: 'Second Tab',
                    html: 'Content of the Second Tab'
                }, {
                    title: 'Third Tab',
                    html: 'Content of the Third Tab'
                }]
            }]
        });
    });
    Evan Trimboli
    Twitter - @evantrimboli

  7. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    2
      0  

    Default

    Thanks Evant, will put this up and test.

  8. #7
    Sencha User
    Join Date
    Aug 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default Add Top.bottom toolbar and a content to panel

    Hi All,
    I'm new to Extjs. I want to create a panel in which I want a top toolbar,bottom toolbar and in the body section I need to add a Map.
    I tried out the examples in the site.but I'm not getting the correct one.Can any one suggest me.plz..Its urgent

    KK

  9. #8
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    603
    Answers
    67
    Vote Rating
    284
      0  

    Default

    In the future, create your own thread rather than posting in an old thread.

    If you haven't figured it out yet, it is not very difficult to have multiple toolbars. You can use the dockedItems config or the tbar and bbar config on a panel. I don't know what your map is, but it will need to be some sort of component to participate in the layout system.

    See the last panel in this example
    http://docs.sencha.com/extjs/4.2.1/#...-toolbars.html

Tags for this Thread

Posting Permissions

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