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.
Unanswered: Scroll problem in list with grouping after data change
Reply With Quote
