NestedList animates backward in specific case

[idmadj]

REQUIRED INFORMATION




Ext version tested:

• Sencha Touch 2.0.1.1

Browser versions tested against:

• Chrome 20.0.1132.57

Description:

• When a NestedList uses a store that contains both leaf and regular nodes at its root, and that a detail card is used for leaf nodes, the animation will be reversed when displaying a sublist after coming back from a detail card that was on the first level of the NestedList.

Steps to reproduce the problem:

• Using the code sample below, start the application;
• Tap the first list entry;
• Tap the back button;
• Tap the second entry;
• Animation will pan the wrong way;
• Subsequent navigation will work properly.

The result that was expected:

• Animation on the second item tap should pan the other way.

Test Case:

var data = {
    text: 'Items',
    items: [{
        text: 'First item',
        leaf: true
    }, 
    {
        text: 'Second item',
        items: [{
            text: 'First subitem',
            leaf: true
        },
        {
            text: 'Second subitem',
            leaf: true
        }]
    }]
 };


 Ext.define('ListItem', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'text',
             type: 'string'
         }]
     }
 });


 var store = Ext.create('Ext.data.TreeStore', {
     model: 'ListItem',
     defaultRootProperty: 'items',
     root: data
 });


 var nestedList = Ext.create('Ext.NestedList', {
    fullscreen: true,
    title: 'Groceries',
    displayField: 'text',
    detailCard: {
        xtype: 'panel'
    },
    store: store
 });

HELPFUL INFORMATION


Debugging already done:

• Animation is reversed when coming back from a detail card, but isn't "un-reversed" when only one list was created.

Possible fix:

• In NestedList.goToNode(), in the else block following "if (detailCardActive)", there are three conditions checking for lists existence. Adding the "if (animation)" block from the first block in the second block, right after "me.setLastActiveList(me.getActiveItem());" fixes the issue.
• The parameter to the newly added "animation.setReverse();" can probably safely be set to "false" instead of "reverse"

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7

[mitchellsimoens]

Thanks for the report.

[TommyMaintz]

Thanks for the report! This has been fixed for the next release.

[Max0n]

This Bug is still happening in version 2.1.0.

It looks like the animation is only reversed after both lists (firstList & secondList) have been created. If the first list points to a leaf and you navigate back (which reverses the animation) the animation is still set to reverse when navigating into a node.

Moving the if clause in NestedList.js lines 683-685:

if (animation) {
  animation.setReverse(reverse);
}

.. out of its parent if clause and in between the lines 673 and 674 like so:

else {
  if (animation) {
    animation.setReverse(reverse);
  }
if (firstList && secondList) {

.. seems to fix this issue.