[1.1] - Buttons in horizontal scroll tabpanel are sized incorrectly

[jay@moduscreate.com]

To achieve the following results:

http://moduscreate.com/i/2011-04-28_1452.png

Use the code below. Any toolbar with a horizontal scroll will do this to buttons.



Ext.setup({
onReady: function() {

var genButtons = function() {
return [
{
text : 'action',
ui : 'action'
},
{
text : 'action-round',
ui : 'action-round'
},
{
text : 'action-small',
ui : 'action-small'
},
{
text : 'confirm',
ui : 'confirm'
},
{
text : 'confirm-round',
ui : 'confirm-round'
},
{
text : 'confirm-small',
ui : 'confirm-small'
},
{
text : 'decline',
ui : 'decline'
},
{
text : 'decline-small',
ui : 'decline-small'
},
{
text : 'decline-small',
ui : 'decline-round'
},
{
text : 'normal',
ui : 'normal'
},
// {
// text : 'plain',
// ui : 'plain'
// },
{
text : 'round',
ui : 'round'
},
{
text : 'small',
ui : 'small'
},
{
text : 'back',
ui : 'back'
},
{
text : 'forward',
ui : 'forward'
}
];
};

var tbar1 = {
xtype : 'toolbar',
dock : 'top',
title : 'Sencha Touch Button UI palette'
};
var tbar2 = {
xtype : 'toolbar',
dock : 'top',
items : genButtons(),
scroll : {
direction :'horizontal',
useIndicators : false
}
};


var bbar = {
xtype : 'toolbar',
dock : 'bottom',
height : 25,
layout : {
align : 'stretch'
},
items : [
{
style : 'font-size: .8;',
flex : 1,
height : 20,
text : 'Brought to you by the Sencha Touch in Action team!',
handler : function() {
window.location = 'http://manning.com/garcia2'
}
}
]
};

new Ext.Panel({
fullscreen : true,
style : 'background-color: #CCF;',
defaultType : 'button',
items : genButtons(),
scroll : 'vertical',
defaults : {
width : 175,
iconAlign : 'left',
iconMask : true
},
layout : {
type : 'vbox',
pack : 'center'
},
dockedItems : [
tbar1,
tbar2,
bbar
]
});

}
});