Sencha ExtReact Nested Dialog not accessible

Question

Details: If you watch the video you can see exactly the problem, the first dialog is working properly but not the nested dialog, for some reason is not accessible, any help will be greatly appreciated.

Video showing the problem

Version info:

node --version v12.16.1

npm --version 6.13.4

"react": "^16.13.0",

"_from": "@sencha/ext-react-modern@^7.2.0"

Please let me know if you need anything else that can help resolving this issue.

This is the code I have:

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>
        );
    }
}

score 0 · Answer 1 · answered Mar 02 '20 at 13:24

You can set zIndex for your components Dialog.

Fiddle

but in this case the mask does not work well. I think this is because the Dialog is not intended for multi-layer use. This problem solving with help Ext.ZIndexManager in classic toolkit. Modern toolkit hasn't that manager

Sencha ExtReact Nested Dialog not accessible

1 Answers1