Вложенный диалог Sencha ExtReact недоступен - PullRequest
Новая
       19

Вложенный диалог Sencha ExtReact недоступен

0 голосов
/ 01 марта 2020

Подробности: если вы смотрите видео, вы видите именно проблему, первый диалог работает правильно, но не вложенный диалог, по какой-то причине недоступен, любая помощь будет принята с благодарностью.

Видео, показывающее проблему

Информация о версии:

узел - версия v12.16.1

npm - версия 6.13.4

"реагировать": "^ 16.13.0",

"_ от": "@ sencha / ext-Reaction-modern @ ^ 7.2.0"

Пожалуйста, дайте мне знать, если вам нужно что-то еще, что может помочь решить эту проблему.

У меня есть код: 

import React, { Component } from 'react';
import { Container, Button } from '@sencha/ext-react-modern';
import { Dialog } from '@sencha/ext-react-modern';

export default class NestedDialogs extends Component {

    state = {
        showGrandfatherDialog: false
    }

    showGrandfatherDialog = () => {
        //debugger;
        this.setState({ showGrandfatherDialog: true });
    }

    destroyGrandfatherDialog = () => {
        //debugger;
        this.setState({ showGrandfatherDialog: false });
    }

    render() {
        const { showGrandfatherDialog } = this.state;

        return (
            <Container
                viewport={true}
                layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
            >
                <Button text="Show Grandfather Dialog" handler={this.showGrandfatherDialog} ui="action raised" />

                {showGrandfatherDialog === true && 
                    <GrandfatherDialog
                        displayed={showGrandfatherDialog}
                        destroy={this.destroyGrandfatherDialog}
                    >
                    </GrandfatherDialog>
                }

            </Container>
        )
    }
}

class GrandfatherDialog extends Component {

    state = {
        showFatherDialog: false
    }

    showFatherDialog = () => {
        //debugger;
        this.setState({ showFatherDialog: true });
    }

    destroyFatherDialog = () => {
        //debugger;
        this.setState({ showFatherDialog: true });
    }

    render() {
        const { showFatherDialog } = this.state;
        return (
            <Dialog
                displayed={this.props.displayed}
                title="Grandfather Dialog"
                closable="true"
                width="600"
                height="600"
                layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
                onDestroy={this.props.destroy}
            >
                <Button text="Show Father Dialog" handler={this.showFatherDialog} ui="action raised" />
                    {showFatherDialog === true &&
                        <FatherDialog
                            displayed={showFatherDialog}
                            destroy={this.destroyFatherDialog}
                        >
                        </FatherDialog>
                    }
            </Dialog>
        );
    }
}

class FatherDialog extends Component {

    render() {
        return (
            <Dialog
                displayed={this.props.displayed}
                title="Father Dialog"
                closable="true"
                width="400"
                height="400"
                onDestroy={this.props.destroy}
            >
            </Dialog>
        );
    }
}

1 Ответ

0 голосов
/ 02 марта 2020

Вы можете установить zIndex для своих компонентов Dialog.

Fiddle

, но в этом случае маска не работает должным образом. Я думаю, это потому, что Dialog не предназначен для многослойного использования. Решение этой проблемы с помощью Ext.ZIndexManager в наборе инструментов c. Современный инструментарий не имеет этого менеджера

...