How to use this.up() function in button handler in Sencha Touch

1
votes

I have looked into this question, but this does not solve my problem How to use up() in Ext.Button handler

I am trying to implement a simple button handler, and want to handle of a Panel's toolbar's button. I am defining a onNewFeed3 function in the panel, not sure how to call that when the button's tap event is clicked. I don't want to use a separate controller class, but want it all in the View class. The above link seems to answer this, I am still getting the two errors as I mention down below in the code.

The reason for the first code after the first comment was to ascertain the XType of "this", and I am not sure what's the best way to do this, as I am getting a TypeError

Thanks

Ext.define('Volt.view.FeedView', {
    extend: 'Ext.Panel',

    requires: [
        'Ext.TitleBar',
        'Ext.Button',
        'Ext.Toolbar'
        //'Ext.Panel'
    ],

    xtype: 'feedViewCard',



    config: {
        iconCls: 'action',
        title: 'FeedView',

        layout: {
            type: 'vbox'
        },

        items: [
            {
                xtype: 'toolbar',
                title: 'Home',
                docked: 'top',
                items: [
                    {
                        xtype: 'spacer'

                    },
                    {
                        xtype: 'button',
                        text: 'New2 Feed',
                        ui: 'action',
                        id: 'new_note_button',

/*  I HAVE TRIED THIS AND DOES NOT WORK - GIVES TypeError : undefined is not a function */
                        handler: function(){
                            console.log('button tapped inline handler, xtype =');
                            console.log(this.getXTypes());

                        },

/*  and this gives the same error as well : TypeError : undefined is not a function*/
                        handler: this.up('feedViewCard').onNewFeed3,

                        scope: this
                    }

                ]

            }
        ]
    },

    onNewFeed3: function(){
        console.log('New Feed 3 button clicked');
    }

});
2
javascriptextjssencha-touch

2 Answers

2
votes

Your handler does not run in the scope of button, therefore errors as this points to the global scope (window). Button handler receives the button clicked as the first argument so the handler should read:

handler:function(btn) {
    btn.up('feedViewCard').onNewFeed3();
}
0
votes

Change it to something like that (that didn't work because handler is being executed in the scope of view already and this is not pointed to the button):

handler: function() {
    this.up('feedViewCard').onNewFeed3();
}

You can always debug the scope of the function using 

console.log(this)

And if the handler by default is being executed in the scope of the view itself you don't need any lookup function at all. Change the handler to:

handler: function() {
    this.onNewFeed3();
}