1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

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

    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
    536
    Answers
    61
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      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
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    1
    netemp is on a distinguished road

      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
    16,835
    Answers
    453
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    Thanks Evant, will put this up and test.

  8. #7
    Sencha User
    Join Date
    Aug 2013
    Posts
    1
    Vote Rating
    0
    karthikakd is on a distinguished road

      0  

    Default Add Top.bottom toolbar and a content to panel

    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
    536
    Answers
    61
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      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