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

我有一个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) || ''
        }]
    }
})

---

您可以尝试以下方法，它可以工作：

Ext.create（'Ext.window.window'{
标题：“数据集”，
车身衬垫：5，
莫代尔：是的，
身高：600，
宽度：900，
布局：“适合”，
项目：{
xtype:'表单'，
项目：[{
xtype:'容器'，
html:jsonData.R.ErrorMsg | |“
}, {
xtype:“字段集”，
填充：“5 0 10 0”，
可折叠的：是的，
标题：“说明”，
身高：580，
宽度：880，
对,，
溢出：“滚动”，
html:Ext.String.htmlEncode（jsonData.R.ErrorDesc）| |“”
}]
}
})

字段集不是一个表单元素（显示html），而是一个用于对字段集进行分组的容器

使用子项文本区域创建字段集或文本字段

Ext.create（'Ext.window.window'{
标题：“数据集”，
车身衬垫：5，
莫代尔：是的，
身高：600，
宽度：900，
布局：“适合”，
项目：{
xtype:'表单'，
项目：[{
xtype:'容器'，
html:jsonData.R.ErrorMsg | |“
}, {
xtype:“字段集”，
对,，
溢出：“滚动”，
项目：[
{
xtype:'textfield'，
填充：“5 0 10 0”，
可折叠的：是的，
标题：“说明”，
身高：580，
宽度：880，
itemId:'errorDesc'，
名称：'errorDesc'，
fieldLabel:“错误描述”，
值：Ext.String.htmlEncode（jsonData.R.ErrorDesc）| |“”
}
}]
}
})

父容器（即“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'
    }]
}]});

Ext.create（'Ext.form.Panel'{
标题：“带有字段集的简单表单”，
labelWidth:75，//除非重写，否则此处的标签设置将级联
url:“save form.php”，
框架：对，
车身样式：“衬垫：5px 5px 0”，
宽度：550，
renderTo:Ext.getBody（），
布局：'列'，//并排排列字段集
项目：[{
//第1列中的字段集-可通过切换按钮折叠
xtype:“字段集”，
列宽：0.5，
标题：“字段集1”，
可折叠的：是的，
defaultType:'textfield'，
默认值：{anchor:'100%}，
布局：“锚定”，
项目：[{
xtype:“容器”，
html:Ext.String.htmlEncode（“你好”）
}, {
字段标签：“字段2”，
名称：'field2'
}]
}]});

---

此处未指定高度，父容器的高度将基于其所包含的项目。

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

• 在表单中使用

  vbox

  布局
• 将字段集中的固定

  高度：580

  和

  宽度：880

  替换为

  flex:1

---

这是一个正在工作的提琴：

是的，我删除了autoScroll:true，垂直条出现了，但没有显示完整的数据。容器的高度为580。制作提琴：使用示例数据。