2012-08-01 84 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。但是当我调整南面板时没有滚动条。

回答

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>