0

In the simple example of a Panel within a ViewPort, the panel will not have scrollbars for the text overflow because the default for autoScroll is false for a panel.

Here is a working example: http://jsfiddle.net/rqZ4y/ (Thanks to CD..)

Here is a slightly more involved example, featuring a GridPanel (which has autoScroll defaulting to true, so it does not need to be set explicitly!)

Ext.application({
    launch: function () {
        Ext.create("Ext.Viewport", {
//            layout: "fit",
            items: [
                {
                    html: "Hello!"
                },
                {
                    xtype: "grid",
                    title: 'Simpsons Contacts',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [
                        { text: 'Name', dataIndex: 'name' },
                        { text: 'Email', dataIndex: 'email', flex: 1 },
                        { text: 'Phone', dataIndex: 'phone' }
                    ]
                }
            ]
        });
    }
});

Working example: http://jsfiddle.net/gXsPk/

In this case, the grid does not have scrollbars.

I have disabled layout: "fit" in order to get both the panels to show. If I specify layout: "fit" then that causes the "Hello!" panel to take up all of the available space, and the grid is not visible at all.

If I remove the "Hello!" panel, and re-introduce the layout: "fit" option, then I get a grid with scrollbars!

Working example: http://jsfiddle.net/VBAyS/

What am I doing wrong here?!

I'm using Ext JS 4.1.1a

Daniel Fortunov
  • 43,309
  • 26
  • 81
  • 106

1 Answers1

1

The default for autoScroll is false.

Set autoScroll: true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary.

Working example: http://jsfiddle.net/rqZ4y/

EDIT:

Using vbox layout should solve your issue.

I changed the layout to:

layout: { type: 'vbox', align: 'stretch' }

Next, I've added flex: 1 to the grid.

Working example: http://jsfiddle.net/gXsPk/1/

CD..
  • 72,281
  • 25
  • 154
  • 163
  • Okay, in tihs basic example the problem is that autoScroll defaults to false on the Panel. Updated question to more closely resemble my actual problem, which involves a GridPanel, which has autoScroll true by default. – Daniel Fortunov Mar 13 '13 at 09:49