2012-08-01 42 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>