Results 1 to 7 of 7

Thread: Tap event on a toolbar

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    37
    Answers
    3
    Vote Rating
    4
      0  

    Default 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 User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124
    Vote Rating
    91
      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
    37
    Answers
    3
    Vote Rating
    4
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    The buttons will fire the tap event so you can listen to them in the controller
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    37
    Answers
    3
    Vote Rating
    4
      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
    Location
    Noida
    Posts
    6
    Vote Rating
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

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

    Code:
    listeners : {
        element : 'element',
        tap : function() {....}
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •