1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    34
    Answers
    3
    Vote Rating
    2
    deliriousrhino is on a distinguished road

      0  

    Default Answered: Tap event on a toolbar

    Answered: Tap event on a toolbar


    I want a add a feature to my site where if a users taps on the top toolbar the contents of the page would scroll back to the top.


    I can handle the scrolling. I just noticed that the toolbar does not have a tap event. Is there a way I can make it throw one?

  2. I solved this problem by placing a absolutely position button in my base class for all my views

    {
    xtype: 'button',
    action: 'scrollToTop',
    cls: 'scrollTopTopBtn',
    top: 0,
    left: 60,
    width: Ext.Viewport.getSize().width - 120,
    height: 43
    }

    Then I listened for the 'scrollToTop' action in a controller

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi deliriousrhino,

    You can do this to add item (like button) into your top toolbar, for example
    Code:
    {
                xtype : 'toolbar',
                docked: 'top',
                items:[{
                    text:'Return Top',
                    handler:function(){
                        alert('Scrolling top');
                    }
                }]
            }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    34
    Answers
    3
    Vote Rating
    2
    deliriousrhino is on a distinguished road

      0  

    Default


    Thanks sword-it.

    It see how it could be done in your example.

    However I would much rather listen for an a event in a controller via controls that way I would not need to add the item and handle to every toolbar. Also I use now navigation views which add their own toolbars

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    The buttons will fire the tap event so you can listen to them in the controller
    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.

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    34
    Answers
    3
    Vote Rating
    2
    deliriousrhino is on a distinguished road

      0  

    Default


    I solved this problem by placing a absolutely position button in my base class for all my views

    {
    xtype: 'button',
    action: 'scrollToTop',
    cls: 'scrollTopTopBtn',
    top: 0,
    left: 60,
    width: Ext.Viewport.getSize().width - 120,
    height: 43
    }

    Then I listened for the 'scrollToTop' action in a controller

  7. #6
    Sencha User
    Join Date
    Nov 2013
    Posts
    6
    Vote Rating
    1
    shashi@sencha is on a distinguished road

      0  

    Default


    Go through this, I am able to make toolbar tappable by this -


    var toolbar = {
    xtype: 'toolbar',
    id: 'matters',
    name: 'matters',
    ui: 'plain',
    cls: 'whitebutton',
    margin: '20 0 0 0',
    items:[{
    xtype: 'component',
    html: 'Matters'
    },{
    xtype: 'spacer'
    },{
    xtype: 'component',
    html:'>'
    }],
    listeners:{
    initialize: function(){
    this.element.on({
    tap: function(){
    Ext.Msg.alert('Hi,', 'you tapped me.');
    }
    })
    }
    }


    };


    hope it helps.

  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    Instead of listening to initialize to add another listener, use one listener:

    Code:
    listeners : {
        element : 'element',
        tap : function() {....}
    }
    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.