PDA

View Full Version : Add support for mouse scrolling (for development)



smerickson
25 Sep 2010, 1:45 PM
It would be really helpful if there was a way to enable mouse scrolling during development. I will often develop my mobile apps on my desktop browser and I'd like to be able to just use my mouse scroll wheel to scroll some elements, rather than clicking, holding and moving the mouse. Any plans to just wire up mouse scroll events to the scroller for testing purposes?

mitchellsimoens
25 Sep 2010, 6:31 PM
Why? Don't you want to emulate what your attending audience will be doing?

smerickson
27 Sep 2010, 9:02 AM
I find it too cumbersome and time consuming to refresh my iphone every time i want to test a change. and if I use a mobile browser emulator on my desktop, it just feels weird to click and hold the mouse and drag to scroll a list. you're right that I definitely will be testing things on a real mobile device before shipping it, but during the first few rapid iterations of a change, it would be nicer and faster to just work with it on the desktop.

mitchellsimoens
27 Sep 2010, 10:49 AM
I do not mean to offend you and I can respect that everyone has their own development method but I just think it's trivial. IMO

gwan
10 Aug 2011, 9:12 AM
Hi,

Sorry to reactivate this thread but I would like to know if it's possible to use mouse scrolling for any component in sencha touch.

I think that sencha touch could be a great framework to create a multi-device application, working both on mobile device or on desktop browser. But, because I do not succeed to use my mouse to scroll on any component I can reach properly my goal.

You did great job on this framework and I know that it is not your priority right now but if you know a hack to do so, it would be great to help me.

Thanks.

Alex Vangelov
15 Sep 2011, 12:19 PM
I'm using coffeescript but the idea is visible:


app.body.on('mousewheel', (event,el) ->
offset = Ext.util.Offset()
while (el != document.body)
if el.className == "x-scroller"
scroller = Ext.ScrollManager.get(el.id);
if event.browserEvent.wheelDelta > 0
# scrollUp(scroller)
else
# scrollDown(scroller)
break
el = el.parentNode
)


Who can help with nice elastic scroll functions?
Also there is a problem .. have to click in the scroll area to activate scroller for the first time

Alex Vangelov
16 Sep 2011, 12:34 AM
Coffeescript:


app.body.on('mousewheel', (event,el) ->
offset = Ext.util.Offset()
while (el != document.body)
if el.className.indexOf("x-scroller-parent") > 0
scroller = Ext.ScrollManager.get(el.firstChild.id)
if scroller
scroller.fireEvent('scrollstart', scroller, event)
offset.y = event.browserEvent.wheelDelta
scroller.scrollBy(offset,true)
scroller.snapToBoundary(true)
scroller.fireEvent('scrollend', scroller, offset)
break
el = el.parentNode
)


Javascript:


app.body.on('mousewheel', function(event, el) {
var offset, scroller, _results;
offset = Ext.util.Offset();
_results = [];
while (el !== document.body) {
if (el.className.indexOf("x-scroller-parent") > 0) {
scroller = Ext.ScrollManager.get(el.firstChild.id);
if (scroller) {
scroller.fireEvent('scrollstart', scroller, event);
offset.y = event.browserEvent.wheelDelta;
scroller.scrollBy(offset, true);
scroller.snapToBoundary(true);
scroller.fireEvent('scrollend', scroller, offset);
break;
}
}
_results.push(el = el.parentNode);
}
return _results;
});

Alex Vangelov
17 Sep 2011, 2:58 AM
if (/\x-scroller(?!-parent)\b/).test(el.className)
scroller = Ext.ScrollManager.get(el.id)

titanjer
10 Nov 2011, 8:25 AM
as title!
panel has no mousewheel event in sencha touch 2. how can i do?!

Thanks

zardinuk
8 Feb 2012, 8:43 PM
I agree with gwan, I just want my apps to run in a desktop browser with two-touch. I use sencha touch because it works better on an ipad, not because I'm building specifically for ipad. Would like to see a global config option or something to allow two-finger-touch. I actually think it should be the default, unless there is some compelling reason why the mousewheel event should be ignored. I imagine there are some tablets with a mousewheel.

I'm using sencha touch 2 the above code snippet doesn't work for me. I am currently attempting a hack will post here if I'm successful.

anj
29 Feb 2012, 5:12 AM
Hi, this one enable the native scrolling in current sencha 2 beta, but I can not guarantee that it is performant... i do not testet it in production...

if someone can pimp this, let me know!

best regards




// Native scrolling in Browser
document.addEventListener('mousewheel', function(e){
var el = e.target;
var offset, scroller, _results;
_results = [];
while (el !== document.body) {
if (el && el.className && el.className.indexOf('x-container') >= 0) {
var cmp = Ext.getCmp(el.id);
if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()){
var scroller = cmp.getScrollable().getScroller();
if (scroller) {
var offset = {x:0, y: -e.wheelDelta*0.5};
scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
scroller.scrollBy(offset.x, offset.y);
scroller.snapToBoundary();
scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y-offset.y);
break;
}
}
}
_results.push(el = el.parentNode);
}
return _results;
}, false);

