1. #1
    Ext User
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
    nitinkcv is on a distinguished road

      0  

    Default Adding a dropdown widget over a tab inside a TabPanel

    Adding a dropdown widget over a tab inside a TabPanel


    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:
    Code:
    <div id="authoring_tabs">
    	<div class="x-hide-display" id="myTree"></div>
    	<div class="x-hide-display" id="newTree"></div>
    </div
    ExtJs Code:
    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.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
    nitinkcv is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).

  5. #5
    Ext User
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
    nitinkcv is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Location
    UK
    Posts
    13
    Vote Rating
    1
    adambuckley is on a distinguished road

      0  

    Default This is how I did it

    This is how I did it


    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

    Code:
    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&nbsp;& 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.
    Code:
    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;
    }
    Last edited by adambuckley; 28 Oct 2012 at 7:32 PM. Reason: Added 4.1 note

Similar Threads

  1. Adding new tab from inside TabPanel
    By blizzard182 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jul 2010, 9:09 AM
  2. adding dynamically a new tab with a formpanel inside
    By sre in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 7 Dec 2009, 2:28 AM
  3. [Solved] Adding form fields inside TabPanel
    By KajaSheen in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Feb 2008, 1:10 PM
  4. adding image inside tabpanel....
    By ajax&me in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Jan 2008, 12:49 AM

Thread Participants: 2

Tags for this Thread