アニメーション表示タブパネルの表示と非表示 - Ext JS

Question

私はExtJS 6.0.1を使用しています。私はExt.tab.Panelで設定された中央と東の領域を持つ私のビューポートを持っています。私は中央と北の領域を表示したり隠したりするためにボタンを使います。私はshow（）とhide（）メソッドで完全にそれを行うことができました。 /表示するには

xtype  : 'app-main', 
 
    controller : 'main', 
 
    viewModel : { 
 
     type: 'main' 
 
    }, 
 
    layout  : { 
 
     type: 'border' 
 
    }, 
 
    initComponent: function(){ 
 
     var me = this; 
 
     Ext.applyIf(me,{ 
 
      items : [{ 
 
      region  : 'center', 
 
      xtype  : 'layoutP1', 
 
      split  : true,    
 
      flex  : 1 
 
     },{ 
 
      region  : 'east', 
 
      xtype  : 'layoutP2', 
 
      layout  : 'fit', 
 
      split  : true, 
 
      hidden  : true, 
 
      flex  : 1 
 
     }] 
 
    });

私はフッターにあるボタンを使用して任意の方向にスライドさせることでビューをアニメーション化する方法は、中央と東地域のパネルが非表示にされ

onClickP1: function() { 
 
     this.getP2layout().flex = 2000; 
 
     this.getP1layout().show(); 
 
     this.getP2.hide(); 
 
    }, 
 
onClickP2View: function() { 
 
     this.getP2layout().flex = 2000; 
 
     this.getP1layout().flex = 2000; 
 
     this.getP1layout().hide(); 
 
     this.getP2layout().show(); 
 
    }

これで、パネルを表示したり非表示にすることができますリージョンに基づいて左から右/右から左へスライドするようにアニメートする必要があります。

Splittersを使用して同じことを行う方法はありますか。私はデフォルトでPanelを見ることができます。それは、パネルを折りたたんで展開するためのスプリッタが付いています。

Answer 1

slideInをdom要素（panel/veiw）にする必要があります。

slideInは、要素を表示するためにスライドします。アンカーポイントは、スライドエフェクトの原点を設定するためにオプションで渡すことができます。この関数は、必要に応じて固定サイズのコンテナで要素を折り返し処理します。有効なアンカーポイントオプションについては、Ext.fx.Animクラスの概要を参照してください。

使用方法：このFIDDLEで

// default: slide the element in from the top 
el.slideIn(); 

// custom: slide the element in from the left with a 2-second duration 
el.slideIn('l', { duration: 2000 }); 

// common config options shown with default values 
el.slideIn('r', { 
    easing: 'easeOut', 
    duration: 500 
}); 

、私はデモを作成しました。私はこれがあなたの要件を達成するためにあなたを導くことを願っています

コードスニペット

Ext.create('Ext.tab.Panel', { 
    height: window.innerHeight, 
    renderTo: document.body, 
    items: [{ 
     title: 'Border Layout', 
     layout: 'border', 
     items: [{ 
      title: 'Center Region', 
      region: 'center', // center region is required, no width/height specified 
      xtype: 'panel', 
      itemId: 'p1', 
      layout: 'fit', 
      split: true 
     }, { 
      // xtype: 'panel' implied by default 
      title: 'East Region is collapsible', 
      layout: 'fit', 
      region: 'east', 
      itemId: 'p2', 
      xtype: 'panel', 
      split: true, 
      hidden: true 
     }], 
     buttons: [{ 
      text: 'P1', 
      disabled: true, 
      handler: function() { 
       this.up('tabpanel').doHideShow(this) 
      } 
     }, { 
      text: 'P2', 
      handler: function() { 
       this.up('tabpanel').doHideShow(this) 
      } 
     }] 
    }], 

    //For hide/show view on basis of button click P1/P2 
    doHideShow: function (btn) { 
     btn.setDisabled(true); 
     if (btn.getText() == 'P1') { 
      this.down('#p1').show().setWidth('100%').getEl().slideIn('l'); 
      this.down('#p2').hide(); 
      this.down('[text=P2]').setDisabled(false); 
     } else { 
      this.down('#p2').show().setWidth('100%').getEl().slideIn('r'); 
      this.down('#p1').hide(); 
      this.down('[text=P1]').setDisabled(false); 
     } 
    } 
});