PDA

View Full Version : PENDING: group headers in store bug after loadData is called



rekam
10 Jun 2011, 1:47 AM
Sencha Touch version tested:

1.1.0

only default sencha-touch.css (not debug)
only default sencha-touch-debug.js




Platform tested against:

only chromium browser, 11.0.696.71 (86024) Ubuntu 10.10


Description:

When you group datas in a list, it creates headers and when you scroll down, the current header is always visible on top of the list.
Now if you hide the list, call store.loadData() to load new datas, and show the list again, headers are wrong
In fact, the exact time you begin to scroll down, it's the last header that shows on top of the list
Cases like this happen with card layout. You select something on card 1, load datas in card 2 and show card 2. Then you hit "back button" to card 1, click somewhere else, and so reload datas in card 2 before showing it again... and boum, the bug...


Test Case:



<html>
<head>
<title>Bug</title>
<link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css" />
<script type="text/javascript" src="sencha-touch-debug.js"></script>
<script type="text/javascript">

Ext.setup({
onReady : function() {
var datas = [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
];

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model : 'Contact',
data : datas,
getGroupString: function(record) {
return record.get('lastName')[0];
}
});

var list = new Ext.List({
fullscreen : true,
grouped : true,
store : store,
itemTpl : '{firstName} {lastName}'
});
// show the list the 1st time, all is ok
list.show();

window.setTimeout(function(){
alert('list hidden and loadData called. Try to scroll...')
// after 2 seconds, hide the list, change data and show again
list.hide();
store.loadData(datas);
// now group is broken
list.show();
}, 2000);
}
});
</script>
</head>
<body>
</body>
</html>



Steps to reproduce the problem:

create a simple grouped list with long set of data, so you can scroll down
show the list
hide the list
call store.loadData() with a set of data (can be the same set as during creation)
show the list
try to go up'n down, the group headers are wrong. It's always the last one that is displayed on top


The result that was expected:

after the list shows the second time, group headers should follow the basic logic


The result that occurs instead:

when scrolling down, even one pixel, it's the last header that shows on top of the list

rekam
15 Jun 2011, 6:44 AM
To bypass this unfonctionnality, I'm doing the following:



// initComponent of the Panel which contains the list
initComponent: function() {
this.on({
activate: {scope: this, fn: function(){
this.getComponent(0).updateOffsets();
}}
});
},

rekam
20 Jun 2011, 12:58 AM
Somehow related:
http://www.sencha.com/forum/showthread.php?117632-OPEN-626-1.0.1-Grouped-Ext.List-Issue-When-Adding-Items-When-List-Not-Visible&highlight=group+list