Sencha Touch 2.1 Get View by Ref in Controller

Question

When trying to programatically push a view into the main navigation view on the viewport, I get the following error:

Uncaught TypeError: Object [object Object] has no method 'getMainPanel' when the following line in the MainController.js file is called:

var mainnav = this.getMainPanel();

I am simply trying to get a ref to the navigation view by xtype so that I can perform a mainnav.push('viewName') depending on if there is data returned from a data call. The data and data call are working fine, and I can manually add the desired views to the main view port, rendering the navigation view worthless, which is not my intention.

I have tried adding the "Ref" by xtype, 'MainPanel' and also by assigning and id, id: 'MainPanel' and in the controller trying:

refs: {
      mainPanel: 'MainPanel'
}

and by Id:

refs: { mainPanel: '#MainPanel' }

No matter, the error is the same.

For reference I have attempted to follow the situations described in the following resources:

http://docs.sencha.com/touch/2.1.1/#!/guide/controllers

http://docs.sencha.com/touch/2.0.2/#!/api/Ext.ComponentQuery

http://www.sencha.com/forum/showthread.php?179143-View-reference-getter-undefined

Sencha Touch 2- Unable to get ref view from controller

Sencha Touch 2.0 Controller refs attribute not working?

Sencha Touch 2.0 and navigation.View - MVC

Here is my code:

app.js

Ext.application({
name: 'AddCharSheet',
views: ['Main'],
models: ['CharacterSelectModel'],
stores: ['CharacterSelectStore'],
controllers: ['MainController'],

launch: function(){
    Ext.Viewport.add({
        xtype: 'MainPanel'
    });
}
});

Main.js

   Ext.define('AddCharSheet.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['AddCharSheet.view.CharacterSelect', 'AddCharSheet.view.AddNewCharacter', 'Ext.Toolbar', 'Ext.Panel'],
    xtype: 'MainPanel',
    config: {

    }
    });

MainController.js

Ext.define('AddCharSheet.controller.MainController',{
Extend: 'Ext.app.Controller',

config: {
    stores: ['AddCharSheet.store.CharacterSelectStore'],
    models: ['AddCharSheet.model.CharacterSelectModel'],
    views: ['AddCharSheet.view.AddNewCharacter', 'AddCharSheet.view.CharacterSelect'],

    refs: {
        mainPanel: 'MainPanel'
    },
    control: {

    },
    launch: function() {
    }
},

init: function(){
    var chs = Ext.getStore('charSelStore');
    var mainnav = this.getMainPanel();
    chs.load({
        callback: function(recs, operation){
            if(this.getCount() > 0){
                mainnav.push('CharList');
            }
            else{
                mainnav.push('NewCharacter');
            }
        }
    });
}
});

Update Main.js and update MainController.js

Main.js

Ext.define('AddCharSheet.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['AddCharSheet.view.CharacterSelect', 'AddCharSheet.view.AddNewCharacter', 'Ext.Toolbar', 'Ext.Panel'],
    xtype: 'MainPanel',
    config: {
        itemId: 'mainpanel'
    }
});

MainController.js

Ext.define('AddCharSheet.controller.MainController',{
    Extend: 'Ext.app.Controller',

    config: {
        stores: ['AddCharSheet.store.CharacterSelectStore'],
        models: ['AddCharSheet.model.CharacterSelectModel'],
        views: ['AddCharSheet.view.AddNewCharacter', 'AddCharSheet.view.CharacterSelect'],

        refs: {
            mainPanel: {
                autoCreate: true,
                selector: '#mainpanel',
                xtype: 'MainPanel'
            }
        },
        control: {

        },
        launch: function() {
        }
    },

    init: function(){
        var chs = Ext.getStore('charSelStore');
        var mainnav = this.getMainPanel();
        chs.load({
            callback: function(recs, operation){
                if(this.getCount() > 0){
                    mainnav.push({xtype: 'CharList'});
                }
                else{
                    mainnav.push({ xtype: 'NewCharacter'});
                }
            }
        });
    }
});

cclerv · Accepted Answer · 2013-04-16T21:42:21.487

You want to assign an itemIdconfig to your Main view. So:

