Adding a dropdown widget over a tab inside a TabPanel

[nitinkcv]

Hi all,

Not sure whether this is the right place to post but here i go.

I'm making use of the TabPanel component and i'm trying to have a dropdown over (not inside) my 2nd tab. I'm building up my tabpanel like the following (nothing fancy).

HTML code:

<div id="authoring_tabs">
	<div class="x-hide-display" id="myTree"></div>
	<div class="x-hide-display" id="newTree"></div>
</div

ExtJs Code:

var tabs = new Ext.TabPanel({
	renderTo: 'authoring_tabs',
	activeTab: 0,
	autoShow: true,		            
	plain: true,
	autoWidth: true,
	defaults: {
		autoHeight: true
	},
	items: [{
		contentEl: 'myTree',
		title: 'Title 1'
	},
	{
		contentEl: 'newTree',
		title: 'Title 2'
	}],
	listeners: {
		'tabchange': function(tabpanel, tab) {
			
			// only render the appropriate tab content
			switch (tab.contentEl) {
			case 'myTree':
				
				break;
			case 'newTree':
				
				break;
			}
		}
	}
});

For a sample of what i'm trying to achieve please have a look @ http://moronicbajebus.com/playground...ma-menu/files/. this doesnt use the tab example but i'm thinking something like the 'about' tab being my 2nd tab which has the drop down over it.

Could anyone please let me know how i can do this?

Thanks.

[Condor]

1. This is NOT the way to put components (in your case treepanels) inside a tabpanel! Those treepanels should be the tabpanel items and you should not use contentEl or renderTo.

2. With a dropdown you mean a menu? In that case you shouldn't be using a TabPanel at all. You should be using a normal panel with a tbar.

[nitinkcv]

Thanks for your reply.
Ok let me kinda elaborate on the design i'm trying to build.

From the design i have a panel which has a TreePanel inside it, while over my 2nd Panel, i have the menu dropdown. On choosing an item in my menu dropdown i paint another TreePanel inside it.

For the TreePanel i have a renderTo property which is the id of my Div(myTree).

So are you suggesting to use two panel, one panel which houses my first treeepanel and the other Panel (which has the tbar to have my menu drop down) which will house my other treepanel.
I was thinking of using tabPanel since i need only one of my tabs to be visible.

Thanks

[Condor]

Really, DON'T use renderTo inside a container!!! Instead, add() the component to the container and call doLayout().

If you render components inside a container, the container isn't notified, so it is not able to:
1. Remove the component when the container is destroyed, which will result in a memory leak.
2. Size the components according to the layout.

Make your Panel layout:'card', so it can switch between the different pages (= treepanels).

[nitinkcv]

Thanks for your reply.

Actually the card layout is something thats for suitable for a wizard based solution. I could see an example of a card layout from http://dev.sencha.com/deploy/dev/exa...t-browser.html. Please let me know if i'm wrong.

Also what i'm trying to build is more of a tab based layout, but the problem being i need to have a menu over my tab. I think a pic could be more descriptive.
panel.JPG

Here the layout is tab based and over my 2nd tab i have my Dropdown. Also i tried to have tabpanel having two panels (to have tbar for my 2nd Panel) as its items, but that didnt work out as well.

Thanks.

[Condor]

A tbar can look like tabs too (see example).

[adambuckley]

Just add menu items to a tab. Set the content for that tab to be a container with a card layout. Add handlers to the menu items to set the active card. Add a CSS theme.

NB. This has only been tested with Ext JS 4.1

Ext.onReady(function()
{
    var orderMenu = Ext.create('Ext.menu.Menu',
    {
        plain : true,
        cls : 'orderMenu',


        defaults :
        {
            plain : true,
            cls : 'orderMenuItem'
        },


        items : [
        {
            text : 'Current Orders',
            handler : function()
            {
                Ext.getCmp('cardContainer').getLayout().setActiveItem(0);
            }
        },


        {
            text : 'Order History',
            handler : function()
            {
                Ext.getCmp('cardContainer').getLayout().setActiveItem(1);
            }
        } ]
    });


    Ext.create('Ext.tab.Panel',
    {
        renderTo : Ext.getBody(),
        style : 'margin:10px;',
        plain : true,


        defaults :
        {
            bodyStyle : 'padding:10px;'
        },


        items : [
        {
            title : 'Orders & 9660;',


            tabConfig :
            {
                xtype : 'tab',
                menu : orderMenu
            },


            items :
            {
                id : 'cardContainer',
                xtype : 'container',
                layout : 'card',


                defaults :
                {
                    border : false
                },


                items : [
                {
                    html : 'Current Orders'
                },


                {
                    html : 'Order History'
                } ]
            }
        },
        
        {
            title : 'Normal Tab',
            html : 'Normal tab content'
        } ]
    });
});

The corresponding CSS.

div.orderMenu div,div.orderMenu div div {
    background: #DEECFD !important;
    font-weight: bold;
    font-size: 11px;
    color: #416DA3;
}


div.orderMenuItem {
    padding: 5px;
    border: thin solid #DEECFD !important;
}


div.orderMenuItem:hover {
    border: thin solid #416DA3 !important;
    background: white !important;
}