ExtJS簡單的動畫效果（extjs淡入淡出特效）

落雨_發表於2013-07-23
JS動畫特效

1.html頁面：Application HTML file – index.html

<html>
<head>
<title>ExtJs fadeIn() and fadeOut() example</title>
  
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <style type="text/css">
 .x-panel-body{
  background-color:#8b8378;
  color:#ffffff;
 }
 </style>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
  
</head>
<body>
<div id="myExample">
</div>
</body>
</html>

2.app.js ：Application JavaScript file – app.js

Ext.Loader.setConfig({
 enabled: true
 });
  
Ext.application({
      
 name: `myApp`,
    appFolder: `app`,
      
    controllers: [
                  `MyController`
              ],
  
    launch: function() {
     Ext.create(`Ext.container.Container`, {
         renderTo: `myExample`,
            items: [
                {
                 xtype: `myView`,
                }
            ]
        });
    }
});

3.檢視View: Application View – MyView.js

Ext.define(`myApp.view.MyView` ,{
 extend: `Ext.container.Container`,
 alias : `widget.myView`,
   
    height: 400,
    width: 400,
    layout: {
        align: `stretch`,
        type: `vbox`
    },
    defaults: {
     margin: `5 5 5 5`
    },
  
    initComponent: function() {
        var me = this;
  
        Ext.applyIf(me, {
            items: [
                {
                    xtype: `button`,
                    text: `Click here to see fadeOut() effect`,
                    action: `fadeInfadeOut`,
                    pressed: true,
                    enableToggle: true
                },
                {
                    xtype: `panel`,
                    height: 200,
                    html: `Just some TEXT for ExtJs page Animation ...`,
                    id: `section`,
                }
            ]
        });
  
        me.callParent(arguments);
    }
});

4.控制器:Application Controller – MyController.js

Ext.define(`myApp.controller.MyController`, {
   extend : `Ext.app.Controller`,
  
   //define the views
   views : [`MyView`],
     
   init : function() {
    this.control({
       
     `container` : {
      render : this.onPanelRendered
     },
     `myView button[action=fadeInfadeOut]` : {
      toggle : this.onFadeInFadeOutRequest
     }
    });
   },
  
   onPanelRendered : function() {
    console.log(`The container was rendered`);
   },
     
   onFadeInFadeOutRequest : function(button, pressed) {
    console.log(`Button Click`,pressed);
    if(!pressed){
     button.setText(`Click here to see fadeIn() effect`);
     Ext.get("section").fadeOut({
         opacity: 0,
         easing: `easeOut`,
         duration: 2000,
         remove: false,
         useDisplay: false
     });
    }
    else {
     button.setText(`Click here to see fadeOut() effect`);
     Ext.get("section").fadeIn({
         opacity: 1,
         easing: `easeOut`,
         duration: 2000
     });
    }
   }         
     
           
 });

 


相關文章