How to implement a maximize operation for tool button in ExtReact?

Question

I am trying to implement a maximize tool button in ExtReact but I get an

error: "Uncaught TypeError: n.up is not a function".

Here is my current implementation of this function:

{
    type: 'maximize',
    handler: function(e, target, panelHdr) {
        var panel = panelHdr.up('panel');
        if (!panel.maximized) {
            panel.restoreSize = panel.getSize();
            panel.restorePos = panel.getPosition(true);
            panel.maximized = true;
            var parent = panel.ownerCt,
                container = parent ? parent.getTargetEl() : panel.container,
                newBox = container.getViewSize(false);
            panel.setBox(newBox);
        } else {
            var newBox = panel.restoreSize;
            newBox.x = panel.restorePos[0];
            newBox.y = panel.restorePos[1];
            panel.maximized = false;
            panel.setBox(newBox);
        }
    }
}

No, the code is too huge, I just need a fix for this particular function, which is clear and evident and also I have given what type of error I get... — Милош Рајковић, Mar 30 '18 at 09:23
I need installed libraries for extreact and so on, the closest example to this one is located here: https://examples.sencha.com/ExtReact/6.5.0/kitchensink/#/components/panel — Милош Рајковић, Mar 30 '18 at 09:32

Narendra Jadhav · Accepted Answer · 2018-03-30T10:21:45.920

In ExtReact for tool handler the first parameter is

The logical owner of the tool. In a typical usage this will be an Panel (as specified by the toolOwner config) see this handler.

See below example :-

 {
     type: 'maximize',

     /* @param  {Ext.Component} owner The logical owner of the tool. In a typical usage this will be an Panel (as specified by the toolOwner config).
      * @param {Ext.Tool} tool The tool that is calling.
      * @param {Ext.event.Event} event The click event.
      */
     handler: function(owner, tool, event) {

     }
 }

You can see screenshot here for minimize and maximize.

CODE SNIPPET

import React, {
    Component
} from 'react';
import {
    Container,
    Panel,
    Button
} from '@extjs/ext-react';

Ext.require('Ext.Toast');

function toolHandler(panel, tool) {
    Ext.toast(`You clicked ${tool.config.type}`);
    if (tool.config.type=="maximize") {
        panel.setHeight(window.innerHeight).setWidth(window.innerWidth)
    }else{
         panel.setHeight(panel.initialConfig.height).setWidth(panel.initialConfig.width)
    }
}

export default class PanelExample extends Component {

    render() {
        return (
            <Container>
                <Panel
                    shadow
                    title="Panel"
                    height={300}
                    width={500}
                   // collapsible={{ dynamic: true }}
                    tools={[
                        {type: 'minimize', handler: toolHandler },
                        {type: 'maximize',handler: toolHandler  }
                    ]}
                >
                    <p>Panel Body</p>
                </Panel>
            </Container>
        )
    }
}

Is there also a way to pass some other properties to toolHandler along with these two default parameters? — Милош Рајковић, Mar 30 '18 at 11:17
yes you can set custom config in tool like this `{type: 'minimize', handler: toolHandler ,customConfig:'value here'}` — Narendra Jadhav, Mar 30 '18 at 11:24
This is good but is there a way to access functions from the class/component inside toolHandler and at the same time value from customConfig? — Милош Рајковић, Mar 30 '18 at 12:53

How to implement a maximize operation for tool button in ExtReact?

1 Answers1