javascript - How do I set data in an unrelated ViewModel -
i have sign in process i've roughed fiddle (the part i'm stuck on starts @ line 110).
here's copy of 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, don't know how fake api response yet :/ url: '/authenticate/login', jsondata: data, scope: this, success: function (response){ var result = ext.decode(response.responsetext); if(result.loggedin == true){ /* need help. sign in window, update viewmodel in `myapp.mypanel` email returned in response. if window child of mypanel, able update via viewmodel inheritance, can't here because window isn't part of `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 need trigger api send forgot email form. <br>say here how you'll email"); } }); ext.application({ name : 'fiddle', launch : function() { ext.create('myapp.mypanel'); } });
what i'm trying is:
- show panel sign in button
- clicking on button shows sign in window
- submitting sign in form attempts authentication against server
- on successful authentication, email user set in initial panel's viewmodel
the last bullet i'm having problem with.
if sign in window child of panel set through viewmodel inheritance, since i'm using widget show can't set through panel's items config.
is there way of doing correctly?
nevermind, figured out. answer in question along:
if sign in window child of panel set through viewmodel inheritance, since i'm using widget show can't set through panel's items config.
just make window child of panel:
ext.define('myapp.mypanelcontroller',{ extend: 'ext.app.viewcontroller', alias: 'controller.mypanelcontroller', showsigninwindow: function (b,e,eopts){ // instead of creating widget , showing it, create , add panel. // window going float anyway, being child of panel no big deal var signinwindow = ext.widget('signinwindow'); this.getview().add(signinwindow).show(); } });
doing way means window inherits viewmodel of panel , can set viewmodel data 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){ // window has inherited panel's viewmodel // can set it's data windows controller this.getviewmodel().set('username', result.data[0].email); ...
emoji-for-exasperated :/
Comments
Post a Comment