PDA

View Full Version : [INFOREQ] SegmentedButton ignores allowdepress on swipe



DrunkenBeard
1 Sep 2011, 10:42 AM
Hi,

I'm using a SegmentedButton component in an application that will target the iPad. Setting the allowdepress attribute to false is supposed to ensure that an option is always selected. The component works fine when a user tries to depress a button by hitting it, but if the user does a swipe gesture starting at the pressed button the component ignores the allowdepress attribute and depresses the button.

[pressed][unpressed]

*hit pressed* -> [pressed][unpressed] (as intended)
*swipe from pressed* -> [unpressed][unpressed] (bug)

mike.estes
1 Sep 2011, 3:38 PM
to be honest, I'm a bit confused by your post, but if you are experiencing another manifestation of the general issues with the allowDepress implementation maybe this will help? (note: this override addresses more than just the allowDepress issue, should be ok but be aware that you will need to remove this override once Touch 1.2 is available




Ext.override(Ext.SegmentedButton, { afterLayout : function(layout) { var me = this; Ext.SegmentedButton.superclass.afterLayout.call(me, layout); if (!me.initialized) { me.items.each(function(item, index) { if (!item.disabled) { me.setPressed(item, !!item.pressed, true); } }); if (me.allowMultiple) { me.pressedButtons = me.getPressedButtons(); } me.initialized = true; } }, onTap : function(e, t) { if (!this.disabled && (t = e.getTarget('.x-button'))) { var btn = this.getComponent(t.id); if (btn && !btn.disabled) { if (this.allowDepress || !btn.pressed) { this.setPressed(t.id, this.allowDepress ? undefined : true); } } } } });

mike.estes
1 Sep 2011, 3:39 PM
wow, not sure what happened with the formatting there, here is another try:



Ext.override(Ext.SegmentedButton, {
afterLayout : function(layout) {
var me = this;


Ext.SegmentedButton.superclass.afterLayout.call(me, layout);


if (!me.initialized) {
me.items.each(function(item, index) {
if (!item.disabled) {
me.setPressed(item, !!item.pressed, true);
}
});
if (me.allowMultiple) {
me.pressedButtons = me.getPressedButtons();
}
me.initialized = true;
}
},
onTap : function(e, t) {
if (!this.disabled && (t = e.getTarget('.x-button'))) {
var btn = this.getComponent(t.id);
if (btn && !btn.disabled) {
if (this.allowDepress || !btn.pressed) {
this.setPressed(t.id, this.allowDepress ? undefined : true);
}
}
}
}
});

DrunkenBeard
1 Sep 2011, 4:06 PM
Hi,

Well, I must say that I haven't had the time to delve into the current implementation of SegmentedButton but I can see a problem with the one you pasted. Again, I may be mistaken as I'm not very familiar with the internal architecture of Ext.

In the code you pasted, the SegmentedButton only responds to onTap to decide if allowdepress should be enforced. Pressing and dragging your finger out of the button doesn't get recognized as a Tap on the iPad (actually just looked in the Kitchen Sink demo and Sencha Touch uses the swipe terminology, even though the gestures is recorded as 'drag'). All in all, I think that's why the allowdepress is being ignored, the component isn't responding to the drag/swipe event.

Hope it clears things up :)

rispig
24 Jan 2012, 5:38 AM
Hi,
It's a bit late, and you've probably updated your sencha ver. (though I'm not sure this problem is fixed in later versions) anyways, I came across the same problem, after some digging I found out the problem is in the 'tapcancel' event of the button class:



initEvents : function() {
var me = this;

Ext.Button.superclass.initEvents.call(me);

/* Here's the registration to the tapcancel event */
me.mon(me.el, {
scope: me,

tap : me.onPress,
tapstart : me.onTapStart,
tapcancel: me.onTapCancel

});
},

/* later on...here's the implementation of the handling function */
onTapCancel : function() {

var me = this;

if (me.pressedTimeout) {

clearTimeout(me.pressedTimeout);

delete me.pressedTimeout;

}

me.el.removeCls(me.pressedCls);

}


As you can see, the pressed class is removed w/o consideration of allowDepress (how rude!), and tapcancel is fired when you drag the button.

So to avoid your problem try to un-register / do something else in that event.

Hope this helps!
Omri