javascript - ExtJs FormPanel - 如何使用内联声明的按钮提交表单？

Question

我开始使用 ExtJs。我正在构建一个非常简单的登录表单:

Ext.onReady(function () {

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var loginForm = new Ext.form.FormPanel({
        url: '/Account/Login',
        monitorValid: true,
        labelWidth: 75,
        frame: true,
        title: 'Login',
        width: 250,
        defaultType: 'textfield',
        defaults: { allowBlank: false },

        items:
        [{ fieldLabel: 'Username', name: 'username' },
        { fieldLabel: 'Password', name: 'password', inputType: 'password'}],

        buttons:
        [{
            text: 'Login',
            formBind: true,
            handler: function (btn, evt) { /* how do i submit the form? */ }
        }]

    });

    loginForm.render(document.body);
    loginForm.el.center();
});

正如您在登录按钮的处理函数中看到的那样，我不太确定如何提交表单。我一直在仔细阅读 API 文档，并找到了一些有关使用 FormPanel 的内部 BasicForm 提交方法的信息，但我不太确定如何获取它。我错过了什么？

Answer 1

这个有效:

Ext.onReady(function () {

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var loginForm = new Ext.form.FormPanel({
        url: '/Account/Login',
        monitorValid: true,
        labelWidth: 75,
        frame: true,
        title: 'Login',
        width: 250,
        defaultType: 'textfield',
        defaults: { allowBlank: false },

        items: [
            { fieldLabel: 'Username', name: 'username' },
            { fieldLabel: 'Password', name: 'password', inputType: 'password'}
        ],

        buttons: [
            {
                text: 'Login',
                formBind: true,
                handler: function (btn, evt) { loginForm.getForm().submit(); }
            }
        ]
    });

    loginForm.render(document.body);
    loginForm.el.center();
});

一开始我没有这样做，因为在构建对象时引用 formPanel 变量感觉很奇怪，但我认为在回调函数中这样做是可以的。