Results 1 to 2 of 2

Thread: Get active tab index within TabPanel when tabs generated dynamically

  1. #1
    Sencha User
    Join Date
    Mar 2019
    Posts
    20
    Answers
    4

    Default Answered: Get active tab index within TabPanel when tabs generated dynamically

    I have a TabPanel which generates tabs dynamically based on menu items selected and navigating throughout the application. I'm unable to capture the active tab index either by getTabIndex or getActiveItem. If I use examples I've seen out there which call to use:

    Code:
         var tabItem = tabName.getActiveItem();
         var tabIndex = tabName.items.indexOf(tabItem)
    this does not produce the tab index I want because I believe the indexing is looking at all the items within my tabPanel which includes the array.map function because anything other than tab 0 gets +1 (i.e. for tab index 1 I'm getting 2). Here is my code:

    Code:
    <TabPanel
                        id="appTabs" 
                        ref={tp => this.tabPanel = tp} 
                        _extreactIgnoreOrder 
                        shadow
                        style={{ backgroundColor: 'white'}}
                        activeItem={activeTab}
                        onActiveItemChange={this.handleTabClick.bind(this)}
                        tabBar={{
                            height: 48,
                            layout: {
                                pack: 'left',
                                overflow: 'scroller'
                            },
                            style: {
                                paddingRight: '52px'
                            }
                        }}
                    >
                        
                        { tabList.map(tab => (
                            <Container
                                title = {tab.title}
                                tab = {{ flex: 1, maxWidth: 150 }}
                                key = {tab.key}
                                scrollable
                                layout = { tab.key == "home" ? "center" : "fit" }
                                closable = { tab.key == "home" ? false : true }
                                onDestroy = {this.onCloseTab.bind(this, tab.key)}
                            >
                                <TabContentGenerator type={tab.type} id={tab.id} tabContent={tab.content} />
                            </Container>
                        ))}
                    </TabPanel>
    

  2. After doing some digging I noticed that there is _activeItemIndex property on the TabPanel component. Doing tabPanel.getActiveItemIndex() got me what I needed. This is not in the documentation. It state getActiveItem() and getTabIndex() but does not list getActiveItemIndex() as a method on the tabpanel component. Hope this helps someone else.

  3. #2
    Sencha User
    Join Date
    Mar 2019
    Posts
    20
    Answers
    4

    Default

    After doing some digging I noticed that there is _activeItemIndex property on the TabPanel component. Doing tabPanel.getActiveItemIndex() got me what I needed. This is not in the documentation. It state getActiveItem() and getTabIndex() but does not list getActiveItemIndex() as a method on the tabpanel component. Hope this helps someone else.

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
  •