Convert Mastering Ext JS 4 example to DeftJS

[Jean-Marc Choulet]

Hello,

I learn DeftJS. I try to convert the example in the book. I have a problem with CapsLockTooltip window. When displayed, this window is placed at the top left of the screen and I get the following error:

TypeError: alignToEl is null
alignToEl = Ext.get (alignToEl.el | | alignToEl);

I do not understand why? Do you have any idea?

Thanks,

Jean-Marc

My controller :

Ext.define("MyDeftJS.controller.LoginController", {
    extend: "Deft.mvc.ViewController",

    inject: {
        capsLockTooltip: "capsLockTooltipView"
    },

    config: {
        capsLockTooltip: null
    },

    init: function() {
        console.log("MyDeftJS.controller.LoginController.init");
        return this.callParent(arguments);
    },

    control: {
        submit: {
            click: "onSubmitButtonClick"
        },
        cancel: {
            click: "onCancelButtonClick"
        },
        password: {
            keypress: "onTextfieldKeyPress"
        },
        textFields: {
            selector: "form > textfield",
            specialkey: "onTextfieldSpecialKey"
        }
    },

    onSubmitButtonClick: function() {
        console.log("MyDeftJS.controller.LoginController.onSubmitButtonClick");
    },

    onCancelButtonClick: function() {
        console.log("MyDeftJS.controller.LoginController.onCancelButtonClick");
    },

    onTextfieldKeyPress: function(field, e, options) {
        var charCode = e.getCharCode();
        if ((e.shiftKey && charCode >= 97 && charCode <= 122) ||
            (!e.shiftKey && charCode >= 65 && charCode <= 90)) {
            this.getCapsLockTooltip().show();
        }
        else {
            this.getCapsLockTooltip().hide();
        }
    },

    onTextfieldSpecialKey: function(field, e, options) {
        if (e.getKey() == e.ENTER){
            var submitBtn = this.getSubmit();
            submitBtn.fireEvent('click', submitBtn, e, options);
        }
    }
});

In Application.js, I added :
    ...
    buildInjectorConfiguration: function() {
        var config;
        config = {
            appConfig: {
                className: "MyDeftJS.config.AppConfig",
                parameters: [
                    {
                        environment: MyDeftJS.config.AppConfig.PRODUCTION_ENV
                    }
                ]
            },
            userStore: "MyDeftJS.store.UserStore",
            capsLockTooltipView: "MyDeftJS.view.authentication.CapsLockTooltip"
        };
        return config;
    },
    ...

[Brian Kotek]

Dependency injection isn't meant to use views as dependency providers, so that's probably the problem.

--
Deft JS home page: http://deftjs.org/
Wiki: https://github.com/deftjs/DeftJS/wiki
For rules and tips on asking questions on the Deft JS mailing list: https://github.com/deftjs/DeftJS/wiki/Asking-Questions-on-the-Mailing-List
---
You received this message because you are subscribed to the Google Groups "Deft JS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to deftjs+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/deftjs/85f4d7af-d309-491d-b37f-e28c8c4e981e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.