如何在ExtReact中实现工具按钮的最大化操作？

Question

我试图在ExtReact中实现一个最大化工具按钮，但是我得到了一个

error: "Uncaught TypeError: n.up is not a 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);
        }
    }
}

Answer 1

在工具处理程序的ExtReact中，第一个参数是

工具的逻辑所有者。在一个典型的用法中，这将是一个面板(如toolOwner配置所指定的)，请参阅此handler。

见下例:-

 {
     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) {

     }
 }

您可以在这里看到最小化和极大化的截图。

代码片段

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