Question

I am developing a Sencha Touch 2 App on an android device. My android device is not a normal mobilephone, so it has hardware-keys, too. Can I react on an keydown, keyup or keypress event in sencha touch? And how? One of them would be enough.

If it’s helpful: In normal JavaScript the key can be handled by onkeydown Listener and the keyCode is 0.

[Update]
I work on this tutorial for sencha touch. I have made all steps and it works fine. Now I want to catch the hardware key, how I discribed above. I put an addEventListener as in Handle Android Hardware….

So my code looks like:

Ext.application({
    name: "NotesApp",
    models: ["Note"],
    stores: ["Notes"],
    controllers: ["Notes"],
    views: ["NotesList", "NotesListContainer", "NoteEditor"],
    launch: function () {           
        var notesListContainer = {
                xtype: "noteslistcontainer"
        };
        var noteEditor = {
                xtype: "noteeditor"
            };
        Ext.Viewport.add(notesListContainer, noteEditor);

        document.addEventListener("keydown", Ext.bind(onKeyDown, this), false); 

        function onKeyDown(e) {     
           // you are at the home screen
           if (Ext.Viewport.getActiveItem().xtype == notesListContainer.xtype ) {
              alert('aha'); // give out 'aha'
                  //  LABEL1

           } else {}

        }
    }


});

How can I call a function on position LABEL1. The function, which I want to call, is in the class controllers.Notes and its name is onNewScanCommand:

Ext.define("NotesApp.controller.Notes", {

extend: "Ext.app.Controller",
config: {
    refs: {
        // We're going to lookup our views by xtype.
        notesListContainer: "noteslistcontainer",
        noteEditor: {
            selector: 'noteeditor',
            xtype: 'noteeditor',
            autoCreate: true 
       }
    },
    control: {
        notesListContainer: {
            // The commands fired by the notes list container.
            newNoteCommand: "onNewNoteCommand",
            editNoteCommand: "onEditNoteCommand",
            newScanCommand: "onNewScanCommand"
        }
    }
},
onNewScanCommand: function () {
    console.log("onNewScanCommand");

    var now = new Date();
    var noteId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();

    var newNote = Ext.create("NotesApp.model.Note", {
        id: noteId,
        dateCreated: now,
        title: "",
        narrative: ""
    });

    // here I call a function in PhnoeGap, then this call a nativ function
    scan("echome", function(echoValue) {
        newNote.set("title", echoValue.scanNummer);
        newNote.set("narrative", echoValue.scanType);
    });



    var notesStore = Ext.getStore("Notes");
    /*
    if (null == notesStore.findRecord('id', newNote.data.id)) {
        notesStore.add(newNote);
    }*/
    notesStore.add(newNote);

    notesStore.sync();

    notesStore.sort([{ property: 'dateCreated', direction: 'DESC'}]);

    //this.activateNotesList();
},
// Base Class functions.
launch: function () {
    this.callParent(arguments);
    Ext.getStore("Notes").load();
    console.log("launch");
},
init: function () {
    this.callParent(arguments);
    console.log("init");
}

});

Answer 1

I have the solution!
My controller is watching for Events. The Events were fired in the view NotesListContainer.

I add an id to my variable notesListContainer and so I can get the object of NotesListContainer and fire myevent newScanCommand

Ext.application({
        name: "NotesApp",
        models: ["Note"],
        stores: ["Notes"],
        controllers: ["Notes"],
        views: ["NotesList", "NotesListContainer", "NoteEditor"],
        launch: function () {

            var notesListContainer = {
                id: 'nlistcontainer',
                xtype: "noteslistcontainer"
            };
             var noteEditor = {
                xtype: "noteeditor"
            };
            Ext.Viewport.add(notesListContainer, noteEditor);

            document.addEventListener("keydown", Ext.bind(onBackKeyDown, this ), false); 

            function onBackKeyDown(e) {

                // you are at the home screen
                if (Ext.Viewport.getActiveItem().xtype == notesListContainer.xtype ) {

                    //the solution
                    Ext.getCmp('nlistcontainer').fireEvent("newScanCommand", this);

                } else {
                    this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
                        url: 'noteslistcontainer'
                    }));
                }

            }
        }


    });

So, this is my rescue: Ext.getCmp('nlistcontainer') 😉
Maybe, it gives a better solution.