[ExtJS5學習筆記]第十一節 Extjs5MVVM模式下系統登錄實例 · 利劍Extjs5

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38815923](http://blog.csdn.net/sushengmiyan/article/details/38815923) 實例代碼下載地址：?[http://download.csdn.net/detail/sushengmiyan/7817549](http://download.csdn.net/detail/sushengmiyan/7817549) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 暫時完成效果圖如下： 1.登錄界面 ![](https://box.kancloud.cn/2016-02-03_56b214e913dcb.jpg) 輸入任意用戶名與密碼（暫時沒有設置登錄驗證等，后期添加），點擊用戶登錄進入主頁面 ![](https://box.kancloud.cn/2016-02-03_56b214e922061.jpg) 在左下角，顯示了你剛才輸入的用戶名，實現了數據的傳輸。代碼模塊展示如下： app.js ~~~ /* * This file is generated and updated by Sencha Cmd. You can edit this file as * needed for your application, but these edits will have to be merged by * Sencha Cmd when upgrading. */ Ext.application({ name: 'oaSystem', extend: 'oaSystem.Application', //autoCreateViewport: 'oaSystem.view.main.Main', //------------------------------------------------------------------------- // Most customizations should be made to oaSystem.Application. If you need to // customize this file, doing so below this section reduces the likelihood // of merge conflicts when upgrading to new versions of Sencha Cmd. //------------------------------------------------------------------------- }); ~~~ application.js ~~~ /** * The main application class. An instance of this class is created by app.js when it calls * Ext.application(). This is 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 () { // TODO - Launch the application //服務器傀儡，模擬真實世界中服務器交換 //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: '用戶登錄---OA辦公系統', glyph: 'xf007@FontAwesome', items:[{ xtype:'form',//父窗體 reference: 'form', bodyPadding: 20, items:[{ xtype: 'textfield', name: 'username', labelWidth: 50, fieldLabel: '用戶名', allowBlank: false, emptyText: '用戶名或郵箱地址' },{ xtype: 'textfield', name: 'password', labelWidth: 50, inputType: 'password', fieldLabel: '密碼', allowBlank: false, emptyText: '請輸入您的密碼' }] }], buttons: [{ name: 'registbutton', text: '用戶注冊', glyph: 'xf118@FontAwesome' },{ name: 'loginbutton', text: '用戶登錄', glyph: 'xf110@FontAwesome', region: 'center', listeners:{ click: 'onLoginbtnClick'//單擊事件調用LoginConroller.js中的onLoginbtnClick函數 } }] } ); ~~~ logincontroller.js ~~~ Ext.define( 'oaSystem.view.login.LoginController', { extend: 'Ext.app.ViewController', alias: 'controller.login', //用戶登錄按鈕事件處理 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('登錄成功，用戶名： ' + logname); console.log('登錄成功，密碼： ' + 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(response, { 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: '你好，{currentUser}' }, { xtype: 'panel' }], initComponent: function(){ //設置圖標文件，設置后可以使用glyph屬性 Ext.setGlyphFontFamily('FontAwesome'); this.callParent(); } } ); ~~~ root.js ~~~ /** * The main application controller. This is a good place to handle things like routes. * 這是主程序的控制器，這里適合做類似路由轉發這樣的事情 */ Ext.define('oaSystem.controller.Root', { extend: 'Ext.app.Controller', uses: ['oaSystem.view.login.Login','oaSystem.view.main.Main'], /** * 初始化事件 */ onLaunch: function () { var session = this.session = new Ext.data.Session(); if (Ext.isIE8) { Ext.Msg.alert('親，本例子不支持IE8喲'); return; }; this.login = new oaSystem.view.login.Login({ session: session, listeners: { scope: this, login: 'onLogin' }}); }, /** * logincontroller 的 "login" 事件回調. * @param user * @param loginManager */ onLogin: function (username, loginController) { this.login.destroy(); this.user = username; console.log('username: ' + username); this.showUI(); }, showUI: function(){ console.log('show ui started'); //顯示主界面 this.viewport = new oaSystem.view.main.Main( { //用戶信息傳入視圖 viewModel: { data: { currentUser: this.user } } } ); } }); ~~~ 實例代碼打包下載地址：[http://download.csdn.net/detail/sushengmiyan/7817549](http://download.csdn.net/detail/sushengmiyan/7817549) 使用方法： 1.第一步：使用sencha cmd 創建項目名稱需要注意輸入為oaSystem ?我使用的命令如下：sencha -sdk ?E:\openSrc\ext-5.0.0 generate app oaSystem E:\workspaces\myeclipse2014\csdn 如果不太清楚sencha cmd的命令參數，建議先閱讀 http://blog.csdn.net/sushengmiyan/article/details/38313537 2.第二步：使用sencha app build 命令構建應用程序，使用sencha web start 測試是否成功。建議先閱讀：http://blog.csdn.net/sushengmiyan/article/details/38331347 3.將剛才新建目錄下的app文件夾全部刪除，將下載的壓縮文件解壓縮，直接解壓縮到項目目錄即可，重新build運行。