Dialog not called in ExtReact

So, I want to combine Panel with Dialog, once I click on the gear button (shown on the picture), I want for a dialog to pop up. But it is like it doesn't even call the function showDialog(). Most important parts of the code are shown below, after the picture.

enter image description here

-Needed functions:

constructor(props){
        super(props);
        this.state = {
            showDialog: false,
            idOfPortletLocation: '',
            text: '',
            portletlocation: []
        };
    }

    showDialog(){
        this.setState({ showDialog: true });
    }

    onOk(){
        this.setState({ showDialog: false });
    }

    onCancel(){
        this.setState({ showDialog: false });
    }

-Render part of the code:

<Container layout="fit"> 
                <Panel 
                    ref={panel => this.panel = panel}
                    title= {this.state.text.title} 
                    tools={[ 
                        {type: 'minimize', handler: () => this.toolHandler("minimize", this.state.idOfPortletLocation)},
                        {type: 'maximize', handler: () => this.toolHandler("maximize", this.state.idOfPortletLocation)}, 
                        {type: 'close', handler: () => this.toolHandler("close", this.state.idOfPortletLocation)},
                        {type: 'gear', handler: () => this.showDialog}
                    ]}
                    bodyPadding={10}
                    ref="target"
                >
                    {this.state.text.description} 
                </Panel>
                 <Dialog
                    displayed={showDialog}
                    title="Dialog"
                    closable
                    maximizable
                    closeAction="hide"
                    maskTapHandler={this.onCancel}
                    bodyPadding="20"
                    maxWidth="200"
                    defaultFocus="#ok"
                    onHide={() => this.setState({ showDialog: false })}
                >
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.'
                    <Button text="Cancel" handler={this.onCancel}/>
                    <Button itemId="ok" text="OK" handler={this.onOk}/>
                </Dialog>
            </Container> 

Upvotes: 1

Views: 92

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

You're not calling the function, you should have:

{type: 'gear', handler: () => this.showDialog(); }

Upvotes: 1

Related Questions