Improved ToolbarLayout menu (CheckItem for buttons with enableToggle = true)

[makana]

Hi,

I've customized the ToolbarLayout, so that buttons with enableToggle = true become Ext.menu.CheckItems in the toolbar overflow menu ("more").

Ext.override(Ext.layout.ToolbarLayout, {
    // private
    addComponentToMenu: function(m, c){
        if(c instanceof Ext.Toolbar.Separator){
            m.add('-');
        }else if(typeof c.isXType == 'function'){
            if(c.isXType('splitbutton')){
                m.add(this.createMenuConfig(c, true));
            }else if(c.isXType('button')){
            	var cfg = this.createMenuConfig(c, !c.menu);
            	if (c.initialConfig.enableToggle) {
            		cfg['xtype'] = 'menucheckitem';
            		cfg['checked'] = c.pressed;
            		if (c.toggleGroup) cfg['group'] = c.toggleGroup;
           		cfg['listeners'] = {
            			'checkchange': function(mi, ch) {
            				c.toggle(ch);
            			}
            		};
            	}
                cfg['text'] = c.text || c.menuText;
                m.add(cfg);
            }else if(c.isXType('buttongroup')){
                m.add('-');
                c.items.each(function(item){
                     this.addComponentToMenu(m, item);
                }, this);
                m.add('-');
            }
        }
    }
});

[stever]

I did the same thing. You can also add 'group' so that it convert radio groups, set text to 'text||menuText', so you can use menuText as an option for buttons that don't have text usually (think html editor) but where it would be nice when they convert into menus. You might give that a try. It is an easy couple of lines; I'd add them but I can't pull from memory and I don't have access at the moment. I'll try and pull that out tomorrow. Then I can put up the buttongroup -> overflow menu fixes too...

[makana]

Hi steven,
thanks for your hints! I updated the first post with that lines.

[stever]

It can all be done in the createMenuItemCfg method:

    createMenuConfig: function(c, hideOnClick){
        return {
            text: c.menuText||c.text,
            iconCls: c.iconCls,
            icon: c.icon,
            itemId: c.itemId,
            disabled: c.disabled,
            handler: c.handler,
            group: c.toggleGroup,
            checked: c.toggleGroup?c.pressed:undefined,
            scope: c.scope,
            menu: c.menu,
            listeners:c.toggleGroup?{'checkchange': function(mi, ch){c.toggle(ch);}}:undefined,
            hideOnClick:hideOnClick
        };
    },

Note, I removed the useless delete statements, etc. Also, I actually had menuText first. I figure it is an override for the menu if you have both that and text, and otherwise used if no text there for the button. This doesn't mess with the logic of addComponentToMenu (which I have also changed to fix the bugs with buttongroups).

[galdaka]

live example?

thanks,

[dawesi]

demo?

[stever]

Well, I could use some help searching for bugs from our move to Ext3:

Sign up at http://www.visigroups.com/ I took the token requirement off. When you are in the manager area, and edit the whole website, you can create a 'page'. Editing pages gives the floating toolbar that you can resize for testing how it works. Sorry there isn't an easier way to get to it (yet).

Actually, I take that back. At the same site with firebug enabled, you can enter this into the console:

new Ext.Window({
    width:600,
    height:300,
    layout:'fit',
    border:false,
    items:{
        xtype:'htmleditor'
    }
}).show()

and this:

new Ext.Window({
    width:600,
    height:300,
    layout:'fit',
    border:false,
    items:{
        xtype:'htmleditor',
        tbFloat:true,
        tbTitles:true
    }
}).show()

[emsttam]

Are you able to share how you got buttongroups working on HtmlEditor ?

[stever]

I made my own version of it that is plugin based. It is in the Ext3 extensions forum:

http://extjs.com/forum/showthread.php?t=73183

(PS: It really could use a better API, I was working through how to do it, but got it working well enough that I never cleaned it up...)

[tolichsvs]

Well, I could use some help searching for bugs from our move to Ext3:

Sign up at http://www.visigroups.com/ ...

Steven,
I like Sign in/Register button menu. Shared code?
[IMG]2010-05-29_10-51_Visigroups.jpg[/IMG]
2010-05-29_10-51_Visigroups.jpg