Question

Am having a controller which basically calls a message window that is displayed for a few seconds. Am trying to add a button to this message window, but its returning [object][object].

Controller

success : function(response) {

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

View

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

What i did was declare a button like

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

and then add to the div class mentioned above and return

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

But, what i see in the screen is [object][object] in place of the button.
Could anyone please tell me what am doing wrong here. Is this the correct way to add the button

EDIT

Since we cannot add a button to a div, i tried doing

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;

But, even this did not return anything

Answer 1

The answer is simple: You cannot add a ExtJS Button into the html config property of a component. This one is just for plain html. ExtJS objects belongs into the items array.

Decide to place your html content into a box (xtype for component) and add this to the items array. Then you can add your button. Don’t use the html at all in your case.

You may change/set any required classes. Please note that I haven’t check the way you manipulate the 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',
    },
    ...