I'm getting started with ExtJs. I'm building a very simple login form:

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();
});

As you can see in the login button's handler function, I'm not quite sure how to submit the form. I have been pouring through the API documentation and have found some information about using the FormPanel's internal BasicForm submit method, but I'm not quite sure how to get at it. What am I missing?

I'm getting started with ExtJs. I'm building a very simple login form:

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();
});

As you can see in the login button's handler function, I'm not quite sure how to submit the form. I have been pouring through the API documentation and have found some information about using the FormPanel's internal BasicForm submit method, but I'm not quite sure how to get at it. What am I missing?

• javascript
• html
• http
• extjs

1 Answer 1

This works:

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();
});

I didn't do this at first because referencing the formPanel variable while building the object felt weird, but I think it's ok to do it within a callback function.