【工作笔记】从零开始学ExtJs6（二）——登录模块

题外话

上章，已经有一个项目框架了。大概是这个样子



app/store ： stores文件

app/model : models文件

classic 桌面端文件 modern 手机端文件

classic/view： viewController viewModel以及view文件

override：重写组件

sass：全局样式

app.js ： 入口

app.json : 文件属性配置

application.js 启动加载

登录模块的实现

文件结构如下



① 注释掉app.js中的mainview

//mainView: 'report.view.main.Main'

② Application.js中增加

views: [
'report.view.login.LoginForm',
'report.view.main.Main'
],
launch: function () {
// It's important to note that this type of application could use
// any type of storage, i.e., Cookies, LocalStorage, etc.
var loggedIn;

// Check to see the current value of the localStorage key
loggedIn = localStorage.getItem("isLogin");

// This ternary operator determines the value of the TutorialLoggedIn key.
// If TutorialLoggedIn isn't true, we display the login window,
// otherwise, we display the main view
Ext.create({
xtype: loggedIn ? 'app-main' : 'login'
});
},

③ LoginForm.js 内容

Ext.define('report.view.login.LoginForm', {
requires: ['report.controller.login.LoginController','Ext.form.Panel'], //处理登录事件
extend: 'Ext.window.Window', //登录窗体
xtype: 'login',
controller: 'login', //设置控制器（别名alias）
//True to make the floated component modal and mask everything behind it when displayed,
// false to display it without restricting access to other UI elements.

//draggable: false, 不可拖放
title: 'XX报表系统',

closable: false, //不可关闭
resizable: false, //不可伸缩
autoShow: true,//自动显示
modal: true, //隐藏其他组件
//glyph: 'xf007@FontAwesome', //字体
//容器中需要存放的元素：可以是表单，也可以是面板，表格等
items: [{
xtype: 'form',//xtype 容器类型 form 表单类型
//Specifies a name for this component inside its component hierarchy
//（This name must be unique within its view or its Ext.app.ViewCont...）
reference: 'form', //指定组件层级
bodyPadding: 20, //行边距
items: [{
//<label for="用户名" width="50"></label>
//<input type="text" name="userName" placeholder="用户名"/>
xtype: 'textfield',
name: 'userName',
labelWidth: 50,
fieldLabel: '用户名',
allowBlank: false,
emptyText: '请输入员工账号'
}, {
xtype: 'textfield',
name: 'password',
labelWidth: 50,
inputType: 'password',
fieldLabel: '密  码',
allowBlank: false,
emptyText: '请输入员工密码',
enableKeyEvents: true, //触发事件（如果为false，不能点击任何事件） 与listeners对应
scope:this,//default scope (this pointer)
listeners:{
//监听回车
specialkey:function(field,e){
if (e.getKey()==Ext.EventObject.ENTER){
//up 得到dom(window)
//lookupReference 得到component的引用
//触发自定义事件
this.up('window').lookupReference('loginbutton').fireEvent('click');
//this.up('window').lookupReference('loginbutton').click();
}
}
}
}]
}],
buttons: [{
name: 'loginbutton',
text: '登 录',
glyph: 'xf110@FontAwesome',
region: 'center',
reference:'loginbutton',//通过lookupReference找到
listeners: { //监听事件
click: 'onLoginClick'//单击事件 调用LoginConroller.js中的onLoginbtnClick函数
}
}, {
name: 'registbutton',
text: '重 置',
glyph: 'xf118@FontAwesome',
listeners: {
click: 'onRest'//单击事件 调用LoginConroller.js中的onLoginbtnClick函数
}
}]
});

④ LoginController.js

Ext.define("report.controller.login.LoginController",{
extend: 'Ext.app.ViewController',
alias: 'controller.login',

onLoginClick: function() {

// This would be the ideal location to verify the user's credentials via
// a server-side lookup. We'll just move forward for the sake of this example.
// Set the localStorage value to true
localStorage.setItem("isLogin", true);

// Remove Login Window
this.getView().destroy();

// Add the main view to the viewport
Ext.create({
xtype: 'app-main'
});

}

})