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 高。但是当我调整南面板的大小时没有滚动条。

4

1 回答 1

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>

于 2012-08-02T14:59:16.807 回答