ExtJS Vertical Scroll Bar is not fitting for long json data

Question

I have a Ext window in that having two items container and fieldset. For container and fieldset I am geting data in form of html from server.

If this data is big, scrollbar appears not navigate the text completly.

How can I configure a vertical scrollbar properly in this panel ?

My sample code is :

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) || ''
        }]
    }
})

Make a fiddle: https://fiddle.sencha.com/ with the sample data. — Evan Trimboli, May 24 '16 at 12:24

score 1 · Answer 1 · answered Oct 23 '19 at 21:23

The problem is that you are setting fixed width and height to the fieldset. If you want to have the scrollbar only when the content exceed the window size you first need to set the fieldset size as flex.

Use vbox layout in form
Replace fixed height: 580 and width: 880 with flex: 1 in fieldset

Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/30f9

score 0 · Answer 2 · edited Aug 01 '19 at 12:36

You can try this it works:

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) || ''
        }]
    }
})

Yes I removed autoScroll: true, Vertical bar is coming but It not appearing for complete data. It getting Stuck at height 580 for container. — UDID, Apr 07 '16 at 07:51

score 0 · Answer 3 · answered Oct 31 '17 at 23:12

Fieldset is not meant to be a form element(displaying html), It is meant to be a container for grouping sets of fields.

Creating a fieldset with child item text area or text field

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) || ''
            }
        }]
    }
})

score 0 · Answer 4 · answered Aug 15 '18 at 06:48

The height of the parent container i.e "Ext.window.Window" is fixed at 600. You can try giving it at '100%' increasing its height.

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'
    }]
}]});

Here height is not specified and parent container's height will be based on the items it holds.

ExtJS Vertical Scroll Bar is not fitting for long json data

4 Answers4