Sencha Touch 2: Call controller function from within Ext.Msg.confirm

Question

I'm just getting started with Sencha Touch 2 and I have never worked with Sencha Touch 1.x before. I've just finished this tutorial (which is the best starter tutorial I have found so far) http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/ and now I want to go ahead and extend this Notes App.

I have a controller and 2 views, a list view and an edit view. In the edit view I want to be able to delete the current record. The delete function is in the controller. After tapping the delete button, I want to show a confirmation dialog ("Are you sure you want to delete...?"). After the user presses yes, the delete function should be called.

Now my problem is: How do I call the controllers delete function from within Ext.Msg.confirm?

Here are the relevant snippets of my code. Please let me know if something important is missing.

Please see the "onDeleteNoteCommand" function. "this.someFunction" obviously doesn't work since "this" is a DOMWindow.

Ext.define('TestApp2.controller.Main', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        noteEditorView: 'noteeditorview'
    },
    control: {
        noteEditorView: {
            deleteNoteCommand: 'onDeleteNoteCommand',
        }
    }
},

onDeleteNoteCommand: function() {
    console.log('onDeleteNoteCommand');

    var noteEditor = this.getNoteEditorView();
    var currentNote = noteEditor.getRecord();

    Ext.Msg.confirm(
        "Delete note?",
        "Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
        function(buttonId) {
            if(buttonId === 'yes') {
                            //controller functions!! how to call them?
                this.deleteNote(currentNote);                   
                this.activateNotesList();
            }
        }
    );
},

deleteNote: function(record) {
    var notesStore = Ext.getStore('Notes');
    notesStore.remove(record);
    notesStore.sync();
},

activateNotesList: function() {
    Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
},

slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },

launch: function() {
    this.callParent();
    Ext.getStore('Notes').load();
    console.log('launch main controller');
},
init: function() {
    this.callParent();
    console.log('init main controller');
}
});

Dmytro Plekhotkin Dmytro Plekhotkin · Accepted Answer · 2012-05-24T11:11:14

When you enter callback function of Ext.Msg the scope changes from controller scope to global scope (window), so you must set up it as parameter of confirm method:

  Ext.Msg.confirm(
      "Delete note?",
      "Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
      function(buttonId) {
        if(buttonId === 'yes') {
          this.deleteNote(currentNote);                   
          this.activateNotesList();
        }
      }, 
      this // scope of the controller 
    );

For more info please check sencha docs: http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox-method-confirm

Sencha Touch 2: Call controller function from within Ext.Msg.confirm

1 Answers