How to use up() in Ext.Button handler

Question

Back Ground : I am working on an MVC application using sencha touch 2. I am working on a page which has two tabs. Inside the first tab, I have a button inside a title bar.

Issue : I am not able to call anyother function from the button handler. I think, there is an issue with the scope of the calling function.

Here is my code.

Ext.define('WUPOC.view.WUHomePage', {
  extend: 'Ext.TabPanel',
  requires:['Ext.TitleBar','Ext.dataview.List','Ext.data.proxy.JsonP'],
  alias: 'widget.wuHomePageView',

  config: {
    fullscreen: true,

    defaults: {
      styleHtmlContent: true
    },

    items: [{
      title: 'Home',
      iconCls: 'home',

      items: [{
        xtype: 'titlebar',
        title: 'Hello',
        docked: 'top',
        items: [{
          xtype: 'button',
          text: 'LogOut',
          ui: 'action',
          itemId: 'newButton',
          align: 'right',
          handler : function(btn){
            console.log('LogOut is tapped');  // This is printed
            this.up.onNewButtonTap();  // Throws error
          }
        }],
      }],
    }, {
      title: 'Contact',
      iconCls: 'user',
      html: 'Contact Screen'
    }]
  },

  onNewButtonTap: function () {
    alert('newNoteCommand');
  },
});

I am getting the error as below.

Uncaught TypeError: Object function (selector) {
        var result = this.parent;

        if (selector) {
            for (; result; result = result.parent) {
                if (Ext.ComponentQuery.is(result, selector)) {
                    return result;
                }
            }
        }
        return result;
    } has no method 'onNewButtonTap' 

I think there is an issue with setting the scope of a button. Kindly help.

Thank you

Answer 1

First, up is a function so you need to call it this way :

this.up();

Then this.up() would only bring to the container of the button, which has no method onNewButtonTap. You could just keep doing up() until you get the right component but this would me more clever to do :

• Add an xtype to your view
• Use this xtype as a selector in the up function : this.up('myXType').onNewButtonTap();

Example

Hope this helps