1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    14
    wnielson will become famous soon enough

      0  

    Default Ext.ux.plugin.TapToScroll

    Ext.ux.plugin.TapToScroll


    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:

    Code:
    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:

    Code:
    ...
      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:

    Code:
    tapEvent: ['doubletap', 'longpress']
    For more details, check out the plugin over at GitHub.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the contribution. Love the comments!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1