Question

我正在尝试创建一个模仿对服务器的调用的登录表单，并且＆＃34;验证＆＃34;用户信息。

这是我的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传递表单字段并将值分配给控制器中的变量

1 个答案: