애니메이션 tabpanel에서보기 표시 및 숨기기 - 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를 사용하여 동일한 작업을 수행 할 수있는 방법이 있습니까? 기본적으로 패널을 볼 수 있습니다. 패널을 접고 펼치려면 스플리터가 함께 제공됩니다.

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