1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default Answered: showAnimation / hideAnimation Troubles

    Answered: showAnimation / hideAnimation Troubles


    I'm having some issues getting the show / hide animations to work. Simply putting slideIn or slideOut into those fields just doesn't seem to be working for me.

    I've got a panel with a card layout that I am trying to have slide in from the left side when I click a button. I've got it all working except the slideIn, slideOut.

    Is there any way to control the timing of them as well? Maybe it's not working because I am not "showing" or "hiding" the panel? Here is what is happening when I click the button that shows the panel.

    Code:
    var me = this;
    var app = me.getMainContainer();
    if(!app.child('#leftPanelContainer')){
        var leftPanel = Ext.create('MyApp.view.leftPanel',
            {
                 id:'leftPanelContainer',
                 left:'0',
                 width:'20%',
                 bottom:0,
                 height:'100%'
            }
            );
        app.add(leftPanel);
    }else{
        app.child('#leftPanelContainer').destroy();
        
    }
    Here is the config settings inside the leftPanel class -

    Code:
     config: {
            hideAnimation: 'slideOut',
            showAnimation: 'slideIn',
            layout: {
                animation: 'fade',
                type: 'card'
            },
    So I thought maybe that it was because I didn't have the panel added to the main view and have it hidden. So I moved the panel into the main view as opposed to dynamically instantiating it and adding it through the tap function. I altered the tap function to just show or hide the panel instead. Unfortunately this had the same results... no results... Still just pops in and out of the view.

    Code:
    var leftPanel = me.getLeftPanel();
    
    
    if(leftPanel.getHidden() === true){
            leftPanel.setHidden(false);
        }else{
            leftPanel.setHidden(true);
        }
    Last edited by ashapiro75; 18 Apr 2012 at 5:53 AM. Reason: Tried the other method....

  2. Have you tried using an object for showAnimation - something like


    Code:
    showAnimation: {
                type: 'slide',
                direction: 'right'
            }

  3. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default


    Ok, I figured it out, setHidden, setShow wasn't working, I found a few examples on this blog - http://senchaexamples.com
    S
    o Instead of leftPanel.setHidden(true); I used leftPanel.hide(); and leftPanel.show();

    Now, how do I control speed and direction? Etc.. .
    Code:
    if(leftPanel.getHidden() === true){
            leftPanel.show();
        }else{
            leftPanel.hide();
        }
    [/QUOTE]

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Answers
    1
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    Right way to do this would be specify animation object under layout

    Code:
    config: {       
            layout: {       
                type: 'card',   
                animation: {    
                    type: 'slide',
                    direction: 'up',
                    duration: 300
                }           
            },
    You still can use following in your button handler before changing active card

    Code:
    this.getLayout().setAnimation({
        type: 'slide',
        direction: 'left'
        duration: 500
    });
    this.setActiveItem(1);
    Last edited by bharatn; 18 Apr 2012 at 10:05 AM. Reason: thought was designer related
    Bharat Nagwani
    Sencha Designer Development Team

  5. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default


    Isn't what you are showing me for the animations from tab to tab ? The structure of my object is below -

    Top Level Container ( this is my leftPanel Class)
    ---Tab Panel
    ------Tab 1
    --------List 1
    ------Tab 2
    --------List 2
    ------Tab 3
    --------List 3

    I don't have a problem modifying the transitions from Tab 1 to Tab 2 to Tab 3, etc...

    My animation issue is with Top Level Container when it shows up on the screen. It is supposed to sit on the left side of the screen, taking up 20% of the left side. I have it slideIn and slideOut. When it slides in, it slides in from the right side of the screen across the whole viewport.

    I've posted the app under one of our development domains - http://mydaisy-stage.blueboltlive.com/m/app.html you can see how the panels are sliding. There are a bunch of ajax calls that are not working on that domain but they work on my local development server.

  6. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Answers
    1
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    Have you tried using an object for showAnimation - something like


    Code:
    showAnimation: {
                type: 'slide',
                direction: 'right'
            }
    Bharat Nagwani
    Sencha Designer Development Team

  7. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default


    Ahhh That works! Thank you! I had tried this before, what would happen is I would add {type:'slide',direction:'right'} to the field value in the ui but the code was producing this:

    Code:
    showAnimation: '{type:\'slide,direction:\'right\'}\n',
    So I kept fiddling with the formatting of that I discovered that if I add the new lines manually and typed it into the box like this -

    Code:
    {
    type:'slide',
    direction:'right'
    }
    It actually works... So maybe this is a bug because you would think that either way should work and when you give someone a little box to enter it in, the instinct is to put it all on one line and not hit returns inside the field itself. Maybe not a bug but not great UX then.

  8. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default


    Actually I spoke too soon. I can get the leftPanel to slide in from the left and out to the left this way and I can get the right panel to slide in and out to the right this way however before the right panel slides out, it jumps all the way to the left.

  9. #8
    Sencha User
    Join Date
    May 2012
    Location
    Breda, The Netherlands
    Posts
    2
    Vote Rating
    0
    cjager272 is on a distinguished road

      0  

    Default Panel/list not fully filled up?

    Panel/list not fully filled up?


    Hi,

    I've got the same sort of problems. I'm using

    Code:
    showAnimation: {
      type: "slide", 
      direction: "left" 
    },
    
    hideAnimation: {
      type: "slideOut", 
      direction: "right" 
    }
    for nestedlist and panel. But somehow the panels/ lists get laid over each other, and some panels won't slide but just show up. It seems arbitrary.

    Also, if I test on iPhone 4S' Safari browser, all screens (accept the one underneath info button, "Over deze app") seem to be unsharp.

    Code can be found on http://cjager.com/ziekenhuis/app/app.js

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar