PDA

View Full Version : [FIXED][3.0rc1.1] Toggle button overflow



flylaputa
8 May 2009, 1:07 AM
Hi,

I don't think a button on an overflowed toolbar work with the toggleHandler. It might be the way I implement it, but it works when it is not overflown. When I shrink the window size so that the button is in the overflown menu, the toggleHandler isn't called.

With regards.

mystix
8 May 2009, 1:25 AM
i think you should post some code.

flylaputa
8 May 2009, 2:07 AM
I've posted some code as requested. In the normal size, clicking both buttons work, but they stopped working once they are overflown.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../../ext-3.0-rc1.1/resources/css/ext-all.css">
<script type="text/javascript" src="../../../ext-3.0-rc1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-3.0-rc1.1/ext-all-debug.js"></script>
<title id="page-title">Title</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../../ext-3.0-rc1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var p = new Ext.Window({
title: 'Standard',
closable: false,
height:250,
width: 500,
tbar: [
{
enableToggle: true,
pressed: true,
text: 'Normal toggle button',
toggleHandler: function(button, state) {
alert('normal button clicked');
}
}, {
enableToggle: true,
pressed: true,
text: 'Overflown toggle button',
toggleHandler: function(button, state) {
alert('overflown button clicked');
}
}
]
});
p.show();
});

</script>
</head>
<body style="margin:40px">
</body>
</html>

Condor
8 May 2009, 3:15 AM
ToolbarLayout should probably create Ext.menu.CheckItems for overflow buttons with enableToggle:true.

However, correctly implementing toggleGroup will be a chalenge.

flylaputa
8 May 2009, 4:52 AM
Does this mean it is not currently supported and possibly quite difficult to make it work?


ToolbarLayout should probably create Ext.menu.CheckItems for overflow buttons with enableToggle:true.

However, correctly implementing toggleGroup will be a chalenge.

aconran
8 May 2009, 7:08 AM
Yes, this is currently not coded for. We will take a look into implementing it.

On another thought, for CycleButtons maybe they should create a submenu with a radio selection of all their choices.

Condor
8 May 2009, 7:12 AM
To correctly implement this we should really consider creating a base class on which both Button and menu.Item are based which incorporates most of the shared logic.

MD
8 May 2009, 7:21 AM
I think it would be helpful for people if a note was made on the examples page for Toolbar Overflow indicating which button/field/etc types currently are and are not supported. Right now, anyone checking that out would assumedly be given the false impression that all items are supported (as was I). That may also give rise to some creative ux solutions for the unsupported types which could eventually work their way into SVN.

MD

stever
9 May 2009, 10:51 AM
I didn't look at CycleButtons when I did this, but for others you might try this change..

from: http://extjs.com/forum/showthread.php?p=324166#post324166



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
};
},

flylaputa
11 May 2009, 1:40 AM
I don't understand how to use your code below, but I tried using the override in your reference and it works.

Thanks. :D


I didn't look at CycleButtons when I did this, but for others you might try this change..

from: http://extjs.com/forum/showthread.php?p=324166#post324166



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
};
},

stever
11 May 2009, 8:04 AM
I have my own build/version of Ext and I just copied the code. Was meant more for the developers, but this is how it gets converted for users:


Ext.override(Ext.layout.ToolbarLayout, {
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
};
}
})

Since the toolbar already had item type detection when reading the config, it didn't require too much other than creating the config the right way..

evant
28 May 2009, 8:52 AM
Fixed in SVN.

flylaputa
29 May 2009, 5:20 AM
=D>

flylaputa
1 Jun 2009, 12:50 AM
I am sorry, but I just tried it out with the lastest SVN, and it still doesn't work. :-/

evant
1 Jun 2009, 12:54 AM
Can you provide more details? What specifically isn't working.

flylaputa
1 Jun 2009, 12:59 AM
Using the test case in post 3 with the latest SVN, the overflown button doesn't work. When you click on it nothing happens.

evant
1 Jun 2009, 1:05 AM
Try now.

flylaputa
1 Jun 2009, 1:14 AM
Works now, thanks\:D/

evant
1 Jun 2009, 1:16 AM
I had mistakenly assumed that all toggle buttons are automatically assigned a toggle group. Not sure where I got this idea from.