ExtJSの簡単なアニメーション効果(ext jsフェードアウト効果)

8956 ワード

javascript

1.ページ:Appliation HTML file-index.

<html>
<head>
<title>ExtJs fadeIn() and fadeOut() exampletitle>
  
    <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-ap.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.ビュービュービュービュービュー:Apple 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
     });
    }
   }         
     
           
 });

転載先:https://www.cnblogs.com/ae6623/p/4416478.html

How to Verify JSON Data With AnglarJS$http Backend