Ext.define('AddCharSheet.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['AddCharSheet.view.CharacterSelect', 'AddCharSheet.view.AddNewCharacter',        'Ext.Toolbar', 'Ext.Panel'],
    xtype: 'MainPanel',
    config: {
        ...,
        itemId: 'mainpanel',
        ...
    }
});

Then in your controller you reference your Main view via ref. So:

Ext.define('AddCharSheet.controller.MainController',{
    Extend: 'Ext.app.Controller',

    config: {
        stores: ['AddCharSheet.store.CharacterSelectStore'],
        models: ['AddCharSheet.model.CharacterSelectModel'],
        views: ['AddCharSheet.view.AddNewCharacter', 'AddCharSheet.view.CharacterSelect'],

        refs: {
            mainPanel : {
                autoCreate: true,
                selector: '#mainpanel',
                xtype: 'MainPanel'
            },
        },
        control: {

        },
        launch: function() {

        }
},

init: function(){
    var chs = Ext.getStore('charSelStore');
    var mainnav = this.getMainPanel();
    chs.load({
        callback: function(recs, operation){
            if(this.getCount() > 0){
                mainnav.push('CharList');
            }
            else{
                mainnav.push('NewCharacter');
            }
        }
    });
}

});

Now you should be able to do var mainnav = this.getMainPanel();

Also the way you are pushing the new views is wrong. You are passing a String when you should be pushing an Object. Check the docs.

So in your case you may want to do this:

mainnav.push({  
    xtype:'CharList'
});

and

mainnav.push({  
    xtype:'NewCharacter'
});

assuming CharList and NewCharacterare the xtypes of the respective views.

Edit: Ok if you are still having the same issue, it could be because you are doing this in the init function. Try moving your logic to the launch function instead. It turns out the init function gets called before the application launches. http://docs.sencha.com/touch/2.1.1/#!/api/Ext.app.Controller-cfg-init

still same exact error in the same spot, just as when I attempted to assign the broader scope Id instead of the itemId. I do note the push needing an object instead of the string. Also, if I understand the Ref docs correctly, the way you propose should never throw the error since autoCreate is true and the xtype is specified, if it cannot get the view should it not create a new instance of it? Read under advanced refs [link]http://docs.sencha.com/touch/2.1.1/#!/guide/controllers — SouthPlatte, Apr 16 '13 at 21:35
So you still get this same error: `Uncaught TypeError: Object [object Object]` at line `var mainnav = this.getMainPanel();` — cclerv, Apr 16 '13 at 21:37
Yes, same error. I will update original post with new code to verify I have implemented properly — SouthPlatte, Apr 16 '13 at 21:40
That does make sense, but now it gives the following warning, without ever processing the launch: function [WARN][Anonymous] The controller 'AddCharSheet.controller.MainController' doesn't have a launch method. Are you sure it extends from Ext.app.Controller? Also, per the docs and comments therein, I moved the launch out of the config object - either way error is there. — SouthPlatte, Apr 16 '13 at 21:56
Have you tried including all your `views`in `Ext.application({...})` — cclerv, Apr 16 '13 at 22:06
Line 2 of MainController.js I put Extend instead of extend, works now. Thanks, answer marked. — SouthPlatte, Apr 16 '13 at 22:11

score 0 · Answer 2 · answered Aug 27 '13 at 14:11

Actually when you are calling mainnav = this.getMainPanel(); inside the function init() the MainPanel view is not yet created that's why you're getting undefined, try doing it with a click handler and you will see that will work because all the views will be allready created in the moment of the click.

try something like this :

Ext.define('IT.controller.UserController', {
    extend: 'Ext.app.Controller',
    views: [
        'user.authentication'
    ],
    refs: [
        {
            ref: 'Authentication',
            selector: 'Authentication',
        }
    ],
    init: function() {
        console.log('Initialized Users');
        var me = this;
        me.control(
            {
                '#login-user-btn': {
                    click: me.handleLoginUser
                }
            }
            );
        },
    handleLoginUser: function(button, e) {
        alert('Ok');
        //var form= button.up('form').getForm();
        var form = this.getAuthentication();
        alert(form);
    }
})

Sencha Touch 2.1 Get View by Ref in Controller

2 Answers2