正文
[ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
本文地址：http://blog.csdn.net/sushengmiyan/article/details/38815923
实例代码下载地址： http://download.csdn.net/detail/sushengmiyan/7817549
本文作者：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: '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
使用方法：
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运行。
