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 · Accepted Answer · 2015-09-23 18:26:33Z

1

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()
    });
});

answered Sep 23, 2015 at 18:26

Tarabass

3,1462 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4624043 Over a year ago

Unfortunately, my task to implement the input structure, I do not have to do with its development and I can not throw items deems unnecessary.

Collectives™ on Stack Overflow

Scrolling and resizing with ExtJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related