Problems filtering list/store after scrolling to bottom

[tucolino]

Sencha Touch version tested:

1.1.0


Platform tested against:

iOS 4
Safari 5.0.2 (6533.18.5) Mac OS 10.6.5


Description:

Applying a filter after scrolling list to bottom hides all items.


Test Case:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {

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

var groupingBase = {
itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
selModel: {
mode: 'SINGLE',
allowDeselect: true
},
indexBar: false,

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{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: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{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: '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: '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: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{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: '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: '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: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{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: '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: '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: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{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: '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: 'Zed', lastName: 'Zacharias'}
]
})
};

var tapHandler = function (btn, evt) {
groupingBase.store.filter('firstName', 'Jay');
}

var buttonsSpecTop = [
{ ui: 'normal', text: 'filter' }
];

var dockedItems = [{
xtype: 'toolbar',
title: 'scroll to the bottom and press "filter"',
ui: 'dark',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
}];

new Ext.Panel({
fullscreen: true,
dockedItems: dockedItems,
items: [new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}))]
}).show();
}
});



Steps to reproduce the problem:

Load sample source
Scroll list all the way down
Click "filter" button to apply filter


The result that was expected:

List is filtered to show fewer items


The result that occurs instead:

List is now blank

[tucolino]

is this indeed a bug or perhaps something wrong with the example?

[akoimeexx]

I experience the same issue. It seems as though the list does not scroll back to the new 'bottom' entry after applying a filter. Does anyone know if there's a quick way to fix this, or force it to scroll back to the top?

Edit: After a quick google search (Sencha Touch scroll list back to top), I ran across this link for a quick solution (http://www.sencha.com/forum/showthread.php?110053-Reset-list-scroll-position-to-top).



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

[SimonFlack]

I am using.



//After filtering
Ext.getCmp('TheBuggyList').doComponentLayout();

Seems to fix it ok.

[jep]

This is indeed a bug, but I'm afraid calling doComponentLayout doesn't fix it for me. Here's an example:



<html>
<head>
<title>test</title>

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

<script type="text/javascript">

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

var list = new Ext.List({
id:'foo',
height:300,
width:300,
itemTpl:'<div class="contact">{firstName} {lastName}</div>',
singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',
data: [
{firstName:'George', lastName:'Washington'},
{firstName:'John', lastName:'Adams'},
{firstName:'Thomas', lastName:'Jefferson'},
{firstName:'James', lastName:'Madison'},
{firstName:'James', lastName:'Monroe'},
{firstName:'John Quincy', lastName:'Adams'},
{firstName:'Andrew', lastName:'Jackson'},
{firstName:'Martin Van', lastName:'Buren'},
{firstName:'William Henry', lastName:'Harrison'},
{firstName:'John', lastName:'Tyler'},
{firstName:'James Knox', lastName:'Polk'},
{firstName:'Zachary', lastName:'Taylor'},
{firstName:'Millard', lastName:'Fillmore'},
{firstName:'Franklin', lastName:'Pierce'},
{firstName:'James', lastName:'Buchanan'},
{firstName:'Abraham', lastName:'Lincoln'},
{firstName:'Andrew', lastName:'Johnson'},
{firstName:'Ulysses Simpson', lastName:'Grant'},
{firstName:'Rutherford Birchard', lastName:'Hayes'},
{firstName:'James Abram', lastName:'Garfield'},
{firstName:'Chester Alan', lastName:'Arthur'},
{firstName:'Grover', lastName:'Cleveland'},
{firstName:'Benjamin', lastName:'Harrison'},
{firstName:'Grover', lastName:'Cleveland'},
{firstName:'William', lastName:'McKinley'},
{firstName:'Theodore', lastName:'Roosevelt'},
{firstName:'William Howard', lastName:'Taft'},
{firstName:'Woodrow', lastName:'Wilson'},
{firstName:'Warren Gamaliel', lastName:'Harding'},
{firstName:'Calvin', lastName:'Coolidge'},
{firstName:'Herbert Clark', lastName:'Hoover'},
{firstName:'Franklin Delano', lastName:'Roosevelt'},
{firstName:'Harry S.', lastName:'Truman'},
{firstName:'Dwight David', lastName:'Eisenhower'},
{firstName:'John Fitzgerald', lastName:'Kennedy'},
{firstName:'Lyndon Baines', lastName:'Johnson'},
{firstName:'Richard Milhous', lastName:'Nixon'},
{firstName:'Gerald Rudolph', lastName:'Ford'},
{firstName:'James Earl', lastName:'Carter'},
{firstName:'Ronald Wilson', lastName:'Reagan'},
{firstName:'George Herbert Walker', lastName:'Bush'},
{firstName:'William Jefferson', lastName:'Clinton'},
{firstName:'George Walker', lastName:'Bush'},
{firstName:'Barack Hussein', lastName:'Obama'}
]
})
});

var mainPnl = new Ext.Panel({
fullscreen:true,
layout:
{
type: 'vbox',
align: 'center',
pack: 'center'
},
items:list,
dockedItems:{
xtype:'toolbar', dock:'top',
items:{
xtype:'segmentedbutton',
items: [
{text: 'All', pressed:true},
{text: 'Georges'}
],
listeners:{
toggle:
function(sender, button, pressed) {
if (pressed)
if (button.text == 'All')
list.getStore().clearFilter();
else
list.getStore().filter('firstName', 'George');

list.doComponentLayout();
}
}
}
}
});
}
});

</script>

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


Scroll all the way to the bottom, then click the Georges button. I get a totally blank list with no scroller.

[RichardDavies]

I spent all day yesterday trying to figure out why my list disappeared after filtering. I guess I should have searched forum first! Anyway, the following seems to fix the scroll issue for me:


Ext.getCmp("buggyList").setScrollable('vertical');

BTW, I'm surprised this bug hasn't been fixed yet... I keep finding bugs that have been reported on the forums months ago yet haven't been fixed yet. Isn't anyone working on this project anymore?

[jep]

Unfortunately, there are a lot of bugs in Sencha Touch, but they don't seem to have a very cohesive approach to cataloging and handling them. Or if they do, someone is falling down on the job.

[RichardDavies]

This also seems to work, although both of solutions only seem to work when the list is visible:

Ext.getCmp("buggyList").scroller.updateBoundary();