2012-08-01 4 views
0

extjs에는 패널이있는 남쪽 영역이 있습니다. 문제는 남쪽 영역의 크기를 조정할 때 패널에 스크롤 막대가 없다는 것입니다.남쪽 영역의 테두리 레이아웃이있는 세로 스크롤 막대

이 그리고 난 여기에 사용하는 항목이 테스트

var southDetails = Ext.create('Ext.panel.Panel', { 
     region: 'south', 
     animCollapse: false, 
     title: 'South Region', 
     height: 300, 
     stateful: true, 
     loadMask: false, 
     collapsible: true, 
     floatable: false, 
     collapsed: true, 
     hideCollapseTool: true, 
     split: true, 
     stateId: 'stateSouthDetails', 
     items: [ test ] 
}); 

이다 남쪽 지역을합니다. 이것은 내가 거기에 스크롤바를 가져 오기를 원하기 때문입니다.

var test = Ext.create('Ext.tab.Panel', { 
      autoscroll: true, 
     height: 300, 
     stateful: true, 
      stateId: 'stateTestDetails', 
     items: [{ 
      xtype: 'panel', 
     autoscroll: true, 
      autoHeight: true, 
      title: 'Test Panel' 
     }] 
}) 

패널의 높이가 300 인 것을 확인할 수 있습니다. 하지만 난 southpanel 크기를 조정할 때 스크롤바가 없습니다.

답변

1

패널 내에서 높이, 최소 크기 및 최대 크기를 정의해야합니다 (남쪽). 이 작업 예제 (EXTJS 4.0)를 살펴보십시오. 남쪽 지역을 접 으면 남쪽 지역 내에 스크롤바가 나타납니다. 그것을 시도 :)

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Test</title> 

    <link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css"> 
    <script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script> 

</head> 
<body> 

<script type="text/javascript"> 

    var test = Ext.create('Ext.tab.Panel', { 
      title: 'Testpanel', 
      region: 'center', 
      html: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ' 
    }); 




    Ext.require(['*']); 
    Ext.onReady(function() { 
     Ext.create('Ext.Viewport', { 
      layout: { 
       type: 'border' 
      }, 
      defaults: { 
       collapsible: true, 
       split: true, 
       autoScroll: true 
      }, 
      items: [{ 
       region: 'center', 
       title: 'Center', 
       html: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.' 
      },{ 
       region: 'south', 
       title: 'South', 
       collapsible: true, 
       collapsed: false, 
       split: true, 
       height: 175, 
       minSize: 150, 
       maxSize: 300, 
       items: [test] 
      }] 
     }); 
    }); 
</script> 

관련 문제