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

Answer 1

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