Scrollbars missing from grid, data missing from buffered grid, layout doesn't resize

Question

Source to reproduce and a description of the problem can be found at github: https://github.com/romacafe/extjs_4.1.1_scrollIssue

I'm trying to create an extjs 4.1.1 (GPL version) application with 2 'infinite grids' in a tab panel, nested within a border layout.

I can render non-buffered (non-infinite) grids OK, but there is no scrollbar.
When I configure the grid and store for infinite scrolling (buffered store, verticalScroller config on grid), then it doesn't render any data at all.
Overall, the whole layout doesn't resize when I resize the window.

The application is rendered to a div, not the document body. This is important to me, but may be contributing to the issue. I've reproduced the issue completely in the referenced github repository.

Any help would be very much appreciated! :)

Stephen Tremaine Stephen Tremaine · Accepted Answer · 2012-11-07T15:50:10

I think your problem lies in failing to specify layouts for parent containers which is allowing the body of your tab panel to extend indefinitely. This prevents the grid from getting a defined height/width from the layout and results in a zero height grid in the buffered grid, and a grid that expands it's height to include all the records for the static one. Here's what worked for me in the center panel definition in app.js:

//Store a reference to the main element that you create and add the to application div
ScrollIssue.element = Ext.create('Ext.container.Container', {
    renderTo: 'application',
    height: windowHeight,
    layout: 'border',
    bodyBorder: true,
    defaults: {
        bodyPadding: 5
    },
    items: [
        {
            title: 'Filters',
            region:'north',
            floatable: false,
            margins: '5 0 0 0',
            height: 150,
            minHeight: 150,
            maxHeight: 150,
            collapsible: true,
            collapsed: true,
            html: 'filters would go here'
        },
        {
            title: 'Main Content',
            region: 'center',
            margins: '5 0 0 0',
            //Add a layout here
            layout: 'fit',
            items: [
                Ext.widget(
                    'tabpanel', {
                        activeTab: 0,
                        plain: true,
                        //Add a layout here
                        layout: 'fit',
                        //Change this to regular padding
                        defaults: {padding: 10},
                        items: [
                            {
                                title: "Static",
                                xtype: 'staticGrid'
                            },
                            {
                                title: "Buffered",
                                xtype: "bufferedGrid"
                            }
                        ]
                    }
                )
            ]
        },
        {
            title: 'Detail',
            region: 'south',
            height: 150,
            minHeight: 100,
            maxHeight: 250,
            html: 'Detail Panels',
            collapsible: true
        }
    ]
});

//Listen to the window resize event and reset the height to
// 50 pixels less than the total viewport height to account
// for the banner above
Ext.EventManager.onWindowResize(function(w, h) {
    ScrollIssue.element.setHeight(h - 50);
})

Note the additions of "layout: fit" to both the Main Content and tab panels as well as the change from bodyPadding to regular padding (body style causes a horizontal scroll bar to appear).

EDIT To get window resizing to work, you need to tell the top level ext component about changes in window height. Since the banner at the top isn't anywhere inside your code, it can't know the size of other elements on the screen or how you want the layout manager to interact with them. In addition, when you set the height to a static value like you have here, it won't attempt to change as it's container changes. If you explicitly reset the height when the window is resized though, it works out fine.

Scrollbars missing from grid, data missing from buffered grid, layout doesn't resize

1 Answers