Working Example of Sencha Fade Effect

Can someone write me the full code to show me how I can fade in and fade out an html element with sencha touch 1? Specifically, I need to know what is the necessary html, javascript and css files to include.

I've tried forever to get a simple fade effect to work on a div element, but no success. Either I get method not found errors or nothing happens. No one is answering my questions on the sencha forums. I'm pretty sure i'm just missing something obvious.

Additional Notes

Here are things I tried and why they failed:

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {

      //    Ext.get('mydiv').hide();
      //    Ext.get('mydiv').fadeOut(); // fadeOut() does not exist error
      //    Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true}); // does nothing
      //    Ext.Anim.run(Ext.getDom('mydiv'), 'fade', {out:true}); // does nothing
      }
    });
    </script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>

Here you go:

          Ext.setup({
                onReady: function() {

                    var bool = true;

                    var button1 = new Ext.Button({
                        text:'Fade',
                        id:'button1',
                        handler: function(){
                            Ext.Anim.run(button2, 'fade', {
                                out: bool,
                                autoClear:false
                            });
                            bool = !bool;
                            console.log("fade end");
                        }
                      });

                    var button2 = new Ext.Button({
                        text:'Fade'
                    });

                    var toolbar = new Ext.Toolbar({
                        dock:'top',
                        title:'Fade',
                        items:[button1,{xtype:'spacer'},button2]
                    });

                    new Ext.Panel({
                        fullscreen: true,
                        dockedItems: toolbar
                    });
                }
            });

The auto clear attributes will keep the button hidden after fading

Here for prosperity is a fiddle of a concurrent fade in and fade out.

It uses a container with an absolute layout.

http://jsfiddle.net/R6cgc/13/

var into = Ext.create('Ext.Container', {
    width: 440,
    itemId: 'animTo',
    layout: {
        type: 'absolute'
    },
    style: {
        backgroundColor: '#000',
        padding: '20px'
    },
    renderTo: Ext.getBody()           
});

var one = Ext.create('Ext.Component', {
    width: 360,
    height: 100,
    x: 0,
    y: 0,
    itemId: 'one',
    style: {
        backgroundColor: 'green'
    }   
});

var two = Ext.create('Ext.Component', {
    width: 360,
    height: 500,
    x: 0,
    y: 0,
    itemId: 'two',
    style: {
        backgroundColor: 'red',
        opacity: 0
    }      
});


into.add(one);
into.add(two);
into.getEl().setHeight(two.getEl().getHeight() + 40);
two.hide();
var current = one;

Ext.create('Ext.button.Button', {
    text: 'Fade',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            current.getEl().fadeOut({ duration: 2000});
            current = current == one ? two : one;
            current.getEl().fadeIn({ duration: 2000});
        }
    }
});

Ok, I finally figured it out. As TDeBailleul explains, autoClear keeps elements hidden after fading. Here's another example

Example: Fade In

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {
            Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:false, duration:1000, autoClear:false});
      }
    });
    </script>
</head>
<body><div id="mydiv" style="opacity:0;">hello world</div></body>
</html>

Example: Fade Out

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {

         Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true, duration:1000, autoClear:false});

      }
    });
    </script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>

来源：https://stackoverflow.com/questions/9413842/working-example-of-sencha-fade-effect

标签

sencha-touch

fade