1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    52
    Answers
    4
    Vote Rating
    2
    michael.parrott is on a distinguished road

      0  

    Default Answered: can't click on list item after viewing list

    Answered: can't click on list item after viewing list


    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?

  2. 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.

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    52
    Answers
    4
    Vote Rating
    2
    michael.parrott is on a distinguished road

      0  

    Default


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

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


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

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    52
    Answers
    4
    Vote Rating
    2
    michael.parrott is on a distinguished road

      0  

    Default


    app.js
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    Ext.define( 'TestCase.view.SubSub',
    {
        extend: 'Ext.Container',
        xtype: 'subsubview',
        
        config:
        {
            html: 'Hey'
        }
    } );
    index.html
    Code:
    <!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.

  7. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    52
    Answers
    4
    Vote Rating
    2
    michael.parrott is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread