Question

我试图在视图中扩展MessageBox，以便在整个应用程序中重用它。

似乎当我这样做时，我失去了一些使消息框变得有用的默认功能（msg，按钮定义，图标定义，默认拖动约束等）。文档有点令人困惑，因为似乎应该在show（）函数中定义configs，并且我不确定如何在我的视图中设置它们。

如何真正将消息框组件扩展为视图？

基本MessageBox（我想用我的视图创建的内容）：

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

渲染：

Normal Messagebox

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

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

我基本上最终得到了一个vanilla Panel / Window组件

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

渲染：

enter image description here

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类被设计为在应用程序中作为单例重用而不是用于子类化。

在你的问题中你说：

我正在尝试在视图中扩展MessageBox，以便我可以重用它在我的申请中

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

但是对于经常使用，这不是你需要扩展的东西。要在您的应用程序中重复使用，您可以在控制器中保留对所需消息框配置的引用，如：

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

然后，无论何时你想调用你可以使用的那种类型的消息（假设范围是控制器本身，或者你可以预先获得对控制器的引用）：

Ext.Msg.show(this.errorMsg);

将MessageBox扩展为View - Ext JS 4.1

1 个答案: