Should the Toolbar overflow manage items other than buttons?

[mystix]

Originally Posted by jgarcia@tdg-i.com

It's in the title.

d'oh

[jgarcia@tdg-i.com]

thx

[miti]

The overflow feature of the toolbar is useless if it doesn't handle combo and text fields for us. How hard it is to do it?

[Condor]

Unfortunately it's very hard.

ToolbarLayout would:
- have to make copies of all components to put them in the overflow menu (but the copies will almost certainly have problems, e.g. unique ids).
or
- carefully move components from the toolbar to the overflow menu and back again (ToolbarLayout wasn't designed for this, so this would be a lot of work).

[jgarcia@tdg-i.com]

Originally Posted by miti

The overflow feature of the toolbar is useless if it doesn't handle combo and text fields for us. How hard it is to do it?

useless? not totally!

[miti]

Sorry I didn't mean the feature is useless. It is actually a very nice addition to the toolbar. It is just for our app, there is almost always a search textfield on the far right corner of the toolbars and it cannot go to the overflow menu now.

Is there a way to config which toolbar items go to the overflow toolbar if necessary? So I can skip some of them don't fit in the dropdown?

[reaper.br]

When you have a toolbar with items other than buttons (like text and form items), the overflow menu is created with no items.
To have the old toolbar behaviour, just set the enableOverflow option to false (undocummented, see this post)

Changing jgarcia's example a bit...

new Ext.Window({
    width  : 200,
    height : 100,
    tbar   : new Ext.Toolbar({
        enableOverflow: false,
        items: [
        {
            text : 'btn 1'
        },
        {
            text : 'btn 1'
        },
        {
            xtype : "combo",
            store : []
        },
        {
            text: 'test',
            xtype: 'tbtext'
        }
    ]})

}).show()

It would be nice if the text items could be moved to the menu as well.

Cheers

[kveeiv]

I think the new toolbar overflow capability is awesome, as its one less thing I have to think about for users with behind-the-times resolutions. But this limitation is a deal breaker as we often have combos on the right side of paging toolbars to support different filtering/list selection options.

Based on Condor's notes above, I've created the following override of the Toolbar layout that supports overflowing any(?) component. I've only tested this with combo controls, so your mileage may vary. The following component configurations are added by this override:

enableOverflow: false to revert to current functionality (not overflowed), defaults to true
hideOnClick: true to hide the menu when the component is clicked, passed on to basemenuitem (defaults to false)

There are probably slicker ways to do some of this; comments, corrections and revisions are welcomed and appreciated.

<script type="text/javascript">
Ext.override(Ext.layout.ToolbarLayout, {
	addGenericComponentToMenu : function(m, c){
		var domPos = c.getDomPositionEl();
		m.add({
			xtype: 'menubaseitem',
			iconCls: 'no-icon',
			hideOnClick: c.hideOnClick,
			listeners: {
				'render': function(cmp) {
					c.xtbOldParent = domPos.dom.parentNode;
					cmp.getEl().insertFirst(domPos);
					if (Ext.isFunction(c.getListParent)) {
						c.xtbOldGetListParent = c.getListParent;
						c.getListParent = function() { return this.el.up('.x-menu'); };
					}
				},
				scope: this
			}
		});
		var minWidth = this.getItemWidth(c) + 44; // wasnt sizing properly for some components
		if (m.getWidth() < minWidth) {
			m.setWidth(minWidth);
		}
		m.on('hide', function() {
			Ext.get(c.xtbOldParent).appendChild(domPos);
			delete c.xtbOldParent;
			if (c.xtbOldGetListParent) {
				c.getListParent = c.xtbOldGetListParent;
				delete c.xtbOldGetListParent;
			}
		}, this, { single: true });
	},
	addComponentToMenu : function(m, c){
		if(c instanceof Ext.Toolbar.Separator){
			m.add('-');
		}else if(Ext.isFunction(c.isXType)){
			if(c.isXType('splitbutton')){
				m.add(this.createMenuConfig(c, true));
			}else if(c.isXType('button')){
				m.add(this.createMenuConfig(c, !c.menu));
			}else if(c.isXType('buttongroup')){
				c.items.each(function(item){
					this.addComponentToMenu(m, item);
				}, this);
			}else if(c.enableOverflow !== false){
				this.addGenericComponentToMenu(m, c);
			}
		}
	}
});
</script>

[joeri]

What if you could just specify a property "overflowItem" on each toolbar item, that you can attach a component to? Then it's up to the implementor to have correct overflowing, but at least it's possible. This would side-step the whole issue of how you move the toolbar items to the overflow menu without breaking them.

[JamesC]

The poll is closed (I would have voted yes), what's happening about this officially? Is there a feature request open?