Dynamically adding component in toolbar

[rkim]

I do add checkbox into toolbar dynamically (it was fine in 4.0)
but with 4.1 upgrade, I can add as before as below with no problem

Ext.getCmp("toolbarID").add(checkbox);

but layout is bit messed up, displaying the items diagonally.

If you add the same component statically, it renders fine.

[mitchellsimoens]

This code:


Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
title : 'Test',
html : 'Hello',
dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
items : [
{
text : 'Add Comp',
handler : function(btn) {
var toolbar = btn.up('toolbar');

toolbar.add({
xtype : 'checkboxfield',
boxLabel : 'Checkbox'
});
}
}
]
}
]
});

Got me this result:

30705

[rkim]

Thanks for your reply.
Just noticed that the problem in our code is caused by
layout:
{ overflowHandler: "Scroller"}

and trying to figure out why it is causing our issue.
It seems to fine with below code, only until the checkbox overflows.



This code:


Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
title : 'Test',
html : 'Hello',
dockedItems : [
{
xtype : 'toolbar',
layout: { overflowHandler: "Scroller"
},
dock : 'top',
items : [
{
text : 'Add Comp',
handler : function(btn) {
var toolbar = btn.up('toolbar');

toolbar.add({
xtype : 'checkboxfield',
boxLabel : 'Checkbox'
});
}
}
]
}
]
});

Got me this result:

30705