Question

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

Answer 1

您必须在面板（南）中定义height，minsize和maxsize。看看这个工作示例（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>

垂直滚动条，南部地区的边框布局

1 个答案: