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设置为“textfield”，则会填充文本字段。我有什么想法我做错了吗？

Answer 1

我认为您必须为表单上的复选框项明确定义xtype:checkbox配置选项。

引自ExtJS API Documentation：

如果没有明确表示xtype 指定的，默认类型使用容器。

Answer 2

inputType不适合此配置。 xtype会更合适（并且defaultType适用于此）。如果您阅读了FormPanel.defaultType的文档：

“孩子的默认 xtype 部件...“

也许配置实际上应该defaultXType更精确......无论如何，虽然inputType在技术上是一个有效的配置，但它实际上是一种用于直接修改字段HTML的低级配置type属性（它不常用）。因此，在您的代码中，您实际上是创建复选框组件，然后更改其HTML类型属性，这不是Ext所期望的。切换到xtype代替所有字段，一切都应该按预期工作。

Answer 3

编辑：使用xtype而不是构建items数组中的控件。见上面接受的答案。

看起来defaultType配置参数是为了您的方便而提供的：它允许您在items数组中提供配置对象而不是“实例化组件”。这意味着您需要在items数组中明确创建其他类型的控件。请参阅FormPanel的API文档。

试试这个：

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

我的基础是Ext 3.3文档，所以你需要调整你正在使用的版本。

ExtJs表单值未设置默认值

3 个答案: