[ExtJS5学习笔记]第十一节Extjs5MVVM模式下系统登录实例

本文地址：

本文作者：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: &＃39;oaSystem&＃39;,

    extend: &＃39;oaSystem.Application&＃39;,
    
    //autoCreateViewport: &＃39;oaSystem.view.main.Main&＃39;,
	
    //-------------------------------------------------------------------------
    // 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.
    //-------------------------------------------------------------------------

});

/**
 * 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(&＃39;oaSystem.Application&＃39;, {
    extend: &＃39;Ext.app.Application&＃39;,
    
    name: &＃39;oaSystem&＃39;,
    uses:[&＃39;oaSystem.SimData&＃39;, &＃39;Ext.ux.ajax.*&＃39;],
    views: [
        // TODO: add views here
    ],

    controllers: [
        &＃39;Root&＃39;
        // TODO: add controllers here
    ],

    stores: [
        // TODO: add stores here
    ],
    
    launch: function () {
        // TODO - Launch the application
		//服务器傀儡，模拟真实世界中服务器交换
		//oaSystem.SimData.init();
		//console.log(&＃39;launch begin&＃39;);
		//this.callParent()
		Ext.ux.ajax.SimManager.init().register({
		  &＃39;/authenticate&＃39;:
		  {
			type: &＃39;json&＃39;,
			data: function(ctx){
			  return Ext.apply({}, true);
			}
		  }
		});
    }
});

Ext.define(
  &＃39;oaSystem.view.login.Login&＃39;,
  {
	requires:[&＃39;oaSystem.view.login.LoginController&＃39;],
    extend: &＃39;Ext.window.Window&＃39;,
    controller: &＃39;login&＃39;,
	closable: false,
	resizable : false,
	modal: true,
	//draggable: false,
	autoShow: true,
	title: &＃39;用户登录---OA办公系统&＃39;,
	glyph: &＃39;xf007@FontAwesome&＃39;,	
	items:[{
		xtype:&＃39;form&＃39;,//父窗体
		reference: &＃39;form&＃39;,
		bodyPadding: 20,
		items:[{
			xtype: &＃39;textfield&＃39;,
			name: &＃39;username&＃39;,
			labelWidth: 50,
		    fieldLabel: &＃39;用户名&＃39;,
			allowBlank: false,
			emptyText: &＃39;用户名或邮箱地址&＃39;
		  },{
			xtype: &＃39;textfield&＃39;,
			name: &＃39;password&＃39;,
			labelWidth: 50,
			inputType: &＃39;password&＃39;, 
		    fieldLabel: &＃39;密  码&＃39;,
			allowBlank: false,
			emptyText: &＃39;请输入您的密码&＃39;
		  }]
	}],
    buttons: [{
			    name: &＃39;registbutton&＃39;,
			    text: &＃39;用户注册&＃39;,
				glyph: &＃39;xf118@FontAwesome&＃39;
			  },{
			    name: &＃39;loginbutton&＃39;,
			    text: &＃39;用户登录&＃39;,
				glyph: &＃39;xf110@FontAwesome&＃39;,
				region: &＃39;center&＃39;,
				listeners:{
				  click: &＃39;onLoginbtnClick&＃39;//单击事件 调用LoginConroller.js中的onLoginbtnClick函数
				}
			  }]
  }
);

Ext.define(
  &＃39;oaSystem.view.login.LoginController&＃39;,
  {
    extend: &＃39;Ext.app.ViewController&＃39;,
    alias: &＃39;controller.login&＃39;,

   //用户登录按钮事件处理
   onLoginbtnClick: function(){
        var form = this.lookupReference(&＃39;form&＃39;); 
		if (form.isValid()) {
		  this.login({
			data: form.getValues(),
			scope: this,
			success: &＃39;onLoginSuccess&＃39;,
			failure: &＃39;onLoginFailure&＃39;
		})}
    },

    onLoginFailure: function() {
        // Do something
        Ext.getBody().unmask();
    },

    onLoginSuccess: function(logname, logpass) {
		console.log(&＃39;登录成功，用户名： &＃39; + logname);
		console.log(&＃39;登录成功，密  码： &＃39; + logpass);
        this.fireViewEvent(&＃39;login&＃39;, logname);
        //var org = this.lookupReference(&＃39;organization&＃39;).getSelectedRecord();
       // this.fireViewEvent(&＃39;login&＃39;, this.getView(), user, org, this.loginManager);
    },

    login: function(options) {
        Ext.Ajax.request({
            url: &＃39;/authenticate&＃39;,
            method: &＃39;GET&＃39;,
            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(&＃39;log in success&＃39;);
			/**
            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]);
    }
  }
);

Ext.define(
  &＃39;oaSystem.view.main.Main&＃39;,
  {
	  extend: &＃39;Ext.container.Viewport&＃39;,
	  uses:[&＃39;oaSystem.view.main.region.Top&＃39;, &＃39;oaSystem.view.main.region.Bottom&＃39;],
	  layout: { type: &＃39;border&＃39; },
	  viewModel: { type: &＃39;main&＃39; },
	  items: [{
			 xtype: &＃39;maintop&＃39;,
			 region: &＃39;north&＃39;
		  },
		  {
			 xtype: &＃39;mainbottom&＃39;,
			 region: &＃39;south&＃39;,
			 bind: &＃39;你好，{currentUser}&＃39;
		  },
		  {
		    xtype: &＃39;panel&＃39;
	      }],
	  
	  initComponent: function(){
	  //设置图标文件，设置后可以使用glyph属性
	    Ext.setGlyphFontFamily(&＃39;FontAwesome&＃39;);
	    this.callParent();
	  }
  }

);

/**
 * The main application controller. This is a good place to handle things like routes.
 * 这是主程序的控制器，这里适合做类似路由转发这样的事情
 */
Ext.define(&＃39;oaSystem.controller.Root&＃39;,
	{
      extend: &＃39;Ext.app.Controller&＃39;,
      uses: [&＃39;oaSystem.view.login.Login&＃39;,&＃39;oaSystem.view.main.Main&＃39;],
    /**
     * 初始化事件
     */
	  onLaunch: function () {
	    var session = this.session = new Ext.data.Session();
	    if (Ext.isIE8) {
		  Ext.Msg.alert(&＃39;亲，本例子不支持IE8哟&＃39;);
		  return;
	    };
		
	    this.login = new oaSystem.view.login.Login({
            session: session,
            listeners: {
                scope: this,
                login: &＃39;onLogin&＃39;
            }});
	  },
    /**
     * logincontroller 的 "login" 事件回调.
     * @param user
     * @param loginManager
     */
    onLogin: function (username, loginController) {
        this.login.destroy();
		this.user = username;
		console.log(&＃39;username: &＃39; + username);
		this.showUI();
    },

    showUI: function(){
	  
	  console.log(&＃39;show ui started&＃39;);	
	  //显示主界面
	  this.viewport =  new oaSystem.view.main.Main(
		  {   //用户信息传入视图         
		      viewModel: {
              data: 
			    {
                    currentUser: this.user
                }
              }
		  }
	  );
	}
  });

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