Ext JS Panel Won't Scroll

Question

I have a popup windows which is suppose to show an email (which is in html) in the centerPanel. That panel is in the center region of the border layout.

It absolutely has autoscroll set to true and I know that my test data is much larger than the panel. But I can't get it to scroll.

Is there, perhaps, a better way of setting this up? I've tried some other object like a label, display, textarea etc. as an item in the center panel and set that object with autoscroll : true with no success

popup = new Ext.Window({
    width: 900,
    height: 320,
    resizable: true,
    draggable: true,
    id: 'popupWindow',

    layout: {
        type: 'border'
    },

    items: [
        // ...
        {
            xtype: 'panel',
            region: 'center',
            id: 'centerPanel',
            autoscroll: true,
            margin: '0 5 0 5',
            html: jsonData.email
        },
        // ...
    ]
});

score 1 · Answer 1 · answered Jul 17 '15 at 07:20

1

It should be autoScroll, not autoscroll.

answered Jul 17 '15 at 07:20

Thevs

3,189
2
20
32

score 0 · Accepted Answer · answered Jul 15 '15 at 18:42

0

Got it!

I had to add overflowY: 'scroll' to the center panel.

answered Jul 15 '15 at 18:42

user3669653

354
1
8
15

I this case you should mark your own answer as solution to show other users that your question has already been solved. – Sebastian Jul 21 '15 at 13:41

Thomas · Answer 3 · 2015-07-21T13:23:01.933

Thev's answer is correct; however, it depends upon which version of Ext JS you are using (read below).

autoscroll means nothing to Ext JS, specifically. It becomes a new Javascript property entirely distinct from autoScroll due to the casing.

Watch out, though: Ext's 5.1 Documentation specifies that autoScroll is now deprecated and that scrollable (with the appropriate configuration) should be used, instead.

Ext JS Panel Won't Scroll

3 Answers3