При использовании TabPanel отображается только активная вкладка и только в первый раз - PullRequest
Новая
       52

При использовании TabPanel отображается только активная вкладка и только в первый раз

0 голосов
/ 12 марта 2019

Я создаю приложение с несколькими вкладками, используя компонент ExtReact TabPanel.Поведение по умолчанию, по-видимому, заключается в том, что все вкладки отображаются при отображении панели вкладок.Однако я хочу отображать только активную вкладку и отображать ее только при первом нажатии (то есть, если пользователь не сделает что-то на вкладке, чтобы потребовать повторного отображения).Я играл со слушателями и событием активации, но я не настолько знаком с набором элементов управления, чтобы знать, что я делаю.Ниже приведено то, что я имею до сих пор, и кажется, что вкладки отображаются даже до того, как событие активации было запущено, поэтому не уверен, что это правильное место для этого. 

<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>Configuration Content</Container>
            </Container>
            <Container id="usersTab" title="Users" layout="center">
                <Container layout="fit" fullscreen><UsersLanding/></Container>
            </Container>
            <Container title="Application Errors" layout="center">
                <Container>Application Errors Content</Container>                
            </Container>
        </TabPanel>

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Я решил эту проблему, просто отслеживая активированные вкладки в состоянии компонента. В TabPanel.onActiveItemChange я вызываю функцию, которая запишет, какая вкладка была нажата, и сохранит ее в состоянии компонента следующим образом: 

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

Затем на каждой из моих вкладок они помещаются в проверку состояния: 

render(){
    const { activatedTabs } = this.state;
    ...
    {   activatedTabs.includes("lookupsTab") ? (
           <Container layout="fit" fullscreen><LookupsLanding/</Container>
        ) : null                        
    }
0 голосов
/ 17 марта 2019

возможно, вы ищете onAfterRender слушатель : 

<Container 
    onAfterRender={{
        single: true, // handler will only be called once
        fn: () => {...} // handler which You are looking for - called once a time after view has been rendered
    }}
    id="lookupsTab" title="Lookups" layout="center">
    <Container layout="fit" fullscreen><LookupsLanding/></Container>
</Container>
...