Results 1 to 8 of 8

Thread: Ext.ActionSheet Animation doesn't work after upgrading to version 2.0.1 RC

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2693 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    169

    Default Ext.ActionSheet Animation doesn't work after upgrading to version 2.0.1 RC

    Hello, this my first post and I'd like to say thank you for your great work with sencha!
    Today after upgrading to Sencha Touch 2.0.1 RC I found some problem with the ActionSheeet animation:

    Ext version tested:
    • Sencha Touch 2.0.1 RC
    Browser versions tested against:
    • Google Chrome 18.0.1025.142
    • Safari (IOS 5.1 Iphone)
    DOCTYPE tested against:
    • <!DOCTYPE HTML>
    Description:
    • My app uses MVC design pattern. With the Sencha Touch 2.0.0 version the ActionSheet default animation (slidin from bottom to top) was working well. After upgrading to the new version (2.0.1 RC) I found some problem about not found files for List and Carousel (solved changing the path reference from Ext.List to Ext.dataview.List and from Ext.Carousel to Ext.carousel.Carousel). Now the last problem is this one about ActionSheet animation
    Steps to reproduce the problem:
    • Try the code in "Test Case"
    The result that was expected:
    • You should display the ActionSheet animation from bottom to top
    The result that occurs instead:
    • The ActionSheet appears but quickly and without slide animation
    Test Case:

    Code:
         var actionSheet = Ext.create('Ext.ActionSheet', {
                items: [
                    {
                        xtype: 'button',
                        text: 'TEST ACTION 1',
                        ui  : 'confirm',
                        iconCls: 'shop1',
                        iconMask: true,
                        scope: this,
                        handler: function() {
                            actionSheet.hide();
                            //...
                        }
                    },
                    {
                        text: 'TEST ACTION 2',
                        iconCls: 'photos2',
                        iconMask: true,
                        scope: this,
                        handler: function() {
                            actionSheet.hide();
                            //...
                        }
                    }
                ]
            });
            
            Ext.Viewport.add(actionSheet);
            
            actionSheet.show();
    I was trying even in this way (but it did not work):

    Code:
         var actionSheet = Ext.create('Ext.ActionSheet', {
                showAnimation: {
                    type: 'slideIn',
                    duration: 10000,
                    easing: 'ease-out',
                    direction: 'up'
                },
                items: [
                    {
                        xtype: 'button',
                        text: 'TEST ACTION 1',
                        ui  : 'confirm',
                        iconCls: 'shop1',
                        iconMask: true,
                        scope: this,
                        handler: function() {
                            actionSheet.hide();
                            //...
                        }
                    },
                    {
                        text: 'TEST ACTION 2',
                        iconCls: 'photos2',
                        iconMask: true,
                        scope: this,
                        handler: function() {
                            actionSheet.hide();
                            //...
                        }
                    }
                ]
            });
            
            Ext.Viewport.add(actionSheet);
            
            actionSheet.show();

    HELPFUL INFORMATION

    Possible fix:
    • I found a workaround passing the animation in the show() method of AS.
    Code:
    var animation = {
        type: 'slideIn',
        duration: 250,
        easing: 'ease-out',
        direction: 'right'
    };
    var actionSheet = Ext.create('Ext.ActionSheet', {
    //....
    }
    
    Ext.Viewport.add(actionSheet);    
    
    actionSheet.show(animation);

    Additional information:
    • This is working only with direction = 'left' and direction = 'right'. ('up' and 'down' are not working)
    Operating System:
    • MacOS Lion 10.7.3
    • iOS 5.1 (iPhone 4s)

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    169

    Default

    I have the same problem using DatePicker and Picker... probably there is a bug with the animation component.

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Very strange, I don't have this issue on 2.0.1RC. Does our standard Picker example have this behavior for you?

    Sencha Inc

    Jamie Avins

    @jamieavins

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    84

    Default

    I'm having the same problem. After doing a bit more testing, I found that if the actionsheet is added to Ext.Viewport, the animation doesn't work. However if I add the actionsheet to a panel that's already added to Ext.Viewport, the animation works as expected.

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75

    Default

    Same problem here. Only right and left animation works when added directly to viewport. I am using 2.0.1 commercial.

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    84

    Default

    If you've upgraded recently, gypsy, make sure to recompile compass.

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    Dundas, Ontario, Canada
    Posts
    84

    Default

    I have this issue too, commercial 2.0.1, no up or down animation working. Left and right work fine. Also, fade out when using hide() with an action sheet actually goes to nothing then fades in an disappears -- it's backwards.

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
  •