adding button returns [object][object] in EXTJS - button

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',
},
...