Results 1 to 2 of 2

Thread: Nested Vertical Tabs as Menu Selection Extjs 6

  1. #1
    Touch Premium Member
    Join Date
    Mar 2012
    Posts
    115
    Answers
    13

    Default Answered: Nested Vertical Tabs as Menu Selection Extjs 6

    Trying to implement nested vertical tabs as a menu.

    First (parent) level tabs stay on screen all the time.

    Currently when you activate on these tabs it load a nested tab panel (like a sub menu)

    What I would like to archive is when you click (activate) the parent tab its shows the nested tab bar, once you activate the child tab the child tab bar hides.

    If then you hover over the active parent tab it shows the child tab bar again.

    Clicking any other parent tab should show the child tabs for that tab.

    tia
    harry

  2. In typical forum fashion, after I posted I figured it out

    In my parent tab I added listeners in the items object for each tab.

    Code:
         {
           	title: chitXML.data.toolbarEmployees,
            iconCls: 'fa-users',
            layout     : 'absolute',
            itemID: 'employeetab',
            tabConfig: {
                listeners: {
                    click: 'onEmployeeTabClick'
                }
            },
            items: [{
               xtype: 'employeetab'
            }]
        }
    Then in the view controller I added a small function, simply checks if the child tab is hidden then shows

    Code:
        onEmployeeTabClick: function(ele , event , eOpts){
        	var empolyeeTab = ele.card.items.items[0].getTabBar();
        	if (empolyeeTab.isHidden()) empolyeeTab.show();
        }
    
    Then in the nested child tab I added same listener

    Code:
     items: [{
            title: chitXML.data.employeeTabTitle,
            iconCls: 'fa-user',
            anchor: '-0 -0 -0 -0',
            layout: 'absolute',
            autoScroll: true,
            tabConfig: {
                listeners: {
                    click: 'onEmployeeTabClick'
                }
            },
            items: [{
                xtype: 'employeelist'
            }]
        }]
    And again in the child view controller I added a function that check if tab is shown hide.

    Code:
        EmployeeTab: '',
        
        afterRender: function(panel) {
        	this.EmployeeTab = panel.getTabBar();
        },
        onEmployeeTabClick: function(ele , event , eOpts){
        	if (this.EmployeeTab.isVisible()) this.EmployeeTab.hide();
        }
    Hope this helps some one else

  3. #2
    Touch Premium Member
    Join Date
    Mar 2012
    Posts
    115
    Answers
    13

    Default

    In typical forum fashion, after I posted I figured it out

    In my parent tab I added listeners in the items object for each tab.

    Code:
         {
           	title: chitXML.data.toolbarEmployees,
            iconCls: 'fa-users',
            layout     : 'absolute',
            itemID: 'employeetab',
            tabConfig: {
                listeners: {
                    click: 'onEmployeeTabClick'
                }
            },
            items: [{
               xtype: 'employeetab'
            }]
        }
    Then in the view controller I added a small function, simply checks if the child tab is hidden then shows

    Code:
        onEmployeeTabClick: function(ele , event , eOpts){
        	var empolyeeTab = ele.card.items.items[0].getTabBar();
        	if (empolyeeTab.isHidden()) empolyeeTab.show();
        }
    
    Then in the nested child tab I added same listener

    Code:
     items: [{
            title: chitXML.data.employeeTabTitle,
            iconCls: 'fa-user',
            anchor: '-0 -0 -0 -0',
            layout: 'absolute',
            autoScroll: true,
            tabConfig: {
                listeners: {
                    click: 'onEmployeeTabClick'
                }
            },
            items: [{
                xtype: 'employeelist'
            }]
        }]
    And again in the child view controller I added a function that check if tab is shown hide.

    Code:
        EmployeeTab: '',
        
        afterRender: function(panel) {
        	this.EmployeeTab = panel.getTabBar();
        },
        onEmployeeTabClick: function(ele , event , eOpts){
        	if (this.EmployeeTab.isVisible()) this.EmployeeTab.hide();
        }
    Hope this helps some one else

Similar Threads

  1. ExtJS 4.2.1 Vertical tabs
    By gzhelev in forum Ext: Q&A
    Replies: 3
    Last Post: 6 Mar 2015, 3:37 PM
  2. ExtJS 4 - nested tabs in form
    By logicoteam in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 12 Jun 2014, 12:33 PM
  3. ExtJs 4 - nested tabs in form
    By logicoteam in forum Sencha Ext JS Q&A
    Replies: 2
    Last Post: 8 Jun 2014, 5:38 AM
  4. [CLOSED] [ExtJS 4.0.2a] Nested text/combo in menu does not allow spaces
    By sam_hewitt in forum Ext:Bugs
    Replies: 1
    Last Post: 8 Dec 2012, 9:40 PM
  5. Selection Rectangle on Tabs and Menu
    By iyeh in forum Sencha GXT Q&A
    Replies: 2
    Last Post: 20 May 2010, 10:00 AM

Posting Permissions

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