Routing in Extjs with DeftJs

Question

deftjs looks really promising as it adds exactly the necessary things I missed in the MVC implementation of ExtJs.

What I actually miss is a functionality that makes routing possible/ easy. Extjs has a Ext.ux.Router functionality but I formerly used code like this with help of this lib:

initRoutes: function () {
    var me = this;
    Log.debug('Books.controller.App: initRoutes');

    //use PATH.JS library until ExtJs supports routing as Sencha Touch 2.0 does. (see utils\Path)
    Path.map("#/home").to(function () {
        me.getController('Home').index();
    });
    Path.map("#/trackingsheet").to(function () {
        me.getController('TrackingSheet').index();
    });

    Path.root('#/home');
    Path.listen();
}

As the procedure of creating the crucial parts in deftjs is now exactly the other way around (view creates the controller) I certainly cannot refer to a controller's method and instantiate the view and make it the visible one. I have a pretty simple card layout here - what means only one view can be visible at a time, it is not necessary to go any deeper like this (e.g. make a task pane visible or the like).

What is the preferred way to do it?

I can think of making the Viewport a view factory having some methods like the controller before.

Thanks, da5id

Answer 1

I solved this problem by using Ext.util.History class in a history context class that can raise an event when the hash changes:

Ext.define('myApp.context.HistoryContext', {

    mixins: {
        observable: 'Ext.util.Observable'
    },

    constructor: function(config) {
        var me = this;

        if (config == null) {
            config = {};
        }
        this.initConfig(config);

        Ext.util.History.add('home');

        //init Ext.util.History; if there is a hash in the url,
        //controller will fire the event
        Ext.util.History.init(function(){
            var hash = document.location.hash;
            me.fireEvent('tokenChange', hash.replace('#', ''));
        });

        //add change handler for Ext.util.History; when a change in the token occurs,
        //this will fire controller's event to load the appropriate content
        Ext.util.History.on('change', function(token){
            me.fireEvent('tokenChange', token);
        });

        this.mixins.observable.constructor.call(this);
        this.addEvents('tokenChange');

        return this.callParent(arguments);
    }
});

Then you can inject this context in to your controller, and observe the token change, and implement the action in dispatch method:

Ext.define('myApp.controller.HomeController', {

    extend: 'Deft.mvc.ViewController',

    inject: [
        'historyContext'
    ],

    control: {
        appContainer: {},
        home: {
            click: 'addHistory'
        },
        about: {
            click: 'addHistory'
        }
    },

    observe: {
        historyContext: {
            tokenChange: "dispatch"
        }
    },

    init: function() {
        return this.callParent(arguments);
    },

    switchView: function(view) {
        //change this to get the cards for your card layout
        this.getAppContainer().add(Ext.ComponentMgr.create({
            xtype : view,
            flex : 1
        }));
    },

    addHistory: function(btn) {
        var token = btn.itemId;
        Ext.util.History.add(token);
    },

    dispatch: function(token) {
        // switch on token to determine which content to load
        switch(token) {
            case 'home':
                this.switchView('view-home-Index');
                break;
            case 'about':
                this.switchView('view-about-Index');
                break;
            default:
                break;
        }
    }
});

This should be ok for the first level routing (#home, #about), but you need to implement your own mechanism to fetch the token for the second and third level routes. (#home:tab1:subtab1) You can possibly create a service class that can handle fetching the hash and inject the service to each controllers to dispatch.

For further discussion in this topic, go to https://github.com/deftjs/DeftJS/issues/44