Question

在我的应用程序中，我使用ExtJS和React。我试图覆盖一些功能，但在定义自定义Ext组件时遇到了一些问题。我怀疑这是由＆＃34;这个＆＃34;。

的不同范围引起的

有两种情况。第一个是工作场景，但是以非优雅的方式实现。第二种情况是可取的，但它不起作用。

场景1 - 可行 - codepen #1

index.js

// defined globally, it's not very nice
Ext.define('CustomContextMenu', {
    extend: 'Dummy.plugin.ContextMenu',
    createMenuItems: function() {
        return this.callParent() // keep standard behaviour
    }
});

ReactDOM.render(
    React.createElement(CustomScheduleApp),
    document.getElementById('schedule-app')
);

app.jsx

class CustomScheduleApp extends React.Component {
    ...
    render() {
        <CustomSchedule ...></CustomSchedule>
    }

}

schedule.jsx

class CustomSchedule extends React.Component {
    ...
    componentDidMount() {
        let taskContextMenu = Ext.create("CustomContextMenu");
        ...
    }
}

场景2 - 不 - codepen #2

index.js

ReactDOM.render(
    React.createElement(CustomScheduleApp),
    document.getElementById('schedule-app')
);

app.jsx

class CustomScheduleApp extends React.Component {
    ...
    render() {
        <CustomSchedule ...></CustomSchedule>
    }

}

schedule.jsx

class CustomSchedule extends React.Component {
    ...
    componentDidMount() {
        Ext.define('CustomContextMenu', {
            extend: 'Dummy.plugin.ContextMenu',
            createMenuItems: function() {
                return this.callParent() // keep standard behaviour
                // "this" has fewer keys in this scenario, some data is missing
            }
        });

        let taskContextMenu = Ext.create("CustomContextMenu");
        ...
    }
}

场景＃2的错误消息：

Uncaught TypeError: Cannot read property 'apply' of null

我对范围有基本的了解，我甚至不确定它是否是更多的React of JavaScript问题。我在代码中遗漏了什么吗？

Answer 1

因为React的工作方式和你在React原型中设置扩展方法，ExtJS callParent对调用事件的位置感到困惑，所以你必须手动指定它。

addBodyCls: function(cls) {
     // custom logic here
     console.log("inside addBodyCls");
     return this.superclass.addBodyCls.apply(this, arguments);
 }

应该做的伎俩！

ExtJS与React，范围混乱

1 个答案: