Results 1 to 5 of 5

Thread: Navigation Controller - after push/pop/push, button callback not working

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Navigation Controller - after push/pop/push, button callback not working

    REQUIRED INFORMATIONExt version tested:
    • Sencha Touch 2.1.1, 2.2.0
    Browser versions tested against:
    • Chrome, Safari
    DOCTYPE tested against:
    • ____
    Description:
    • After pushing a view onto a navigationview, popping it, and pushing it again, controller functions are no longer called.
    Steps to reproduce the problem:
    • Press Login button. Press Back button on navigation bar. Press Login button. Press Button - controller callback function is not called.
    The result that was expected:
    • Button callback called.
    The result that occurs instead:
    • Button callback not called.
    Test Case:App.js:
    Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'touch/src',
        'FOS': 'app'
    });
    //</debug>
    
    
    Ext.application({
        name: 'FOS',
    
    
        requires: [
            'Ext.MessageBox'
        ],
    
    
        models:[
        ],
    
    
        views: [
            'Login',
            'Locate'
        ],
    
    
        stores: [
        ],
    
    
        controllers: [
            'LoginController',
            'LocateController',
        ],
        
        icon: {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/[email protected]',
            '144': 'resources/icons/[email protected]'
        },
    
    
        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() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add ( {xtype:'navigationview', id:'mainNav'} );
            Ext.getCmp('mainNav').push ( {xtype:'login_panel', title:'Login'} );
        },
    
    
        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();
                    }
                }
            );
        }
    });
    Login.js
    Code:
    Ext.define('FOS.view.Login', 
    {
        extend: 'Ext.Panel',
        xtype: 'login_panel',
        alias: 'widget.login_panel',
    
    
        config: 
        {
            items:
            {
                xtype: 'button',
                id: 'loginButton',
                text: 'Login',
                height: 40,
                margin: '0 20 10 20',
                align: 'center',
            }
        }
    });
    LoginController.js:
    Code:
    Ext.define('FOS.controller.LoginController', 
    {
        extend: 'Ext.app.Controller',
    
    
        config: {
        
            views: [
                'Login'
            ],
    
    
            refs: {
                loginButton: '#loginButton',
            },
            
            control: {
                loginButton : {
                    tap: 'doLogin'
                }
            }
        },
        
        doLogin: function(button)
        {
          Ext.getCmp('mainNav').push ( { xtype: 'locate_panel', title: 'Second'} );
        },
    });
    Locate.js:
    Code:
    Ext.define('FOS.view.Locate', 
    {
        extend: 'Ext.Panel',
        xtype: 'locate_panel',
        id: 'locatePanel',
    
    
        requires: [
            'Ext.field.Select',
            'Ext.Map'
        ],
    
    
        config: 
        {
            items: [
                {
                    xtype: 'button',
                    id: 'myButton',
                    text: "Button",
                    height: 40,
                    margin: 5,
                }
            ]
        }
    });
    Code:
    Ext.define('FOS.controller.LocateController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
    
    
            views: [
                'Locate'
            ],
    
    
            refs: {
                locatePanel: '#locatePanel',
                myButton: '#myButton',
            },
    
    
            control: {
                locatePanel : {
                    initialize: 'initialize'
                },
                myButton : {
                    tap: 'buttonPress'
                },
            }
        },
        
        initialize : function ()
        {
            console.log ( 'locatePanel initialized' );
        },
    
    
        buttonPress: function ()
        {
            console.log ( 'Button' );
        },
    
    
    });
    HELPFUL INFORMATIONScreenshot or Video:
    • attached
    See this URL for live test case: http://Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • ________
    • WinXP Pro

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Try not using the id config and using xtypes and properties.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    Cool; thanks - will look into that more. If you have any pointers to docs on how I might use them in controllers that would be much appreciated.

    I used the id config in the controller because that's how it's shown in the doc page: http://docs.sencha.com/touch/2-1/#!/guide/controllers

    I did away with controllers for now and attached listeners directly on the view objects. That seems to work ok with push/pop ops. I like the idea of controllers though - makes for good code organization, so I'm hoping I can go back to using them if possible.

  4. #4

    Default

    You can (and should) still use controllers. But instead ids you can use xtype as reference.

    Your View (look at the "xtype" in panel and the "action" inside the button config):

    PHP Code:
    Ext.define('FOS.view.Locate'
    {
        
    extend'Ext.Panel',
        
    xtype'locatepanel'// Use this config in controller
        
        //id: 'locatePanel', // Avoid them, evil

        
    requires: [
            
    'Ext.field.Select',
            
    'Ext.Map'
        
    ],

        
    config
        {
            
    items: [
                {
                    
    xtype'button',
                    
    action'dosomething'// Use 'action' to reference in controller
                    
    text"Button",
                    
    height40,
                    
    margin5
                
    }
            ]
        }
    }); 
    And your controller:

    PHP Code:
            ...

            
    refs: {
                
    locatePanel'locatepanel'// Use xtype
                
    myButton'locatepanel button[action=dosomething]'// Use action config
            
    },

            ... 
    Michael

  5. #5

    Default

    That works! Many thanks... I do remember seeing this way of referencing components in the docs in places, should have latched on to that earlier. Feel free to close this bug; indeed, it seems like ids are the wrong things to rely on...

Posting Permissions

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