EXTJS 传递表单字段并为控制器中的变量赋值

Question

我正在尝试创建一个模拟对服务器的调用和 "authenticates" 用户信息的登录表单。

这是我的 Login.js 代码。这是我创建的表格：

Ext.define("ies.view.login.Login",{
extend: 'Ext.window.Window',
    xtype: 'login',

requires: [
    'ies.view.login.LoginController',
    'Ext.form.Panel'
],

controller: 'login',
bodyPadding: 60,
draggable: false,
title: 'Login Window',
closable: false,
autoShow: true,

items: {
    xtype: 'form',
    reference: 'form',
    itemId: 'LogInForm',
    method: 'post',
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        itemId: 'username',
        allowBlank: false
    }, {
        xtype: 'textfield',
        name: 'password',
        itemId: 'passwords',
        inputType: 'password',
        fieldLabel: 'Password',
        allowBlank: false
    }, {
        xtype: 'displayfield',
        hideEmptyLabel: false,
        value: 'Enter any non-blank password'
    }],
    buttons: [{
        text: 'Login',
        formBind: true,
        itemId: 'submit',
        listeners: {
            click: 'onLoginClick'
        }
    }],


}
});

这是我的控制器代码：

Ext.define('ies.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.login',
    onLoginClick: function(){
        //var username = form.down('textfield[name=username]').getValue();
        //var password = form.down('textfield[name=password]').getValue();
        //get form field values
        var username = this.lookupReference('username');
        var password = this.lookupReference('password');
        console.log(username + ' ' + password);
        // 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.

/********************************************/
if ((username === 'carol' || username === 'denise' || username === 'coley' || username === 'yegappan' || username === 'julie' || username === 'dawn' || username === 'yvonne' || username === 'chuck' || username === 'belinda' || username === 'atlante' || username === 'blake' || username === 'ernie' || username === 'Patrick.Dwyer') && password === 'password1'){
/********************************************/


        // Set the localStorage value to true
        localStorage.setItem("TutorialLoggedIn", true);
        console.log("Atuthenticated");

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

        // Add the main view to the viewport
        Ext.widget('app-main');
    } else {
        document.getElementById("displayfield-1014-inputEl").innerHTML = "Authentication Failed";
        console.log("Not authenticated");
    }
    }
});

我不确定如何传递表单字段并将它们分配给控制器代码中的用户名和密码变量。非常感谢所有帮助。谢谢！

我正在使用 EXTJS v 5.1

Answer 1

name 和 itemId 与此处无关。相反，将 reference 属性与 lookupReference.

结合使用

EXTJS 传递表单字段并为控制器中的变量赋值

EXTJS Passing Form Fields and Assigning Values to Variables in Controller

javascript

extjs5