Default value isn't getting set for ExtJs Form Values

Question

I must be doing something completely wrong, but the default value isn't getting set for the following ExtJs form:

var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        title: 'Edit User',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'checkbox'
        items: [{
                inputType: 'textfield',
                fieldLabel: 'Email',
                name: 'user[email]',
                id: 'user_email',
                vtype: 'email',
                value: 'user@domain.com'
            },{
                inputType: 'password',
                fieldLabel: 'Password',
                name: 'user[password]',
                id: 'user_password',
                allowBlank: false,
                value: 'password'
            },{
                inputType: 'checkbox',
                boxLabel: 'Is One',
                labelSeparator: '',
                name: 'user[is_one]',
                checked: true
            },{
                inputType: 'checkbox',
                boxLabel: 'Is Two',
                labelSeparator: '',
                name: 'user[is_two]',
                checked: true
            },{
                inputType: 'hidden',
                name: 'authenticity_token',
                value: '<%= form_authenticity_token %>'
            },{
                inputType: 'hidden',
                name: '_method',
                value: 'put'
            }

        ],

        buttons: [{
            text: 'Save',
            handler: function(){
                if(simple.getForm().isValid()){
                    simple.getForm().submit({
                        url: '/users/<%= @user.id %>',
                        waitMsg: 'Saving...',
                        success: function(simple, o){
                            msg('Success', 'done');
                        }
                    });
                }
            }
        },{
            text: 'Cancel'
        }]
    });

    simple.render("user-form");

The defaultType seems to be the key. If I have defaultType set to 'checkbox', the checkboxes get checked appropriately. If I have defaultType set to 'textfield', the text fields get populated. Any ideas what I am doing wrong?

Answer 1

EDIT: use xtype instead of constructing the controls in the items array. See accepted answer above.

Looks like the defaultType config parameter is provided for your convenience: it allows you to supply a config object in the items array instead of an "instantiated Component". This means that you'll need to explicitly create other kinds of controls in your items array. See the API documentation for FormPanel.

Try this:

var simple = new Ext.FormPanel({
    /* snip */
    defaultType: 'checkbox',
    items: [
        new Ext.form.TextField({
                fieldLabel: 'Email',
                /* snip */
            }),
        {
            boxLabel: 'Is One',
            /* snip */
        }
    ],

I'm basing this off of the Ext 3.3 documentation, so you'll need to adjust for the version you're using.

Answer 2

inputType is not the appropriate config for this. xtype would be more appropriate (and is what defaultType applies to). If you read the docs for FormPanel.defaultType:

"The default xtype of child Components..."

Perhaps the config should actually be defaultXType to be more precise... Anyway, while inputType is technically a valid config, it's actually sort of a lower level config used to directly modify the field's HTML type attribute (it's not commonly used). So in your code you are actually creating checkbox Components but then altering their HTML type attributes, which is not what Ext is expecting. Switch to xtype instead for all fields and everything should work as you expect.

Answer 3

I believe you must explicitly define the xtype:checkbox config option for the checkbox items on your form.

Quote from ExtJS API Documentation:

If an xtype is not explicitly specified, the defaultType for that Container is used.