How do I set data in an unrelated ViewModel

Question

I have a sign in process that I've roughed into a fiddle (the part I'm stuck on starts at line 110).

Here's a copy of the code:

Ext.define('MyApp.MyPanel',{
    extend: 'Ext.panel.Panel',
    title: 'My App',
    controller: 'mypanelcontroller',
    viewModel: {
        data:{
            email: 'Not signed in'
        }  
    },
    width: 500,
    height: 200,
    renderTo: Ext.getBody(),

    bind:{
        html: "Logged in as: <b>{email}</b>"        
    },

    buttons:[
        {
            text: 'Sign in',
            handler: 'showSignInWindow'
        }
    ]
});

Ext.define('MyApp.MyPanelController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.mypanelcontroller',

    showSignInWindow: function (b,e,eOpts){
        Ext.widget('signinwindow').show();
    }
});

Ext.define('MyApp.SignInWindow',{
    extend: 'Ext.window.Window',
    title: 'Sign in',
    controller: 'signincontroller',

    xtype: 'signinwindow',

    width: 400,
    title: 'Sign In',
    modal: true,
    layout: 'fit',

    items:[
        {
            xtype: 'form',
            reference: 'signinfields',
            layout: 'anchor',
            bodyPadding: 5,
            defaults: {
                anchor: '100%',
                xtype: 'textfield'
            },
            items:[
                {
                    fieldLabel: 'Email',
                    name: 'email',
                    allowBlank: false
                },
                {
                    fieldLabel: 'Password',
                    name: 'password',
                    allowBlank: false,
                    inputType: 'password'
                }
            ],
            buttons:[
                {
                    text: 'forgot password',
                    width: 120,
                    //handler: 'onForgotPassword'
                },
                '->',
                {
                    text: 'sign in',
                    width: 120,
                    handler: 'onSignIn'
                }
            ]
        }
    ]
});


Ext.define('MyApp.SignInController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.signincontroller',

    onSignIn: function (button, event, eOpts){
        var data = button.up('form').getValues();
        button.up('window').mask('Signing in...');

        Ext.Ajax.request({
            // sorry, I don't know how to fake an API response yet :/
            url: '/authenticate/login',
            jsonData: data,
            scope: this,
            success: function (response){

            var result = Ext.decode(response.responseText);


            if(result.loggedIn == true){


                /*
                This is where I need help. 
                From the sign in window, I would like to update the viewmodel in `MyApp.MyPanel` with the 
                email returned in the response. If the window was a child of MyPanel, I would be able to update 
                via the ViewModel inheritance, but I can't here because the window isn't part of the `items` config.
                */
                this.getViewModel().set('email', result.data[0].email);

                Ext.toast({
                    title: 'Sign in successful',
                    html: "You've been signed in.",
                    align: 't',
                    closable: true,
                    width: 300
                });

                button.up('window').destroy();
            } else {
                Ext.toast({
                    title: 'Sign in failed',
                    html: "You sign in failed: " + result.message,
                    closable: true,
                    width: 300,
                    align: 't'
                });
                button.up('window').unmask();
            }

            },
            failure: function (){
            // debugger;

            }
        })
    },


    onForgotPassword: function (){
        Ext.Ajax.request({
            url: '/authenticate/test',
            success: function (response){

            },
            failure: function (){
            }
        })
        // Ext.Msg.alert('trigger forgot password logic', "This is where you need to trigger the API to send the forgot email form. <br>Say something here about how you'll get an email");
    }
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('MyApp.MyPanel');
    }
});

What I'm trying to do is:

Show a panel with a sign in button
Clicking on the button shows a sign in window
Submitting the sign in form attempts an authentication against the server
On a successful authentication, the email for the user is set in the initial panel's ViewModel

The last bullet is what I'm having a problem with.

If the sign in window was a child of the panel then I could set it through the ViewModel inheritance, but since I'm using a widget show I can't set back through the panel's items config.

Is there a way of doing this correctly?

Chris Schmitz Chris Schmitz · Accepted Answer · 2015-08-07T21:49:26

Nevermind, I figured it out. The answer was in my question all along:

If the sign in window was a child of the panel then I could set it through the ViewModel inheritance, but since I'm using a widget show I can't set back through the panel's items config.

Just make the window a child of the panel:

Ext.define('MyApp.MyPanelController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.mypanelcontroller',

    showSignInWindow: function (b,e,eOpts){

        // Instead of creating the widget and showing it, create it and add it to the panel.
        // The window is going to float anyway, so being a child of the panel is no big deal

        var signinwindow = Ext.widget('signinwindow');
        this.getView().add(signinwindow).show();
    }
});

Doing it this way means the window inherits the viewmodel of the panel and you can set the viewmodel data like so:

Ext.define('Registration.view.signin.SignInController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.signin-signin',

    onSignIn: function (button, event, eOpts){
        var data = button.up('form').getValues();
        button.up('window').mask('Signing in...');

        Ext.Ajax.request({
            url: '/authenticate/login',
            jsonData: data,
            scope: this,
            success: function (response){
            debugger;
            var result = Ext.decode(response.responseText);


            if(result.loggedIn == true){

                // Now that the window has inherited the panel's viewmodel
                // you can set it's data from the windows controller
                this.getViewModel().set('username', result.data[0].eMail);
            ...

emoji-for-exasperated :/

How do I set data in an unrelated ViewModel

1 Answers