ExtJS -从表单获取值(基于登录应用教程)

Question

我用正式的登录应用程序教程创建了简单的应用程序：单击此处

应用程序很好。但它没有任何密码检查，我已经决定把它搞得一团糟。这就是问题所在--如何从控制器内部定义的表单中获取值？

更准确地说，我想加入"onLoginClick“侦听器。

查看：

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

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

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

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

主计长：

Ext.define('TutorialApp.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.login',

    onLoginClick: function () {
        // get values here
    }
});

Answer 1

在onLoginClick函数中，您可以通过me.up('window').down('form').getForm()访问表单，它可以用作ajax调用(或表单提交)来验证用户：

onLoginClick: function(me) {
    var form = me.up('window').down('form').getForm();
    if (form.isValid()) {
        form.submit({
            url: 'checkcredentials.php',  // your url
            params: null, // needed for additional params
            submitEmptyText: false,  // don't post empty text in fields
            success: function(form, action) {
               Ext.Msg.alert('Success', action.result.msg);
            },
            failure: function(form, action) {
                Ext.Msg.alert('Failed', action.result.msg);
            }
        });
    }
}