Yaseen
Yaseen

Reputation: 1358

Correct way of attaching 'disclose' (or any other) event handler in Sencha Touch

In my simple application I'm listening for the disclose event like this :

In the NotesList.js (view) file...

Ext.define("NotesApp.view.NotesList", {
    extend : "Ext.dataview.List",
    xtype : "noteslist",
    ...
    config : {
       onItemDisclosure : true,       //adds the disclose arrow
    }
});

NotesList is used in NotesListContainer which is an Ext.Container.

Then in NotesListContainer.js (view) ...

    var notesList = {
        xtype : "noteslist",
        ...
        listeneres : {
            disclose : { fn : this.onNotesListDisclose, scope : this  }
        }
    };

     this.add([topToolbar, notesList]); 

The function does this :

onNotesListDisclose : function(list, record, target, index, evt, options) {
    console.log(' onNotesListDisclose() called'); //nevers gets logged
    this.fireEvent('editNoteCommand', this, record);
}

Then in Notes.js (controller) :

 refs : {
      //get elemets using xtype attr
      notesListContainer : "noteslistcontainer",
      noteEditor : "noteeditor"
  },
  //handlers for events
  control : {
     //define which events should this controller respond to

     notesListContainer : {
         //events fired by NotesListContainer
         newNoteCommand : "onNewNoteCommand",
         editNoteCommand : "onEditNoteCommand"
     }
  }
},
//Event/Command handler

onEditNoteCommand : function(list, record) {
    console.log(' onEditNoteCommand called ');
    this.activateNoteEditor(record);
}

I think the problem is in NotesListContainer.js where I am instantiating the list. If I listen for the event in controller like this :

refs : {
      //get elemets using xtype attr
      notesListContainer : "noteslistcontainer",
      notesList : "noteslistcontainer list",
  },
  //handlers for events
  control : {
     //define which events should this controller respond to
     notesListContainer : {
         //events fired by NotesListContainer
         newNoteCommand : "onNewNoteCommand",
         //editNoteCommand : "onEditNoteCommand"
     },
     notesList : {
         disclose : "onEditNoteCommand"  //adding it this way works...
     }
  }

It works just fine. However, I would prefer to work with a more application specific event instead of very generic disclose event. I am new to sencha touch, any help is appreciated.

Upvotes: 1

Views: 409

Answers (2)

sha
sha

Reputation: 17860

If you want to have your own custom business logic driven events, do the following:

  • Subscribe to necessary UI events in your main controller
  • Generate application wide business events
  • Subscribe to these events in your view controller

Upvotes: 1

Nico Grunfeld
Nico Grunfeld

Reputation: 1133

what you mean with 'a more application specific event'?

The disclose event is a list-component specific one: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dataview.List-event-disclose

Upvotes: 0

Related Questions