1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    San Diego, CA
    Posts
    158
    Vote Rating
    0
    locutusUT is on a distinguished road

      0  

    Default How to simulate slide transition on Android phone?

    How to simulate slide transition on Android phone?


    What's the trick to do a "slide" transition on an Android device? What's happening is that when I click on an item from a list it is supposed to bring up the details, but what happens is that it does the transition but the contents from the first screen stay there on top of the details card. On iPhone and Chrome it works fine.

    Here's what I'm trying to do to hide (similar to geocongress):

    Code:
    mobioasis.defaultAnim = Ext.platform.isAndroidOS ? false : 'slide';
    mobioasis.App = Ext.extend(Ext.Panel, {
        cls: 'app',
        fullscreen: true,
        layout: 'card',
        activeItem: 0,    
        initComponent: function() {        
            this.startScreen = new mobioasis.StartScreen({
                flex: 1
            });
            this.splash = new Ext.Container({
                cls: 'splash',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'end'
                },
                listeners: {
                    deactivate: this.onSplashDeactivate,
                    scope: this
                },
                items: [this.startScreen]
            });
            this.detail = new mobioasis.DieInfo();
            
            this.items = [this.splash, this.detail];
            mobioasis.App.superclass.initComponent.call(this);
            
            this.startScreen.on('dieselect', this.onDieSelect, this);
        },
        
        afterRender: function() {
            mobioasis.App.superclass.afterRender.apply(this, arguments);
            Ext.getBody().on(Ext.isChrome ? 'click' : 'tap', this.onLinkTap, this, {delegate: 'a.goOutside'});
        },
        
        onLinkTap: function(e, t) {        
            e.stopEvent();
            mobioasis.Util.openUrl(t.href);
        },
        
        
        onSplashDeactivate: function() {
            this.startScreen.list.clearSelections();
        },
        
        onDieSelect: function(dieId) {
            this.setCard(this.detail, mobioasis.defaultAnim);
            this.detail.update(dieId);
        }
    });
    One line I'm not entirely sure what it's doing is this one (what's the delegate: a.goOutside for):

    Code:
            Ext.getBody().on(Ext.isChrome ? 'click' : 'tap', this.onLinkTap, this, {delegate: 'a.goOutside'});
    TIA!

  2. #2
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    220
    Vote Rating
    7
    cnelissen is on a distinguished road

      0  

    Default


    A delegate on a click handler is to tell the event listener which child component you want to be the target of the event. In this case a.goOutside would refer to a link with a class of goOutside, i.e.

    Code:
    <div id="some-clickable-div">
        <a class="goOutside" href="#">Link</a>
    </div>
    You would be attaching the click handler to the div, but when clicked the target of the event would be the A tag.
    - Clint Nelissen

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    San Diego, CA
    Posts
    158
    Vote Rating
    0
    locutusUT is on a distinguished road

      0  

    Default


    Hmmm...well that probably rules that line out. Is there something I need to do to get the details card to show on top of the original card on Android?

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    0
    Browski is on a distinguished road

      0  

    Default


    Thanks for this code. I am having the same issue on an app that is scheduled to launch in 48 hours.

    What misled us to believe it was okay was that on Android tablets and on Android SDK Emulator, there was no sign at all of layout issue.

    Has this happened to a lot of developpers or we are an isolated case?

Similar Threads

  1. Replies: 3
    Last Post: 8 Sep 2010, 4:13 PM
  2. [FIXED-185] TabPanel with 'slide' animation should slide the other direction
    By orangechicken in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 13 Aug 2010, 1:02 AM
  3. Problem with transition slide
    By profunctional in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 9 Jul 2010, 6:51 AM
  4. Animate Toolbar Prob - Slide out one slide in another
    By coolbeans in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 19 Aug 2009, 9:39 AM
  5. Slide Transition Widget?
    By JamesColburn in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Sep 2008, 7:27 AM

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi