ExtJS 4.2 접을 수있는 패널 비정상적인 시각적 동작 확장

Question

접을 수있는 Panel으로 이상한 동작이 나타납니다.

문제를 시뮬레이션하기 JSFiddle를 만들 내 애플은 4.2.1에서 실행되고,하지만 난이 :

UPDATE를 나는 센차 바이올린이 (더 나은)

https://fiddle.sencha.com/#fiddle/7vk 내가 메인 패널을 만드는 것이 두 가지 항목, 즉 flex: 1이있는 그리드와 하단에 collapsible 인 패널이 있습니다.

var grid = Ext.create('Ext.grid.Panel',{ 
     title:'Grid', 
     flex: 1, 
     columns:[] 
    }); 

    var panel = Ext.create('Ext.panel.Panel',{ 
     renderTo: Ext.getBody(), 
     title:'Hola', 
     layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
     items: [ 
      { 
       xtype: 'grid', 
       padding: 10, 
       title: 'test', 
       columns:[], 
       flex: 1, 
       border: 1 
      }, 
      { 
       xtype: 'panel', 
       padding: 10, 
       title: 'test', 
       collapsible: true, 
      collapsed: true, 
      height: 300, 

       border: 1 
      } 
     ] 
}); 

당신이이 애니메이션 다음 뷰의 상단으로 이동합니다 및 패널을 확장

내려갑니다. 아주 이상한.

단서가 있습니까?

Answer 1

이것은 포함 요소의 레이아웃 이벤트가 자식이 축소/확장을 중단하면 발생하기 때문에 발생합니다. 문제는 주 컨테이너가 너무 좁아 패널을 확장 할 수 없다는 것입니다. 애니메이션 도중 고정 위치와 크기가 변경되면 보듯이 어색하게됩니다.

가장 좋은 해결책은 더 큰 컨테이너를 사용하여 제한이 나타나지 않도록하는 것입니다. 이를 수행 할 수있는 많은 방법이 있습니다. 여기에 귀하의 코드는 뷰포트에 포함 된 것 :

Ext.require(['*']); 

Ext.onReady(function() {  
    Ext.create('Ext.Viewport', { 
     title: 'Hola', 
     layout: { 
      type: 'border', 
      padding: 5 
     }, 
     defaults: { 
      split: true 
     }, 
     items:[ 
      Ext.create('Ext.panel.Panel',{ 
       title:'Hola', 
       region: 'center', 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
      items: [ 
       { 
        xtype: 'grid', 
        title: 'test', 
        columns:[], 
        flex: 1, 
        border: 1 
       }, 
       { 
        xtype: 'panel', 
        title: 'test', 
        collapsible: true, 
        collapsed: true, 
        height: 300, 
        border: 1 
       } 
      ] 
     })   
     ] 
    }); 
}); 

는 여기를 참조 : 당신이 정말로 애니메이션, 당신은 단지 그것을 해제 할 수 있음을 필요로하지 않는 경우

Answer 2

http://jsfiddle.net/mYp4r/ 나는 ExtJS에 5에서 동일한 문제가 있었다 패널 : animCollapse: false

패널이 제대로 접혀 있어야합니다.