jonmurua
15 Mar 2012, 1:20 PM
Any news on this?

I have started developing a cross platform application (smartphone, tablet and DESKTOP) using Sencha Touch, but the lack of mouse scrolling is a big concern.

Cheers

jonmurua
15 Mar 2012, 1:25 PM
By the way, @anj, your code (javascript) works perfect in my Chrome browser.
I just placed the code in the index.html.

Thanks a lot!

mitchellsimoens
16 Mar 2012, 4:58 AM
Sencha isn't going to do this.

diractor
29 May 2012, 1:13 PM
...and why?

stmcpherson
21 Jun 2012, 9:22 AM
We are using Sencha Touch for cross platform development. This issue is a consistant problem that is difficult to work around. Specifically, in the case of dropdown (select) menus that that have many options. Users who are not interacting via touch device have a hard time discovering Click-and-Drag as a method of scrolling the list. From all of our usage it seems that mouse wheel scrolling & two-finger scrolling should be default behavior. Can you please provide information to inform why "Sencha isn't goinig do this"?

anand.arvind
8 Jan 2013, 6:45 PM
I have an app I have deployed to the iOS and Android stores. Now I am taking the same thing and building a version that also works on the desktop in Chrome/Safari. For this I used the code in this thread to fix the scrolling and now need to figure out how to fix the scroll bar to support dragging and dropping. Any pointers on how this could be accomplished - am going to try to figure it out, but if someone has done it before that would help.

I initially tried to go down the ExtJS path for the desktop app, but found that there are enough differences between the two frameworks that it becomes pretty expensive to develop and maintain, so want to put out a V1 out there quickly and then figure out how to handle this in the long term if I have enough interest to put out one for IE and FireFox - and with desktop based controls.

Sencha touch supporting a bit of the desktop world will become more important as touch and non touch blends with Windows 8 - so it is time to consider this somewhere on the roadmap

abierbaum
16 Jan 2013, 12:50 PM
@anand.arvind Did you ever find a way to do this? I would also be interested in a way to solve this and allow dragging of scrollbars. We are finding a lot of people that want to run their mobile applications on windows 8 machines without touch support.



I have an app I have deployed to the iOS and Android stores. Now I am taking the same thing and building a version that also works on the desktop in Chrome/Safari. For this I used the code in this thread to fix the scrolling and now need to figure out how to fix the scroll bar to support dragging and dropping. Any pointers on how this could be accomplished - am going to try to figure it out, but if someone has done it before that would help.

I initially tried to go down the ExtJS path for the desktop app, but found that there are enough differences between the two frameworks that it becomes pretty expensive to develop and maintain, so want to put out a V1 out there quickly and then figure out how to handle this in the long term if I have enough interest to put out one for IE and FireFox - and with desktop based controls.

Sencha touch supporting a bit of the desktop world will become more important as touch and non touch blends with Windows 8 - so it is time to consider this somewhere on the roadmap

toorshia
14 Mar 2013, 3:06 AM
@anj Thanks a lot man, works like a charm in Chrome with SDK 2.1.1 :)

mankz
4 Aug 2013, 7:25 AM
+1 for getting native scrolling supported in Chrome and other 'good' browsers. Another place ST can be used, what's not to like? ST already translates click events and reacts to those as 'touch' events...

raztus
21 Oct 2013, 4:15 PM
We've been building a fairly complex application using Sencha Touch for the sole purpose that it works on both desktop and mobile. This was our customer's first requirement.

We'll try one of the solutions presented in this thread, but Sencha support would be best.

mgamsjager
11 Nov 2013, 4:07 AM
TBH Sencha is missing the boat here big time. For really simple apps that should work on a PC, tablet and phone (list of things, simple data entries) I really don't want to write 2 apps for that and route them accordingly to the device.

Take a look at SAP Fiori. Screen gets filled accordingly to the size of the screen (as in responsive design). At least start with a normal scrollbar for non touch devices and give the developer the choice and don't force your ideology on us.

niaaa
14 Jun 2014, 8:47 AM
+1

m.dostal
14 Jul 2014, 6:32 AM
...based on @anj code. Added support for Firefox and IE6/7/8 scrolling...



var mouseWheelHandler = function (e) {
var e = window.event || e,
el = e.target,
cmp,
offset,
scroller,
delta,
_results = [];
e.preventDefault(); // prevent scrolling when in iframe
while (el !== document.body) {
if (el && el.className && el.className.indexOf('x-container') >= 0) {
cmp = Ext.getCmp(el.id);
if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
scroller = cmp.getScrollable().getScroller();
if (scroller) {
delta = e.detail ? e.detail*(-120) : e.wheelDelta;
offset = { x:0, y: -delta*0.5 };
scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
scroller.scrollBy(offset.x, offset.y);
scroller.snapToBoundary();
scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y-offset.y);
break;
}
}
}
_results.push(el = el.parentNode);
}
return _results;
};

if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener('mousewheel', mouseWheelHandler, false);
// Firefox
document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
}
else {
// IE 6/7/8
document.attachEvent('onmousewheel', mouseWheelHandler);
}


Not tested, but it seems to work in my ST 2.3.1 application.