PDA

View Full Version : [CLOSED] List becomes unusable when scrolled to bottom and short data replaced with long data



Floatopian
11 Sep 2011, 5:20 PM
When the data items of a list are reset, the view can become unusable. This happens when the user has scrolled to the bottom of a list and the list is reset to be much smaller than it was previously.

To reproduce, use the following code with Sencha 1.1.0 on iOS or Chrome or Safari. Scroll to the bottom of the screen with your mouse or finger. Then, using the javascript console, enter `fill(10);' and watch the list view fail.

I could probably offer a patch, but this is probably a cinch to fix for somebody who understands Sencha's object soup a little better than I

Code:

Ext.regModel('Item', {
fields: ['content']
});

ListDemo = new Ext.Application({
name: "ListDemo",

launch: function() {

ListDemo.listPanel = new Ext.List({
id: 'indexlist',
store: ListDemo.ListStore,
itemTpl: ('{content}')
});

ListDemo.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'fit',
items:
[ListDemo.listPanel]
});
}
});


ListDemo.ListStore = new Ext.data.Store(
{
model: 'Item',
data: []
});

function setInstructionsItems(items) {
// Clear the current items.
//ListDemo.ListStore.getProxy().clear();

// Set the new items.
ListDemo.ListStore.loadData(items, false);

// To deal with a bug in Sencha, scroll to the top of the list.
//ListDemo.listPanel.scroller.scrollTo( {x:0, y:0} )

return null; // ListDemo.ListStore.data.items.map(function(c) { return "Needs add: " + c.needsAdd + " / html: " + c.data.html_instructions; }).join('\n');
}

function artificialItems(n) {
var result = [];
for (var i=0; i < n; i++) {
result.push({ 'content' : 'Some random content, # ' + i });
}
return result;
}

function fill(n) {
setInstructionsItems(artificialItems(n));
}

// To reproduce bug, scroll to the bottom of the screen and call fill(10).
// You will not be able to scroll at all.

fill(100);

The index.html file for the above file, which is called 'failure.js':


<!DOCTYPE html>
<html>
<head>
<title>The Sencha Touch List View</title>
<link rel="stylesheet" href="sencha/1.1.0/sencha-touch.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="sencha/1.1.0/apple.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen"/>

<script src="sencha/1.1.0/sencha-touch.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/failure.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
</body>
</html>

Floatopian
13 Sep 2011, 1:00 PM
This is a reproducible bug. Should it be filed away as such before the thread goes to rot on the forum?

Floatopian
25 Sep 2011, 4:50 AM
bump

mitchellsimoens
26 Sep 2011, 4:59 AM
Do this once the Store has been loaded.


list.scroller.scrollTo({ y : 0 }, true);

the true is the boolean for animate (false for no scroll animation).

hrishikeshp19
5 Dec 2011, 5:00 PM
There is no property like scroller to the list. Please help.