[ExtJS5 Study notes] 11th EXTJS5MVVM mode System Login Instance

Address of this article:

This article Sushengmiyan

--------------------------------------------------------------------------------------------------------------- ---------------------

Temporarily complete the following:

1. Login screen

Enter any user name and password ( temporarily no login verification, etc., post-add ), click the user login to enter the main page

In the lower-left corner, the user name you just entered is displayed, enabling the transmission of the data.

The code modules are shown below:

App.js

/* * This file was generated and updated by Sencha CMD. You can edit the this file as * needed for your application, but these edits would have the merged by * Sencha CMD when Upgra Ding. */ext.application ({    name: ' Oasystem ',    Extend: ' oasystem.application ',        //autocreateviewport: ' OaSystem.view.main.Main ',    //-------------------------------------------------------------------------    / /Most customizations should is made to oasystem.application. If you need    to//Customize this file, doing so below this section reduces the likelihood    //Of the merge conflicts wh En upgrading to new versions of Sencha CMD.    //-------------------------------------------------------------------------});

Application.js

/** * The main application class. An instance of the created by App.js when it calls * Ext.application (). The ideal place to handle application launch and initialization * details. */ext.define (' Oasystem.application ', {    extend: ' Ext.app.Application ',        name: ' Oasystem ',    uses:[' Oasystem.simdata ', ' ext.ux.ajax.* '], views    : [        //Todo:add views here    ],    controllers: [        ' Root '        //Todo:add controllers here    ],    stores: [        //Todo:add stores here    ],        launch:function () { c14/>//todo-launch the application//server puppet, simulates the real-world Server Exchange//oasystem.simdata.init ();//console.log (' Launch begin ');// This.callparent () Ext.ux.ajax.SimManager.init (). Register ({  '/authenticate ':  {type: ' JSON ', data: function (CTX) {  return ext.apply ({}, True);}})  ;}    );

Login.js

Ext.define (  ' OaSystem.view.login.Login ',  {requires:[' OaSystem.view.login.LoginController '),    extend : ' Ext.window.Window ',    controller: ' Login ', Closable:false,resizable:false,modal:true,//draggable:false, Autoshow:true,title: ' User Login---OA Office system ', glyph: ' [email protected] ', Items:[{xtype: ' form ',//parent form reference: ' Form ', Bodypadding:20,items:[{xtype: ' TextField ', Name: ' username ', labelwidth:50,    Fieldlabel: ' username ', Allowblank:false, Emptytext: ' Username or email address '  },{xtype: ' TextField ', Name: ' Password ', Labelwidth:50,inputtype: ' Password ',     Fieldlabel: ' Secret  code ', Allowblank:false,emptytext: ' Please enter your password '  } '}],    buttons: [{    name: ' Registbutton ',     text: ' User registration ', glyph: ' [email protected] '  },{    name: ' Loginbutton ',    text: ' User login ', glyph: ' [email Protected] ', Region: ' Center ', listeners:{click  : ' Onloginbtnclick '//clicking Event Call the Onloginbtnclick function in Loginconroller.js}  }]  });

Logincontroller.js

Ext.define (' OaSystem.view.login.LoginController ', {extend: ' Ext.app.ViewController ', alias: ' Controller.login ', User Login button Event handling onloginbtnclick:function () {var form = this.lookupreference (' form '); if (Form.isvalid ()) {this. Login ({data:form.getValues (), scope:this,success: ' onloginsuccess ', failure: ' Onloginfailure '})}}, Onloginfailure:    function () {//do something Ext.getbody (). unmask (); }, Onloginsuccess:function (LogName, Logpass) {console.log (' login successful, user name: ' + logname '); Console.log (' Login successful, password: ' + logpass)        ;        This.fireviewevent (' login ', logname);       var org = this.lookupreference (' organization '). Getselectedrecord ();    This.fireviewevent (' Login ', This.getview (), user, org, this.loginmanager);            }, Login:function (options) {Ext.Ajax.request ({url: '/authenticate ', Method: ' GET ', Params:options.data, Scope:this, Callback:this.onLoginReturn, origInal:options});    },/** applymodel:function (model) {return model && Ext.data.schema.Schema.lookupEntity (model);        },*/onloginreturn:function (options, success, response) {options = options.original;                var session = This.getsession (),//ResultSet; if (success) {Console.log (' Log in Success ');/** ResultSet = This.getmodel (). GetProxy (). Getreader (). Read (respons                            E, {recordcreator:session session.recordCreator:null}); if (resultset.getsuccess ()) {Ext.callback (options.success, Options.scope, [Resultset.getrecords () [0]]);/*/ Console.log (response);                Ext.callback (Options.success, Options.scope, [Options.data.username, Options.data.password]);            Return    }}//ext.callback (Options.failure, Options.scope, [Response, ResultSet]); }  });

Main.js

Ext.define (  ' OaSystem.view.main.Main ',  {  extend: ' Ext.container.Viewport ',  uses:[' OaSystem.view.main.region.Top ', ' OaSystem.view.main.region.Bottom '],  layout: {type: ' Border '},  ViewModel:  {type: ' main '},  items: [{xtype: ' Maintop ', Region: ' North '  },  {xtype: ' Mainbottom ', Region: ' South ', bind: ' Hello, {currentUser} '  },  {    xtype: ' Panel '      }],    initcomponent:function () {  //Set icon file, After setting, you can use the Glyph property    ext.setglyphfontfamily (' fontawesome ');    This.callparent ();  }  });

Root.js

/** * The main application controller. This was a good place to handle things like routes. * This is the controller of the main program, which is suitable for doing something like Route forwarding */ext.define (' OaSystem.controller.Root ', {extend: ' Ext.app.Controller ', uses: [' OaS Ystem.view.login.Login ', ' OaSystem.view.main.Main '],/** * Initialize event */onlaunch:function () {var session = th    Is.session = new Ext.data.Session ();  if (EXT.ISIE8) {Ext.Msg.alert (' Pro, this example does not support IE8 yo ');    Return    }; This.login = new OaSystem.view.login.Login ({session:session, listeners: {scope:th  IS, login: ' Onlogin '}});     },/** * logincontroller "Login" event callback. * @param user * @param loginmanager */onlogin:function (username, logincontroller) {This.login.destro    Y (); this.user = Username;console.log (' username: ' + username); This.showui ();  }, Showui:function () {Console.log (' Show UI started '); Show main interface this.viewport = new OaSystem.view.main.Main ({//user information passed inView ViewModel: {data: {CurrentUser:this.user}  }  }  );} });

Instance Code package: http://download.csdn.net/detail/sushengmiyan/7817549
How to use:

1. First step: Create a project name using Sencha cmd Note the input is Oasystem
The commands I use are as follows: SENCHA-SDK E:\openSrc\ext-5.0.0 generate app Oasystem E:\workspaces\myeclipse2014\csdn
If you are not sure about the command parameters of Sencha cmd, it is recommended to read http://blog.csdn.net/sushengmiyan/article/details/38313537

2. Step Two: Build the application using the Sencha App Build command, and use the Sencha Web start test for success.
Suggested Reading First: http://blog.csdn.net/sushengmiyan/article/details/38331347

3. Remove all the app folders from the newly created directory, unzip the downloaded compressed files, unzip them directly to the project directory, and rebuild the build run.

[ExtJS5 Study notes] 11th EXTJS5MVVM mode System Login Instance