[ExtJS5學習筆記]第十一節 Extjs5MVVM模式下系統登入執行個體

標籤：des   style   blog   http   color   java   os   使用   io   

本文地址：

本文sushengmiyan

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

暫時完成如下：

1.登入介面

輸入任意使用者名稱與密碼（暫時沒有設定登入驗證等，後期添加），點擊使用者登入進入首頁面

在左下角，顯示了你剛才輸入的使用者名稱，實現了資料的傳輸。

代碼模組展示如下：

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: '[email protected]',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: '[email protected]'  },{    name: 'loginbutton',    text: '使用者登入',glyph: '[email protected]',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
使用方法：

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運行。

[ExtJS5學習筆記]第十一節 Extjs5MVVM模式下系統登入執行個體