Ext version tested:
  • Ext 3.3.0

Adapter used:
  • ext

css used:
  • only default ext-all.css

Browser versions tested against:
  • IE 7
  • FF 3.6
  • Chrome 7

Operating System:
  • Ubuntu 10.04
  • WinXP Pro

Description:

The most obvious visual cue is that the vertical scrollbar disappears off the bottom of the ListView (see screenshot below). However, it isn't just a scrolling problem, the bottommost item will also be inaccessible. The problem occurs when a ListView is placed inside a Window. If the Store loads data while the Window is midway through an animated show() the ListView will have its size recalculated to be about 22 pixels too tall.

Test Case:

Code:
<html>
<head>
    <title>Window/ListView Example</title>

    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />

    <script type="text/javascript" src="ext-base-3.3.0.js"></script>
    <script type="text/javascript" src="ext-all-3.3.0.js"></script>
 
    <script type="text/javascript">
        Ext.onReady(function() {
            new Ext.Viewport({
                items: [{
                    text: 'Swoosh',
                    xtype: 'button',
                    handler: function(button) {
                        var store = new Ext.data.ArrayStore({fields: ['letter']});

                        // Doing the store.loadData() on this line instead works fine
                        //store.loadData(Ext.zip('abcdefghijklmnopqrstuvwxyz'.split('')));

                        new Ext.Window({
                            height: 200,
                            layout: 'fit',
                            title: 'Letters',
                            width: 200,
                            items: new Ext.list.ListView({
                                columns: [{dataIndex: 'letter', header: 'Letter'}],
                                store: store
                            })
                        }).show(button.getEl());

                        // Simulate an AJAX callback... could defer for 100ms for extra realism but it makes no difference
                        store.loadData(Ext.zip('abcdefghijklmnopqrstuvwxyz'.split('')));
                    }
                }]
            });
        });
    </script>
</head>
<body>

</body>
</html>
Screenshot:

ListView.png

Debugging already done:

The problem occurs at the end of ListView's onRender() method on this line:

Code:
parentNode.style.height = Math.max(0, h - header.parentNode.offsetHeight) + 'px';
The header's offsetHeight should be about 22 but it actually comes back as 0. This is because while the Window is performing an animated show() it has its display style set to none. In the method animShow() there is the line:

Code:
this.el.setStyle('display', 'none');
However, it isn't obvious to me why this line is needed. animShow() is only called for newly rendered or hidden windows, neither of which should need any extra hiding via a display style.

Possible fix:

Removing the line mentioned above from animShow(), along with the corresponding line in afterShow(). This would avoid problems for any components that want to use offsetHeight, not just ListView.