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 に答える