Results 1 to 5 of 5

Thread: How to call a function from another function in your controller?

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Answered: How to call a function from another function in your controller?

    I've been having some fun building yet another side menu but this time using the built-in Ext.Anim and Transform3D CSS properties. So far so good, it works (my intention is to be able to make it easy to tweak the transform animation in the future easily by changing the Transform3D settings).

    Anyway, at the moment the issue I'm having is calling the slideIn(); and slideOut(); functions from within another function. I have setup a simple swipe detector that works using this code (I see the swipe left and right message appear on the device) but the slideIn and slideOut functions are not called.

    They are called on buttontap though so I'm wondering if it's not working because it's nested within the swipe function (I'm guessing it's out of scope?):

    Code:
     MainContainerWithToolbarSwipeLeftRight: function(component, eOpts) {
            component.element.on({
                        swipe: function(e, node, options){
                            if(e.direction == "left") {
    
    
                                this.slideIn();     // Tried adding this but it doesn't do anything
                                alert("Hey! I swipe left");
    
    
                            } else if(e.direction == "right"){
    
    
                                this.slideOut();     // Tried adding this but it doesn't do anything
                                alert("Hey! I swipe right");
    
    
                            }
                        }
                    });
    How would I call slideIn and slideOut then if it's out of scope? The slideIn and slideOut functions are just normal functions in the controller without any refs etc. Here is part of some code which works on button tap:

    Code:
     slideOut: function() {
                    // for main view
                     new Ext.Anim({                    
                     autoClear: false,
                        to: {
                            'transform': "translate3d(280px, 0, 0)",
                            '-webkit-transform': "translate3d(280px, 0, 0)",
                            '-ms-transform': "translate3d(280px, 0, 0)",
                            '-o-transform': "translate3d(280px, 0, 0)",
                        },
    
    
                    [snipped for brevity]
    
    
        },
    In my controller I have this. Basically slideOut works on buttontap, but not on swipe. Here are some refs:

    Code:
    control: {
                "button": {
                    tap: 'onSidebarBtnTap'
                },
                "sidebar": {
                    itemtap: 'SidebarTap'
                },
                "MainContainerWithToolbar": {
                    initialize: 'MainContainerWithToolbarSwipeLeftRight'
                }
            }
    Any help would be appreciated! I will probably share this as a blog post in the future.

    :-)
    I got tired of my stupid username :-)

  2. You can control what the scope is of the function:

    Code:
    component.element.on({
        scope : this,
        swipe : function() {}
    });

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    This is just a scope issue, this is a plain JavaScript issue.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default

    I suspected it was, I've been reading up a fair bit about scope but it's not so easy! The slide function gets called fine on tap of course:

    Code:
    SidebarTap: function(dataview, index, target, record, e, eOpts) {        console.log(record.get('firstName'));        
    this.slideIn();    
    },
    And there doesn't seem to be an easier way of detecting swipe on a container other than putting it inside the container's initialize function. If anyone knows how would I get the scope of the slideIn(); function back please let me know...the below code is called inside the initialize function of the main container:

    Code:
     
     component.element.on({
                        swipe: function(e, node, options){
                            if(e.direction == "left") {
    
                             //   this.slideIn();
                                alert("Hey! I swipe left");
    
                            } else if(e.direction == "right"){
    
                             //   this.slideOut();
                                alert("Hey! I swipe right");
    
                            }
                        }
                    });
    I got tired of my stupid username :-)

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    You can control what the scope is of the function:

    Code:
    component.element.on({
        scope : this,
        swipe : function() {}
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Amazing, thanks

    Amazing, thanks you rock :-)

    I think I understand scope much better now...it's allowing the referencing of the outer function in the controller inside the swipe function. Here's the code that works:

    Code:
    var me = this;  
    
    
    component.element.on({
        scope : me,        
        swipe : function(e, node, options) {
             if(e.direction == "left") {
    
                        me.slideIn();
    
                    } else if(e.direction == "right"){
    
                        me.slideOut();
    
                    }
        }
    });
    I now have a fast and lightweight sidemenu that has swipe functionality with very little code, and it uses the built-in Ext.Anim class. I already had the code on the button tap, now the simple swipe code just calls that function. Should be easy to modify now to allow for some cool side menu effect using Translate3D. Thanks again!

    :-)
    I got tired of my stupid username :-)

Similar Threads

  1. Replies: 2
    Last Post: 30 May 2014, 6:41 AM
  2. Replies: 31
    Last Post: 2 Jun 2013, 3:08 PM
  3. Replies: 1
    Last Post: 26 Jul 2012, 4:24 AM
  4. How do you call a function in a controller from within its self.
    By jensenaxel in forum Sencha Touch 2.x: Q&A
    Replies: 7
    Last Post: 26 Mar 2012, 11:52 AM
  5. Replies: 2
    Last Post: 28 Dec 2011, 7:16 AM

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
  •