PDA

View Full Version : Improved ToolbarLayout menu (CheckItem for buttons with enableToggle = true)



makana
28 Apr 2009, 10:58 PM
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
29 Apr 2009, 8:07 PM
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
29 Apr 2009, 10:05 PM
Hi steven,
thanks for your hints! I updated the first post with that lines.

stever
1 May 2009, 11:34 AM
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
1 May 2009, 1:15 PM
live example?

thanks,

dawesi
5 May 2009, 2:17 AM
demo?

stever
7 May 2009, 11:23 AM
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
10 Aug 2009, 7:42 AM
Are you able to share how you got buttongroups working on HtmlEditor ?

stever
10 Aug 2009, 10:57 AM
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
28 May 2010, 11:58 PM
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?
2010-05-29_10-51_Visigroups.jpg
20703

Scorpie
1 Jun 2010, 11:46 PM
Nice work!

Stever: I`m very interested in that buttongroup plugin of yours. Any chance you willing to share it?

stever
2 Jun 2010, 4:58 PM
Hmm.. I dunno. I can't remember if it relies on changes I made to the underlying ExtJS Menu code, or if that was just for my Ext.Ribbon stuff...