1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    17
    Answers
    1
    Vote Rating
    0
    guglio is on a distinguished road

      0  

    Default Answered: How to hide carousel whit tap event

    Answered: How to hide carousel whit tap event


    Hi,
    I'm trying to build a catalogues viewer, the structure that I'm using now is a nested list, with a dataview as the detailcard, and a popup carousel starting from the dataview item tapped.

    The structure is the following:

    company name
    list of catalogues
    detailcard with the catalogue pages (3 per row)
    carousel starting from the page tapped
    My big problem is hiding the carousel, now I set the hideOnMaskTap:true, but, on desktop or iPad, I set the carousel to automatically get the dimension of the page in scale, but on iPhone in portrait, the portion of the screen to tap for hiding the carousel is very thin.
    I know that the carousel doesn't have the itemtap or tap event, is there any other way to hide the carousel other than tapping outside of the carousel?

  2. As you mentioned, tap events won't work directly on the component. However, you can target the component's element. In your controller, get a reference to your carousel and listen for a tap event on the element.

    PHP Code:
    control : {    
         
    "mycarouselreference" : {        
              
    initialize : function(carousel){            
                   
    carousel.element.on('tap', function(eel){                
                        
    // hide your carousel            
                   
    }, this);        
              }    
         }

    BETTER SOLUTION

    While the above will work, the component isn't going to be sent as argument. A better solution would be to put the listener in the component and fire the event from there. That will ultimately save some performance since the initialize event isn't needed in the controller.

    PHP Code:
    Ext.define('YourApp.view.YourCarousel', {
        extend 'Ext.Carousel',
        xtype  'yourcarousel',
        initialize : function() {
            this.callParent();
            this.element.on('tap'this.onTapthis);
        },
        onTap : function(et) {
            this.fireEvent('tap'thiset);
        }
    }); 
    Thanks!
    Greg

  3. #2
    Sencha - Support Team
    Join Date
    Mar 2012
    Location
    Lawrence, KS
    Posts
    252
    Answers
    37
    Vote Rating
    33
    greg.barry has a spectacular aura about greg.barry has a spectacular aura about

      1  

    Default Tap that element

    Tap that element


    As you mentioned, tap events won't work directly on the component. However, you can target the component's element. In your controller, get a reference to your carousel and listen for a tap event on the element.

    PHP Code:
    control : {    
         
    "mycarouselreference" : {        
              
    initialize : function(carousel){            
                   
    carousel.element.on('tap', function(eel){                
                        
    // hide your carousel            
                   
    }, this);        
              }    
         }

    BETTER SOLUTION

    While the above will work, the component isn't going to be sent as argument. A better solution would be to put the listener in the component and fire the event from there. That will ultimately save some performance since the initialize event isn't needed in the controller.

    PHP Code:
    Ext.define('YourApp.view.YourCarousel', {
        extend 'Ext.Carousel',
        xtype  'yourcarousel',
        initialize : function() {
            this.callParent();
            this.element.on('tap'this.onTapthis);
        },
        onTap : function(et) {
            this.fireEvent('tap'thiset);
        }
    }); 
    Thanks!
    Greg
    Last edited by greg.barry; 5 Mar 2013 at 2:10 PM. Reason: Added better solution

  4. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    17
    Answers
    1
    Vote Rating
    0
    guglio is on a distinguished road

      0  

    Default


    The "better solution" works like a charm!!!
    Thanks so much!!!

  5. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    17
    Answers
    1
    Vote Rating
    0
    guglio is on a distinguished road

      0  

    Default


    I don't know why this method doesn't work when the app is compiled to production with sencha cmd.
    It pops up the carousel, but it's empty, and it won't closed on tap event.

    Any suggestions?

    Thanks in advance.

    If you want to see the problem, here's a link to the compiled webapp: http://www.ciamcostruzioni.it/CIAM_app/
    (Cataloghi -> C.I.A.M. -> Edilizia Ecosostenibile)
    Last edited by guglio; 30 Jun 2013 at 1:37 PM. Reason: Add the link

Thread Participants: 1