Problem with toolbar overflow

[mpost]

I'm trying to create an icon only toolbar that supports overflow. However, I've run into two problems when the overflow is triggered:

1) The items in the overflow menu have an icon, but no text. This is expected since I'm just specifying an icon, but how can I have text that displays in just overflow mode?
2) My toolbar buttons are created with scale: medium. The overflow menu wants to use icons that are appropriate to a scale: small button. How can I either bump up the size of the icons or specify different icons of the appropriate size to the overflow menu?

[slemmon]

Dunno if this is the best way to handle it, but you could listen for the toolbar's overflowchange event and loop through the overflow items and set their text.

So, for each button you could set a config of myText or something and then do:

listeners: {
    overflowchange: function (lhc, hc, items) {
        Ext.each(items, function (item) {
            item.setText(item.myText);
        });
    }
}

[evant]

1) http://docs.sencha.com/ext-js/4-1/#!...g-overflowText

2) Currently there's no way to do this.

[slemmon]

Probably not a great thing to do in case the code changes, but...

http://jsfiddle.net/slemmon/Z9gjq/

Ext.widget('panel', {
    title: 'Overflow'
    , renderTo: Ext.getBody()
    , resizable: true
    , height: 200
    , width: 300
    , dockedItems: [{
        xtype: 'toolbar'
        , enableOverflow: true
        , dock: 'top'
        , items: [{
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 1'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 2'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 3'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 4'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 5'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 6'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 7'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 8'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 9'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 10'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 11'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 12'
        }, {
            icon: 'http://www.tactilecrm.com/images/tick.png'
            , myText: 'Item 13'
        }]
        , listeners: {
            afterlayout: {
                fn: function (t) {
                    var o = t.layout.overflowHandler.menuItems;
                    t.items.each(function (item) {
                        item.setText();
                    });
                    Ext.each(o, function (item) {
                        item.setText(item.myText);
                    });
                }
                , buffer: 20
            }
        }
    }]
});​​

BTW, I couldn't find what fired the overflowchange event in the source code. What does that do?

[mpost]

BTW, I couldn't find what fired the overflowchange event in the source code. What does that do?

It looks like the overflowchange event is broken (and has been for some time): http://www.sencha.com/forum/showthre...is-never-fired