There seems to be an issue with the scrolling in a list with active grouping after data from the data store is changed.

The first time the list is rendered everything works fine, but after I change the data in the list's store , the scrolling does not work no more and has a strange behavior. The scroll bar seems to scroll but the content is not moving.

In sencha touch script file this uncaught error pops up:
class: Ext.dataview.List
function: translateHeaderTransform: function (offset)
error: Uncaught TypeError: Cannot read property 'style' of undefined

Here is a simple code example that reproduces the bug:

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="sencha-touch-all-debug-w-comments.js"></script>
    <link href="resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        Ext.application({
            name: 'app',
            launch: function () {
                var self = this;




                //create viewport
                this.viewport = Ext.create('Ext.Panel', {
                    fullscreen: true,
                    layout: { type: 'card' }
                });


                //define data model
                Ext.define("demoModel", { extend: "Ext.data.Model", fields: ["value"] });


                //define store
                this.store = Ext.create('Ext.data.Store', {
                    model: 'demoModel'
                });


                //create sample data
                var data = [];
                for (var i = 100; i < 200; i++) {
                    data.push({ value: i });
                }


                //load data into store
                this.store.loadData(data, false);


                //Setup grouping
                this.store.getGroupString = function (record) {
                    return record.data.value.toString().substring(0, 2)
                }


                //create list
                this.list = Ext.create('Ext.List', {
                    store: this.store,
                    scrollable: 'vertical',
                    grouped: true,
                    itemTpl: '<div>{value}</div>'
                });


                //create top toolbar
                this.topToolbar = Ext.create('Ext.Toolbar', {
                    docked: 'top',
                    items: [
                    {
                        xtype: 'button',
                        text: 'change data',
                        handler: function () {


                            //create sample data
                            var data = [];
                            for (var i = 200; i < 300; i++) {
                                data.push({ value: i });
                            }
                            //load data into store
                            self.store.loadData(data, false);
                        }
                    }]
                });


                this.viewport.add(this.list);
                this.viewport.add(this.topToolbar);
                this.viewport.show();
            }
        });


    </script>
</head>
<body>
</body>
</html>
The problem reproduces on Google Chrome, Android tablet and IPhone.