【工作笔记】从零开始学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'
        });

    }

})