All geek questions in one place

Working example of the Sencha attenuation effect

Can someone write me the full code to show me how I can fade in and out the html element with sencha touch 1? In particular, I need to know which html, javascript and css files I need to include.

I tried forever to get a simple fade effect to work on a div element, but without success. Either I get a method of not found errors, or nothing happens. No one answers my questions on the sencha forums. I'm sure I just missed something obvious.

Additional notes

Here is what 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>
+4
source share
3 answers

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 }); } });

Auto-clean attributes retain hidden button after fading

+5
source

Here for prosperity there is a violin of parallel attenuation and extinction.

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}); } } });
+2
source

Well, I finally figured it out. As TDeBailleul explains, autoClear keeps elements hidden after fading. Here is 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>
+1
source

Source: https://habr.com/ru/post/1398034/

More articles:


All Articles