javascript - 将 MessageBox 扩展为 View - Ext JS 4.1

Question

我正在尝试在 View 中扩展 MessageBox，以便我可以在整个应用程序中重用它。

似乎当我这样做时，我失去了一些使消息框有用的默认功能(消息、按钮定义、图标定义、默认拖动约束等)。文档有点困惑，因为它似乎应该在 show() 函数中定义配置，而且我不确定如何在我的 View 中设置它们。

如何才能真正将 messagebox 组件扩展为 View ？

基本消息框(我想用我的 View 创建的内容):

Ext.Msg.show({
     title:'Error',
     msg: 'There was an error.',
     buttons: Ext.Msg.YESNOCANCEL,
     icon: Ext.Msg.QUESTION
});

渲染:

但是当我展示我的观点时:

Ext.create('IOL.view.app.Message').show();

我基本上得到了一个普通的面板/窗口组件

Ext.define('IOL.view.app.Message', {

    extend : 'Ext.window.Window',

    config: {

    },

    constructor: function(config) {
        this.initConfig(config);
        this.callParent(arguments);
    },


    initComponent : function() {

        Ext.apply(this, {
            xtype: 'messagebox',
            width: 400,
            height: 200,
            title:'Error',
            html: 'There was an error.',
            buttons: [
                { text: 'Button 1' }
            ]

        });

        this.callParent(arguments);
    }// initComponent
});

渲染:

Answer 1

看来您正在扩展 Ext.window.Window并将消息框配置应用于它。为什么不延长 Ext.window.MessageBox :

Ext.define('IOL.view.app.Message', {
    extend : 'Ext.window.MessageBox',
    width: 400,
    height: 200,
    title: 'Error',
    html: 'There was an error.',
    buttons: Ext.Msg.YESNOCANCEL,
    icon: Ext.Msg.ERROR,

    // whatever else you want to do
    initComponent : function() {

        this.callParent(arguments);
    }
});

@EricCook 在下面提出了一个很好的观点。 MessageBox类旨在作为单例在应用程序中重用，而不是真正用于子类化。

在你的问题中你说:

I'm trying to extend a MessageBox within a view so I can reuse it throughout my application

我可以理解，如果您想创建一个不同的类型 消息框，您可以用普通的Ext.Msg.show 调用它。方法，您可以扩展 MessageBox我想有你自己的按钮或图标。

但对于常规使用，这不是您需要扩展的东西。为了在您的应用中重复使用，您可以在 Controller 中保留对您想要的消息框配置的引用，例如:

// SomeController.js
errorMsg: {
     title:'Error',
     msg: 'There was an error.',
     buttons: Ext.Msg.YESNOCANCEL,
     icon: Ext.Msg.QUESTION
},

然后每当你想调用你可以使用的那种类型的消息时(假设作用域是 Controller 本身，或者你可以事先获得对 Controller 的引用):

Ext.Msg.show(this.errorMsg);