[ExtJS5學習筆記]第十一節 Extjs5MVVM模式下系統登陸實例

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38815923

實例代碼下載地址： http://download.csdn.net/detail/sushengmiyan/7817549

本文做者：sushengmiyan

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

臨時完畢效果圖例如如下：

1.登陸界面

輸入隨意username與password（臨時沒有設置登陸驗證等，後期加入）。點擊用戶登陸進入主頁面

在左下角，顯示了你剛纔輸入的username，實現了數據的傳輸。

代碼模塊展演示樣例如如下：

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
		//server傀儡，模擬真實世界中server交換
		//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: 'username',
			allowBlank: false,
			emptyText: 'username或郵箱地址'
		  },{
			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',

   //用戶登陸button事件處理
   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執行。