Results 1 to 8 of 8

Thread: Problems filtering list/store after scrolling to bottom

    You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    12
    Vote Rating
    0
      0  

    Default Problems filtering list/store after scrolling to bottom

    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:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    12
    Vote Rating
    0
      0  

    Default

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

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    2
    Vote Rating
    1
      0  

    Default

    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.
    Code:
    list.scroller.scrollTo({
        x: 0,
        y: 0
    });

  4. #4
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    242
    Vote Rating
    3
      0  

    Default

    I am using.

    Code:
    //After filtering
    Ext.getCmp('TheBuggyList').doComponentLayout();
    Seems to fix it ok.
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  5. #5
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    24
      0  

    Default

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

    Code:
    <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.

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
      0  

    Default AARRGH

    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:

    Code:
    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?

  7. #7
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    24
      1  

    Default

    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.

  8. #8
    Sencha User
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
      0  

    Default

    This also seems to work, although both of solutions only seem to work when the list is visible:
    Code:
    Ext.getCmp("buggyList").scroller.updateBoundary();

Similar Threads

  1. Problems scrolling through list
    By Togle in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 4 May 2011, 1:31 AM
  2. Filtering a Combo's store, but the list won't update
    By ZachG in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 26 Jun 2010, 5:30 AM
  3. Bottom tab scrolling in yet?
    By Sesshomurai in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 28 Oct 2008, 10:02 AM
  4. Problems with store / combobox filtering
    By TheBuzzer in forum Community Discussion
    Replies: 0
    Last Post: 17 Oct 2008, 2:32 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •