ExtJS 垂直滚动条不适合长 json 数据

Question

我有一个 Ext 窗口，其中有两个项目容器和字段集。对于容器和字段集，我从服务器获取 html 形式的数据。

如果这个数据很大，滚动条出现并不能完全导航文本。

如何在此面板中正确配置垂直滚动条？

我的示例代码是：

Ext.create('Ext.window.Window', {
    title: 'DataSet',
    bodyPadding: 5,
    modal: true,
    height: 600,
    width: 900,
    layout: 'fit',
    items: {
        xtype: 'form',
        items: [{
            xtype: 'container',
            html: jsonData.R.ErrorMsg || ''
        }, {
            xtype: 'fieldset',
            padding: '5 0 10 0',
            collapsible: true,
            title: 'Description',
            autoScroll: true,
            height: 580,
            width: 880,
            collapsed: true,
            overflowY: 'scroll',
            html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
        }]
    }
})

Answer 1

问题是您为字段集设置了固定的宽度和高度。如果您希望仅在内容超过窗口大小时才有滚动条，您首先需要将 fieldset 大小设置为 flex。

• 在表单中使用vbox布局
• 在字段集中将固定的height: 580 和width: 880 替换为flex: 1

这是一个有效的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/30f9

Answer 2

Fieldset 不是作为表单元素（显示html），它是分组 sets字段的容器.

使用子项文本区域或文本字段

创建字段集

Ext.create('Ext.window.Window', {
    title: 'DataSet',
    bodyPadding: 5,
    modal: true,
    height: 600,
    width: 900,
    layout: 'fit',
    items: {
        xtype: 'form',
        items: [{
            xtype: 'container',
            html: jsonData.R.ErrorMsg || ''
        }, {
            xtype: 'fieldset',
            
            collapsed: true,
            overflowY: 'scroll',
            items: [
            {

                xtype: 'textfield',
                padding: '5 0 10 0',
                collapsible: true,
                title: 'Description',
                height: 580,
                width: 880,
                itemId: 'errorDesc',
                name: 'errorDesc',
                fieldLabel: 'Error Desc',
                value: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
            }
        }]
    }
})

Answer 3

父容器（即“Ext.window.Window”）的高度固定为 600。您可以尝试将其设置为“100%”以增加其高度。

Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
    // Fieldset in Column 1 - collapsible via toggle button
    xtype:'fieldset',
    columnWidth: 0.5,
    title: 'Fieldset 1',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {anchor: '100%'},
    layout: 'anchor',
    items :[{
        xtype:'container',
        html: Ext.String.htmlEncode("<input type=\"text\"> Hello </input>")
    }, {
        fieldLabel: 'Field 2',
        name: 'field2'
    }]
}]});

这里没有指定高度，父容器的高度将基于它所容纳的项目。

Answer 4

你可以试试这个效果：

Ext.create('Ext.window.Window', {
    title: 'DataSet',
    bodyPadding: 5,
    modal: true,
    height: 600,
    width: 900,
    layout: 'fit',
    items: {
        xtype: 'form',
        items: [{
            xtype: 'container',
            html: jsonData.R.ErrorMsg || ''
        }, {
            xtype: 'fieldset',
            padding: '5 0 10 0',
            collapsible: true,
            title: 'Description',
            height: 580,
            width: 880,
            collapsed: true,
            overflowY: 'scroll',
            html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
        }]
    }
})