javascript - ExtJs FormPanel - How to submit form using buttons declared inline? - Stack Overflow

admin管理员组

文章数量:1356905

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

Share Improve this question Follow asked Oct 5, 2010 at 16:34 Ronnie OverbyRonnie Overby 46.5k7474 gold badges272272 silver badges350350 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptExtJs FormPanelHow to submit form using buttons declared inlineStack Overflow