Значение по умолчанию не устанавливается для значений формы ExtJs

Question

Я, должно быть, делаю что-то не так, но значение по умолчанию не устанавливается для следующей формы ExtJs:

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");

Ключом является defaultType. Если для defaultType установлено значение 'checkbox', флажки будут отмечены соответствующим образом. Если для defaultType установлено значение «текстовое поле», текстовые поля заполняются. Есть идеи, что я делаю не так?

Answer 1

Я считаю, что вы должны явно указать параметр конфигурации xtype:checkbox для элементов-флажков в вашей форме.

Цитата из Документация по ExtJS API :

Если xtype явно не указан указан, defaultType для этого Контейнер используется.

Answer 2

inputType не подходит для этого. xtype будет более подходящим (и это то, к чему относится defaultType). Если вы читаете документы для FormPanel.defaultType:

"По умолчанию xtype ребенка Компоненты ... "

Возможно, конфигурация на самом деле должна быть defaultXType, чтобы быть более точной ... В любом случае, хотя inputType технически является допустимой конфигурацией, это фактически своего рода конфигурация более низкого уровня, используемая для прямого изменения атрибута типа HTML поля ( обычно не используется). Таким образом, в вашем коде вы на самом деле создаете флажки Компоненты, но затем изменяете их атрибуты типа HTML, а это не то, чего ожидает Ext. Вместо этого переключитесь на xtype для всех полей, и все должно работать так, как вы ожидаете.

Answer 3

РЕДАКТИРОВАТЬ: использовать xtype вместо создания элементов управления в массиве items.См. Принятый ответ выше.

Похоже, для вашего удобства предусмотрен параметр конфигурации defaultType: он позволяет вам указывать объект конфигурации в массиве элементов вместо "экземпляра компонента".Это означает, что вам нужно явно создавать другие виды элементов управления в вашем массиве items.См. Документацию API для FormPanel .

Попробуйте:

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

Я основываюсь на документации Ext 3.3, поэтому вам нужно будет настроить версию, которую вы используете.