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

题外话

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

1. app/store ： stores文件
2. app/model : models文件
3. classic 桌面端文件 modern 手机端文件
4. classic/view： viewController viewModel以及view文件
5. override：重写组件
6. sass：全局样式
7. app.js ： 入口
8. app.json : 文件属性配置
9. 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'        });    }})