3

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

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

我怎样才能真正将消息框组件扩展为视图？

基本消息框（我想用我的视图创建）：

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

渲染：

在此处输入图像描述

4

1 回答 1

4

看来您正在扩展一个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);
于 2012-08-28T17:27:18.123 回答