Dynamically adding buttons to a scrollable toolbar

[marknutter]

I'm wanting to add buttons to a toolbar every time someone clicks on an item in a list, and then I want the toolbar buttons to be navigable via a horizontal scroll. The issue I'm running into is that the width of the scroller doesn't seem to be being picked up so if I try to scroll the list to the left, it just bounces back to zero hiding the buttons that are off screen to the right. Here's my toolbar code:

{ xtype: 'toolbar',


// Dock it to the top
docked: 'top',
ui: 'light',
html: null,


// Center all items horizontally and vertically
layout: {
pack: 'left',
align: 'center'
},


// Make the toolbar scrollable
scrollable: {
direction: 'horizontal',
indicators: false
},


defaults: {
iconMask: true,
ui: 'dark'
}
}


and here's the bit of code that adds buttons dynamically:

onUserTap: function(list, idx, el, record) {
this.getPplToolbar().add(
{
xtype: 'button',
iconMask: false,
padding: 0,
style: "border-radius: 0px;background-size: 35px 35px;",
icon: record.get('profile_pic_url')
}
)


}


I should mention that the list and the toolbar are inside a modal panel with a layout of 'fit', if that matters. Also, if I add a bunch of buttons in the config, it scrolls just fine, so it definitely seems to not be updating its widths and what it perceives to be its scrollable area when I dynamically add buttons. Anything I'm missing?

[marknutter]

I figured out a solution to this issue:

After adding items to a toolbar that is scrollable, you need to call the doRefresh() method on its scroller item. Adding the following line to my code above after the dynamica add fixed the issue:

this.getPplToolbar().getScrollable().getScroller().doRefresh();