PDA

View Full Version : Segmented button with allowDepress set to false still sets buttons to pressed



fousheezy
20 Jul 2012, 5:51 AM
I am creating a segmented button with 2 different contact options. I want the behavior to be that you can press either side to trigger the action without setting that button's class to be pressed. I thought the 'allowDepress' parameter would do this for me, however the segmented button still sets either button to 'pressed'. Is this a bug or is there a config option I'm not seeing which I must also include



{
xtype: 'segmentedbutton',
allowDepress:false,
items: [{
xtype:'button',
text: 'Call Phone'
},
{
xtype:'button',
text: 'Send E-Mail'
}]
}

mitchellsimoens
22 Jul 2012, 9:22 AM
The allowDepress config, if set to true, will allow you to tap once on the button to have it pressed and tap again to have it depressed.

Are you wanting that when you tap on one button that it will automatically be depressed so you never have a button that is pressed?

fousheezy
22 Jul 2012, 12:59 PM
Yes, exactly. To be clear, since depressed can mean 'pressed down' just like pressed, in Sencha depressed means 'not pressed', correct?

So my question is if there is a configuration for the segmented button which makes the sub elements remain not pressed even after you tap them

mitchellsimoens
23 Jul 2012, 4:07 AM
You would have to override the onButtonRelease method of the segmented button to accomplish what you want to do.

fousheezy
23 Jul 2012, 6:36 AM
Thank you. Why isn't the onButtonRelease method listed in any of the button or segmented button documentation? Does that hook in as a listener to the button element's release event?

For anybody who finds this thread via search, here's the solution:



{
xtype: 'segmentedbutton',
allowDepress:false,
onButtonRelease: function() {
return true;
}
items: [{
xtype:'button',
text: 'Call Phone'
},
{
xtype:'button',
text: 'Send E-Mail'
}]
}

mitchellsimoens
23 Jul 2012, 7:07 AM
That won't work when you do a production build. You need to extend the segmented button

fousheezy
23 Jul 2012, 9:12 AM
Thanks for the heads up! I still haven't built a Sencha App yet so that would have been frustrating to debug

So the solution is to extend the segmented button class into its own.
Please note that EM is the namespace for my app, and you should change any EM to your own app's namespace.

I've put the extended button class in 'app/resources/SegmentedButton.js'


Ext.define('EM.resources.SegmentedButton',{
extend: 'Ext.SegmentedButton',
xtype: 'segmentedactionbutton',
config: {
allowDepress:false,
allowMultiple:false
},
onButtonRelease: function() {
return true;
}
});

And in the view file where I use it, I add it to the requires array.


requires: [..., 'EM.resources.SegmentedButton'],


And so I can simply instantiate it by passing a config object into the items array of the view


...
{
xtype: 'segmentedactionbutton',
items: [{
xtype:'button',
text: 'Call Phone'
},
{
xtype:'button',
text: 'Send E-Mail'
}]
}
...

mitchellsimoens
23 Jul 2012, 9:20 AM
Very nice! 99% what I was thinking


Ext.define('Ux.SegmentedButton', {
extend : 'Ext.SegmentedButton',
xtype : 'segmentedactionbutton',

config : {
allowPress : false
},

onButtonRelease : function (button) {
if (this.getAllowPress()) {
this.callParent([button]);
}
}
});

Buttons have a press state and an depressed state so we add an allowPress config.

mitchellsimoens
23 Jul 2012, 9:21 AM
Oh and you don't need to specify xtype : 'button' on the items of a segmentedbutton, button is the defaultType so it will handle that for you.

ytkang
20 Nov 2012, 5:24 PM
It is possible without making new class.

just add this,

listeners: {
toggle: function(container, button, pressed){
container.setPressedButtons(-1);
}
}
whenever button toggled, set button unpressed.