cmp.items.getAt().add cannot work

[jessica-qiu]

I'm trying to load 4 buttons in the panel when the page displays, like two in one line, but when I used 'cmp.items.getAt().add', I only can load the last 2 buttons in the panel. I'm so confused about that. Someone else could help me?

view code (part of):
items: [{
layout: 'hbox',
defaults: {xtype: 'button', ui: 'normal', margin: '40 10', flex: 1, cls: 'homeBtn'},
items: [],
},
{
layout: 'hbox',
defaults: {xtype: 'button', ui: 'normal', margin: '40 10', flex: 1, cls: 'homeBtn'},
items: [],
}],

listeners: {

show:function(cmp){
console.log('show_homecmp');
Ext.dispatch({
controller: App.controllers.mainController,
action: 'load',
home_cmp: cmp,
});
}
},

controller code:


load: function(options){...
cmp.items.getAt(0).add({
text: '<img src="res/icons/mail1-icon.png" class="new"/><div style="font-size:0.8em">Email Return<br/>to Bureau</div>',
handler: function(){},
});
cmp.items.getAt(0).add({
text: '<img src="res/icons/mail-icon.png" class="new"/><div style="font-size:0.8em">Email Return<br/>(Sample)</div>',
});

cmp.items.getAt(1).add({
text: '<img src="res/icons/Actions-clipboard-icon.png" class="new"/><div style="font-size:0.8em">Publish Reports</div>',
handler: function(){},
});

cmp.items.getAt(1).add({
text: '<img src="res/icons/import1-icon.png" class="new"/><div style="font-size:0.8em">Import Interface<br/>Files</div>',
handler: function(){},
});
},

[mitchellsimoens]

Any errors? ALso, you should use defaultType and specify the xtype you want as the defaultType instead of defining in the defaults Object.