Div의 높이가 확장되지만 div의 작업 영역 밖으로 항목이 표시됩니다.

Question

이 간단한 작업을 수행하고 싶습니다. div 및 ExtJS panel에 대한 다음 코드가 있습니다. DEMO

#drawing 
{ 
    position: absolute; 
    border: solid 2px green; 
    width: 100%; 
    height: 300 
} 

과 전망을 만든 후, 모든 것이 렌더링

var contentPanel = Ext.create('Ext.panel.Panel', 
{ 
    title: '', 
    region: 'center', 
    margins: '2 0 0 0', 
    border: false, 
    autoScroll: true, 
    contentEl: 'drawing', 
}); 

, 나는 몇 가지를 기반으로 사업부의 높이의 크기를 조정하도록되어 일부 JS 함수를 호출하고 조건.

if (yCoord > contentPanel.getHeight() - 200) 
{ 
    document.getElementById('drawing').setAttribute("style", "height:"+ (2*yCoord) + "px"); 
} 

단순 오른쪽 :

나는 프로그램 내에서 증가됩니다 yCoord 변수가하고 contentPanel의 높이에 도달하면, 내가 확장하려는 다음과 같은 코드를 DIV의 높이입니다 ?

그러나 이것은 내가 가지고있는 문제입니다 ...
높이가 설정되면 패널에 세로 스크롤 막대가 확장되어 "작업 영역이 확장되었습니다"라는 것을 알 수 있습니다. 그러나 네 번째 시간을 클릭하면 rect가 작업 영역 밖으로 나갑니다. 왜?

Answer 1

당신은 라파엘의 캔버스 크기를 조정하는 것을 잊었다 :

p.setSize('100%', 2*yCoord+contentPanel.getHeight());