can't click on list item after viewing list

[michael.parrott]

Okay, so I'm having a bit of a problem here. I've got a bunch of views defined using Ext.define. I've got a top level navigation view, inside of which is a tab panel. The main panel is a container which plays host to a list of products which you click through to get to a page. The first item in the list goes to another page where there is another container which also contains a list in it. Now, when I first click through to this page (let's say subpage), I can click through all the links in this list, which go to their own respective subsubpages, and this is just fine. But, once I leave this subpage of products, head back there, I can no longer click on these sub page links.

The simplest case I can find is:
-click on home page link to 'subpage'
-click back on navigation view
-click back to 'subpage'
-Can no longer click through these 'subpage' links in the list.

The part I find weird is I can do it if I go there the first time, it's fine, but the next time, even if I didn't click on any of the links the first time, it doesn't work. Any ideas?

[jerome76]

Are any errors showing up on the debugger? I know in the past i'd get wierd DOM errors when using lists and destroying/recreating views.

[michael.parrott]

Nope, looked through the console in Chrome Developer Tools and saw no errors come up.

[jerome76]

Any demo you can create or using sencha fiddle so I can try it out?

[michael.parrott]

app.js

Ext.application({
    name: 'TestCase',


    requires: [
        'Ext.MessageBox', 'Ext.tab.Panel', 'Ext.dataview.List', 'Ext.data.Store'
    ],


    views: ['Main', 'Top', 'Sub', 'SubSub' ],
    controllers: [ 'MainController' ],


    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },


    isIconPrecomposed: true,


    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },


    launch: function() {


        // Initialize the main view
        Ext.Viewport.add(Ext.create('TestCase.view.Main'));
    },


    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

Main.js

Ext.define("TestCase.view.Main", {
    extend: 'Ext.navigation.View',
    requires: [ 'Ext.tab.Panel' ],


    config:
    {
        items:
        [
        {
            xtype: 'tabpanel',
            title: 'TestCase',
            tabBarPosition: 'bottom',


            items:
            [
                {
                    title: 'Welcome',
                    iconCls: 'home',
                    xtype: 'topview'
                }
            ]
        }
        ]
    }
});

MainController.js

Ext.define( 'TestCase.controller.MainController',
{
    extend: 'Ext.app.Controller',
    
    config:
    {
        refs:
        {
            topList: '#topList',
            subList: '#subList'
        },
        control:
        {
            topList:
            {
                itemtap: 'onTap'
            },
            subList:
            {
                itemtap: 'onSubTap'
            }
        }
    },
    
    onTap: function( list, index, node, record )
    {
        list.up( 'navigationview' ).push( 
        {
            xtype: record.get( 'subXtype' ),
            record: record,
            title: record.get( 'name' )
        } );
    },
    
    onSubTap: function( list, index, node, record )
    {
        list.up( 'navigationview' ).push(
        {
            xtype: record.get( 'subsubXtype' ),
            record: record,
            title: record.get( 'name' )
        } );
    }
});

Top.js

Ext.define( 'TestCase.view.Top',
{
    extend: 'Ext.Container',
    xtype: 'topview',
    
    config:
    {
        layout: 'vbox',
        
        items:
        [
        {
            xtype: 'list',
            itemTpl: '{name}',
            id: 'topList',
            flex: 1,
            data:
            [
                {
                    name: 'hey',
                    subXtype: 'subview'
                }
            ]
        }
        ]
    }
} );

Sub.js

Ext.define( 'TestCase.view.Sub',
{
    extend: 'Ext.Container',
    xtype: 'subview',
    
    config:
    {
        layout: 'vbox',
        
        items:
        [
        {
            xtype: 'list',
            itemTpl: '{name}',
            id: 'subList',
            flex: 1,
            data:
            [
                {
                    name: "hey",
                    subsubXtype: 'subsubview'
                }
            ]
        }
        ]
    }
} );

SubSub.js

Ext.define( 'TestCase.view.SubSub',
{
    extend: 'Ext.Container',
    xtype: 'subsubview',
    
    config:
    {
        html: 'Hey'
    }
} );

index.html

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>TestCase</title>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
</head>
<body>


</body>
</html>

This accurately reproduces my problem.

[michael.parrott]

Fixed it! I found someone who had a similar issue before:
http://www.sencha.com/forum/showthread.php?181064-Ext.navigation.View-push-works-only-once

I set the autoDestroy property of the subview to false, and it started working okay. In my app, I still get a warning about creating something with the same id multiple times, but that's another topic.