題外話

上章，已經有一個專案框架了。大概是這個樣子

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'
        });

    }

})