Results 1 to 4 of 4

Thread: While using TabPanel only render active tab and only the first time

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2019
    Posts
    16
    Answers
    4
    Vote Rating
    1
      0  

    Default Answered: While using TabPanel only render active tab and only the first time

    I'm very new to ExtReact and ExtJS, so with that said.....I'm creating an application with multiple tabs using the TabPanel component. The default behavior appears to be that all tabs are rendered during rendering of the TabPanel. However, I only want to render the active tab and render it only the first time clicked/show (that is unless the user does something within the tab to require rerender). I've been playing with listeners and the activate event but I'm just not that familiar with the control set to know what I'm doing. Below is what I have so far and it appears the tabs are rendering even before the activate event is fired so not sure if that is the correct place for this. I've read through the documentation and other posts but some of it is just not that clear to me, probably because I'm a noob.

    <TabPanel
    id
    ="adminTabs"
    flex
    ={1}
    shadow
    defaults
    ={{
    cls
    :"card",
    layout
    :"center"
    }}
    listeners
    ={{
    scope
    :this,
    activate
    :(newActiveItem, tab, oldActiveItem, eOpts)=>{
    //alert(JSON.stringify(newActiveItem.id))
    },
    //activeItemChange: ( sender, value, oldValue, eOpts ) => {
    // alert(value.id)
    // alert(oldValue.id)
    //}
    }}
    >
    <Container id="lookupsTab" title="Lookups" layout="center">
    <Container layout="fit" fullscreen><LookupsLanding/></Container>
    </Container>
    <Container title="Configuration" layout="center">
    <Container>ConfigurationContent</Container>
    </Container>
    <Container id="usersTab" title="Users" layout="center">
    <Container layout="fit" fullscreen><UsersLanding/></Container>
    </Container>
    <Container title="Application Errors" layout="center">
    <Container>ApplicationErrorsContent</Container>
    </Container>
    </TabPanel>

  2. I ended up solving this by just tracking the activated tabs in the component state. On the TabPanel.onActiveItemChange I call a function that will record which tab was clicked and store it in the component state like so:

    handleTabClick =(sender, value, oldValue, eOpts)=>{
    let{ activatedTabs }=this.state;
    if(!activatedTabs.includes(value.id)){
    activatedTabs
    .push(value.id);
    this.setState({ activatedTabs: activatedTabs })
    }
    }

    Then on each of my tabs I have them wrapped in a state check:

    render(){
    const{ activatedTabs }=this.state;
    ...
    { activatedTabs.includes("lookupsTab")?(
    <Container layout="fit" fullscreen><LookupsLanding/</Container>
    ):null
    }

  3. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,005
    Answers
    5
    Vote Rating
    -523
      0  

    Default

    Thank you so much for your post. I apologize for the delay. I have shared this with the support staff to look into at their earliest convenience. Your patience is greatly appreciated! We do suggest using the support portal when you need assistance with a capability of a Sencha product, you have identified a situation where a products behavior is inconsistent with the product documentation and might indicate a software bug, or when the communication between you and Sencha needs to be private.

    Thanks again,

    Michele



  4. #3
    Sencha User
    Join Date
    Mar 2019
    Posts
    16
    Answers
    4
    Vote Rating
    1
      0  

    Default

    thank you I'll be awaiting for more info.

  5. #4
    Sencha User
    Join Date
    Mar 2019
    Posts
    16
    Answers
    4
    Vote Rating
    1
      0  

    Default

    I ended up solving this by just tracking the activated tabs in the component state. On the TabPanel.onActiveItemChange I call a function that will record which tab was clicked and store it in the component state like so:

    handleTabClick =(sender, value, oldValue, eOpts)=>{
    let{ activatedTabs }=this.state;
    if(!activatedTabs.includes(value.id)){
    activatedTabs
    .push(value.id);
    this.setState({ activatedTabs: activatedTabs })
    }
    }

    Then on each of my tabs I have them wrapped in a state check:

    render(){
    const{ activatedTabs }=this.state;
    ...
    { activatedTabs.includes("lookupsTab")?(
    <Container layout="fit" fullscreen><LookupsLanding/</Container>
    ):null
    }

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
  •