Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: this.application is undefined

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2

    Default Answered: this.application is undefined

    Hi,

    I'm trying to fire an event from a view to my controller:

    Code:
    this.application.fireEvent('confirmSucc');
    In my controller I define the event as follows:

    Code:
        init: function() {
    	this.application.on({
            	confirmSucc: this.confirmSuccess,
    	        scope: this
        	});
        },
    The error is

    Cannot call method 'fireEvent' of undefined, which means that this.application return null? What is the missing part?

    --testvogel

  2. Quote Originally Posted by testvogel View Post
    One problem is that this.control() will overwrite my initial controls. Is there no possibility to add controls?
    Why not set all your listeners in the init method?

    Quote Originally Posted by testvogel View Post
    The second problem is that the tap event will not fired. The onSubmit() function will be called as soon as the view is loaded but not if I tap the button.
    This is because you have '()' at the end of 'this.onSubmit'... remove the '()' and it will work as expected.

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

    Default

    Do you have application cached onto your view?
    Mitchell Simoens @LikelyMitch

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

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

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2

    Default

    No, how can I do it?

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

    Default

    Quote Originally Posted by testvogel View Post
    No, how can I do it?
    I wouldn't... I would let the controller fire something on the application level.
    Mitchell Simoens @LikelyMitch

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

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

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2

    Default

    Hi,

    Im sorry I dont really understand what you mean.

    I have a controller with an event handler:

    Code:
        confirmSuccess: function() {
            console.log('succ');    
        },
    Additionaly I have a view with a simply view and a send button. Because I want to use MVC I just want to fire an event or call a method of the controller in the handler of the button:

    Code:
    {
                            xtype: 'toolbar',
                            docked: 'bottom',
                            defaults: {
                                xtype: 'button',
                                style: 'margin: 0.1em',
                                flex : 1
                            },
                            layout: {
                                type: 'hbox'
                            },
                            items: [
                        
                            {xtype: 'spacer'},
                            {
                                text: 'Reset',
                                handler: function() {
                                    Ext.getCmp('checkoutform').reset();
                                }
                            },
                            {
                                text: 'Send Order',
                                handler: function() {
                                    console.log('storing');
                                    var form = Ext.getCmp('checkoutform');
                                    console.log(Ext.JSON.encode(form.getValues()));
                                    //CheckoutDemo.controller.MainController.fireEvent('confirmSucc');
                                    var model = Ext.ModelManager.create(form.getValues(),'CheckoutDemo.model.CheckoutInfo');
                                    var errors = model.validate(),    message = "";
                                    if(errors.isValid()){
                                        console.log('valid');
                                    } else {
                                        console.log('invalid');
                                    }
                                    Ext.Msg.show({
                                        msg: 'Verifying your information...',
                                        buttons: []
                                    });
                                    Ext.Ajax.request({
                                            url: 'http://192.168.137.1:8080/resttest/',
                                            method:'POST', 
                                            headers: {
                                                'Content-Type': 'application/json'
                                            },
                                            params: Ext.JSON.encode(form.getValues()),
                                            success: function(response, opts){
                                                console.log('success ');    
                                                this.application.fireEvent('confirmSucc');                                        
                                                Ext.Msg.hide();
                                            },
                                            failure: function(response, opts) {
                                                console.log('fail');
                                                this.application.fireEvent('confirmSucc');
                                                Ext.Msg.hide();
                                                
                                            }
                                    })
                                }
                            }
    I'm new at Sencha and obviously I'm doing something wrong because I cannot call anything in my view. I dont have access to the controller or the model of the form.
    Any ideas where I have to look for my mistake?

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

    Default

    You are doing too much in your view. You need to have your controller listen for the click on the Send Order button. If you want other controllers to listen for a custom event, you can fire on the application as the application instance is placed on each controller.
    Mitchell Simoens @LikelyMitch

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

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

  8. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2

    Default

    My demo application is pretty simple so I only have one controller which also handles the navigation events.
    I think I have to do something like this in the controller:

    Code:
            if(xtype == 'checkoutview'){
                this.addRef({
                        ref: 'submitorder',
                        selector: '#submitorder'
                });
                this.control({
                    '#submitorder':{
                        tap: this.onSubmit()
                    },
                });
            }
    checkoutview is the view where the button is placed. The if condition is placed inside of the navigation switch function. It will be called as soon the view changed to the view where the button is placed.
    One problem is that this.control() will overwrite my initial controls. Is there no possibility to add controls? The second problem is that the tap event will not fired. The onSubmit() function will be called as soon as the view is loaded but not if I tap the button.

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

    Default

    Quote Originally Posted by testvogel View Post
    One problem is that this.control() will overwrite my initial controls. Is there no possibility to add controls?
    Why not set all your listeners in the init method?

    Quote Originally Posted by testvogel View Post
    The second problem is that the tap event will not fired. The onSubmit() function will be called as soon as the view is loaded but not if I tap the button.
    This is because you have '()' at the end of 'this.onSubmit'... remove the '()' and it will work as expected.
    Mitchell Simoens @LikelyMitch

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

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

  10. #9
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2

    Default

    Thank you very much. The () were the mistake. You're right, it is better to add all controls in the beginning

  11. #10
    Sencha User
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    17

    Default A way to use the "global" event bus....

    Perhaps this approach accomplishes what you want:

    Code:
    Ext.application({
    
        views: ['MainView'],
        
        name: 'MyAppName',
    
        controllers: ['MainController'],
    
        launch: function() {
    
            Ext.Ajax.request({
                url: 'user/login',
    
                success: function(response) {
                    
                    if (response.responseText == "true") {
    
                        MyAppName.app.fireEvent('loginSuccess', this);
    
                    } else if (response.responseText == "false") {
    
                        console.log("User was not authenticated...");
                    }
               }
            });
        }
    });
    In my controller, I can then listen for this custom event:

    Code:
    Ext.define('MyAppName.controller.MainController', {
        extend: 'Ext.app.Controller',
    
        init: function()
        {
            
    MyAppName.app.on({ loginSuccess: this.onLoginSuccess, scope: this });
    } onLoginSuccess: function() {
    //do whatever you want here
    } });
    I'm not sure this is best practice...but it does work.

    If anyone objects to this, or knows a better approach, please feel free to respond.

Page 1 of 2 12 LastLast

Posting Permissions

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