1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    2
    Answers
    1
    marknutter is on a distinguished road

      0  

    Default Answered: Dynamically adding buttons to a scrollable toolbar

    Answered: Dynamically adding buttons to a scrollable toolbar


    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?

  2. 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();

  3. #2
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    2
    Answers
    1
    marknutter is on a distinguished road

      0  

    Default fixed

    fixed


    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();