Scrolling and resizing with ExtJs

Question

I have a problem with ExtJs sizes and scrolling. Here is a simple example: https://fiddle.sencha.com/#fiddle/ucd

Ext.onReady(function() {
    var win = new Ext.Window({
        id: 'win',
        layout: 'fit',
        closable: true,
        bodyPadding: 5,
        renderTo: Ext.getBody(),
        items: {
            xtype: "form",
            defaultAnchor: "100%",
            items: [{
                xtype: "panel",
                layout: "fit",
                overflowY: "scroll",
                //overflowY: "auto",	
                layout: 'hbox',
                items: [{
                    xtype: "fieldset",
                    margin: 5,
                    padding: 5,
                    labelWidth: 140,
                    defaultAnchor: "100%",
                    collapsible: true,
                    title: "groupbox",
                    items: [{
                        itemId: "SNAME",
                        xtype: "textfield",
                        margin: 5,
                        fieldLabel: "Name:",
                    }],
                }],
            }]
        }
    });
    
    win.show();
});

Problem:

It's a side issue. I don't understand, why overflowY: 'auto' won't work. It works in my local project, and in this Fiddle scrolling behaves as hidden. May I be need to call doLayout() or something on resize event. So I did overflow: "scroll".
You can see that ExtJs doesn't leave place for the scrollbar and it cover the fieldset. Why? How resolve this?
In my local project overflow: 'auto' works. And scrollbars always appears, because innerct panel div have same size as body div panel. So scrolling behaves as on set overflow: 'scroll'. And fieldset right border is hidden by scroll.

Tarabass Tarabass · Accepted Answer · 2015-09-23T18:26:33

You are way overnesting. You are putting a container in a container in a container and all with there own layout calculations. Besides that your dom (which is always expensive to render) is way to big, the layout manager of ExtJs is way to busy and I can't tell what is going wrong because all of this.

Take a look at this code. It has exactly the same result, is much cleaner and your dom is much smaller.

Ext.onReady(function() {
    new Ext.form.Panel({
        id: 'form',
        closable: true,
        floating: true,
        bodyPadding: 10,
        width: 500,
        items: [{
            xtype: "fieldset",
            padding: 5,
            labelWidth: 140,
            layout: 'anchor',
            defaults: {
                xtype: "textfield",
                anchor: '100%',
                margin: 5
            },
            collapsible: true,
            title: "groupbox",
            items: [{
                name: "SNAME",
                fieldLabel: "Name:"
            }]
        }],
        renderTo: Ext.getBody()
    });
});

Scrolling and resizing with ExtJs

1 Answers