extjs가 아닌 HTML로 렌더링되는 ExtJS 4에서 "자동 높이"TabPanel 만들기?

이것은 TabPanel의 "autoHeight"속성을 설정하고 "defaults"구성을 통해 해당 자식 항목에 대해 간단히 설정하여 3.x에서 수행하는 것이 매우 쉽습니다. 그러나 나는 그것을 4.x에서 이것을 달성하는 방법을 아직 보지 못했다. 탭은 내용의 초기 높이에 맞게 크기가 조정되지만, init 이후에 내용의 높이가 변경되면 탭 내용은 숨겨 지거나 스크롤됩니다.extjs가 아닌 HTML로 렌더링되는 ExtJS 4에서 "자동 높이"TabPanel 만들기?

나는이 주제에 대해 이미 sencha의 공식 포럼에서 가장 자주 제기되는 해결책은 tabpanel의 상위 컨테이너의 레이아웃을 "적합"으로 설정하고, 정렬을 "늘리기"로 설정하는 것이었지만, 제 경우에는 TabPanel 내 페이지의 본문에 어딘가에 앉아 생성 된 직선이 아닌 내선 에드 다른 내선 구성 요소의 아이가 아닌, 그것은 "renderTo는" ', 그래서 이러한 솔루션은 적용되지 않는다.

어떤 아이디어?

출처

2011-11-21 Bill Dami

이것은 어떤 사람이 관심이있는 경우를 대비 한 나의 해결책이었습니다. 이상하게도 꽤 이상하지는 않지만 잘 작동하는 것 같습니다. 누군가 내가 지금 성취하려는 것을 더 잘 볼 것이며 더 나은 imp lementation :-)

Ext.define('Ext.tab.AutoHeightPanel', { 
    extend: 'Ext.tab.Panel', 
    alias: 'widget.autoheighttabs', 

    constructor: function(cnfg){ 
     this.callParent(arguments); 
     this.initConfig(cnfg); 
     this.on('afterlayout', this.forceAutoHeight, this); 
     this.on('afterrender', this.forceAutoHeight, this); 
     this.on('resize', this.forceAutoHeight, this); 
    }, 

    forceAutoHeight: function(){ 
     this.getEl().applyStyles({height : 'auto', overflow : 'visible'}); 
     this.items.each(function(item, idx, len) { 
      if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'}); 
     }); 
    } 
});

당신은 패널의 맨 아래에 반대 참견 컨텐츠를 방지하기 위해 탭 패널의 style 설정에 '마진 - 하단의'값을 추가 할 수 있습니다.

출처

2011-12-06 14:35:13

나는 똑같은 문제가 있었고 해결책은 좋지 않았지만 컨텐츠가 업데이트되었을 때를 알고 있었기 때문에 필요한 경우 패널에서 doComponentLayout()을 호출하는 것이 전부였다.

출처

2012-12-11 00:59:50

extjs가 아닌 HTML로 렌더링되는 ExtJS 4에서 "자동 높이"TabPanel 만들기?

답변

관련 문제