reactjs - 如何在 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>
        )
    }
}