gistfile1.js

Ext.create("Ext.form.field.Text", {
    id: "seller",
    emptyText: "Seller",
    renderTo: Ext.getBody()
});

Ext.create("Ext.form.field.Text", {
    id: "item",
    emptyText: "Item",
    renderTo: Ext.getBody()
});

var myStatechart = Statechart.create();

myStatechart.addState("#application", {
    parentState: "#platform",
    initialSubstate: "#application .loading",

    enterState: function() {
        var statechart = this;
        console.log("Enter State: " + this.name);
        Ext.getCmp("seller").on("focus", function() {
            statechart.sendEvent("loading");
        });
        Ext.getCmp("item").on("focus", function() {
            statechart.sendEvent("loading");
        });
    },
    exitState: function() {},
    
    loading: function(){
        //console.log("Event Loading called...");
        alert('Event Loading Called');
        this.goToState("#application .loading");
    }
});

myStatechart.addState("#application .loading", {
    parentState: "#application",

    enterState: function() {
        alert('Enter Loading');
        console.log("Enter State: " + this.name);
        this.sendEvent("goToSellers"); // Works if I wrap the goToState inside an event handler
    },
    exitState: function() {
        console.log("Exit State: " + this.name);
    },
    goToSellers: function() {
        this.goToState("#sellers");
    }
});

myStatechart.addState("#sellers", {
    parentState: "#application",

    enterState: function() {
        console.log("Enter State: " + this.name);
    },
    exitState: function() {
        alert('Exit #sellers');
        console.log("Exit State: " + this.name);
    }
});

myStatechart.addState("#items", {
    parentState: "#application",

    enterState: function() {
        console.log("Enter State: " + this.name);
    },
    exitState: function() {
        console.log("Exit State: " + this.name);
    }
});

myStatechart.initStates("#application");