PDA

View Full Version : Ext.ux.plugin.TapToScroll



wnielson
27 Feb 2013, 5:06 PM
A common design pattern is to scroll to the top of a list (or other long scrollable container) when the user taps on a toolbar. Implementing this behavior is pretty easy to do and only takes a few lines, but I found myself doing it so frequently that it made sense to create a plugin that takes care of it automatically.

As a simple example, consider the following:



Ext.define("MyApp.view.MyList", {
extend: "Ext.dataview.List",

requires: [
'Ext.ux.plugin.TapToScroll'
],

config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Toolbar'
}],
plugins: [{
xclass: 'Ext.ux.plugin.TapToScroll'
// config options go here...
}],
scrollable: 'vertical',
itemTpl: '{name}',
data: [
// A really long list of items...
]
}
});


Now, when the user "doubletap"s on the 'toolbar', the list will be scrolled to the top. This would achieve the same results, but is more verbose:



...
plugins: [{
xclass: 'Ext.ux.plugin.TapToScroll'
tapSelector: 'toolbar', // or 'titlebar', or a function that returns a component
tapEvent: 'doubletap', // or an array of events
scrollTo: {
x: 0,
y: 0
},
scrollAnimation: true // false to disable animation on scroll
}],
..


For fun we could listen to more events by passing `tapEvent` as an array of events, like:



tapEvent: ['doubletap', 'longpress']


For more details, check out the plugin over at GitHub (https://github.com/wnielson/sencha-TapToScroll/blob/master/ux/plugin/TapToScroll.js).

mitchellsimoens
1 Mar 2013, 7:34 AM
Thanks for the contribution. Love the comments!