在 EXTJS 中添加按钮返回 [object][object]

Question

我有一个控制器，它基本上调用一个显示几秒钟的消息窗口。我正在尝试向此消息窗口添加一个按钮，但它返回 [object][object]。

控制器

success : function(response) {

                this.mWin = Ext.create('App.view.GenMessage');
                this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt1);
}

查看

Ext.define('App.view.GenMessage', {
extend : 'Ext.panel.Panel',
alias : 'widget.genmessage',

initComponent : function() {

    this.msgCt = App.genMsgCt
    this.msgCt.setWidth(300);
},
addMessage : function(status, title, msg) {

    if (status == false) {
        delay = 3000;
    } else {
        delay = 2000;
    }

    Ext.DomHelper.append(this.msgCt, {
        html : this.buildMessageBox(status, title, msg)
    }, true).slideIn('t').pause(delay).ghost("t", {
        remove : false
    });
},

/*
 * buildMessageBox
 */
buildMessageBox : function(status, title, msg) {
    console.log('buildMesssage');

    switch (status) {
        case true :
            var icon = GENHTML.tick;
            break;
        case false :
            var icon = GENHTML.warning;
            break;
    }

    return ['<div class="genMsgDiv">', icon,
                    '<div class="genMsgHd leftMargin">', title,
                    '</div><div class="H3 leftMargin">', msg,
                    '</div></div>'].join('');
}

我所做的是声明一个按钮

var button={
id: 'button1',
text :'Button1'
}

然后添加到上面提到的div类中并返回

['<div class="genMsgDiv">', button].join();

但是，我在屏幕上看到的是 [object][object] 代替了按钮。 谁能告诉我这里做错了什么。这是添加按钮的正确方法吗

编辑

由于我们无法将按钮添加到 div，我尝试这样做

var config = Ext.create(Ext.panel.Panel, {



                itemId : 'GENMSGPANEL',

                height : 150,
                cls : 'msg effect1',

                border : false,
                html : '<div class="genMsgDiv">' + icon +
                    '<div class="genMsgHd leftMargin">'+ title +
                    '</div><div class="H3 leftMargin">'+ msg +
                    '</div></div>',


                items : [{
                    xtype : 'panel',
                    //cls : 'winTitle',

                }, {
                    xtype : 'form',
                    itemId : 'GENMSGFORM',
                    border : false,
                    title : '',
                    buttonAlign : 'center',
                    fieldDefaults : {
                        msgTarget : 'side',
                        labelWidth : 110,
                        size : 30
                    },
                    buttons : [{
                        text : LANG.BTYES,
                        iconCls : 'icon-tick-tb',
                        iconAlign : 'right',
                        cls : 'tip-btn',
                        action : 'genDelete',
                        id : 'BTYES'
                    }, {
                        text : LANG.BTNO,
                        iconCls : 'icon-cross-tb',
                        iconAlign : 'right',
                        cls : 'tip-btn',
                        action : 'notDelete',
                        id : 'BTNO'
                    }]
                }]
            });


    return config;

但是，即使这样也没有返回任何东西

Answer 1

答案很简单：您不能将 ExtJS 按钮添加到组件的 html 配置属性中。这仅适用于纯 html。 ExtJS 对象属于 items 数组。

决定将您的 html 内容放入一个框（xtype 表示组件）并将其添加到 items 数组中。然后你可以添加你的按钮。在您的情况下根本不要使用html。

您可以更改/设置任何所需的课程。 请注意，我没有检查你操作 DOM 的方式。

// you may use a layout to align them
items : [
    { 
        xtype: 'box',
        cls : 'msg effect1',
        html : '<div class="genMsgDiv">' + icon +
            '<div class="genMsgHd leftMargin">'+ title +
            '</div><div class="H3 leftMargin">'+ msg +
            '</div></div>'
    },
    {
        xtype : 'panel',
        //cls : 'winTitle',
    },
    ...