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变量感觉很奇怪,但我认为可以在回调函数中执行它.