2010-11-15 112 views
2

我必须做一些完全错误的,但默认值是没有得到以下ExtJS的形式设置:默认值是没有得到设置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: '[email protected]' 
      },{ 
       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设置为“复选框”,则复选框会被正确检查。如果我将defaultType设置为'textfield',则会填充文本字段。任何想法我做错了什么?

回答

2

我相信你必须明确定义表单上的复选框项目xtype:checkbox配置选项。从ExtJS API Documentation

报价:

如果是的xtype没有明确指定 ,用于该 容器中的缺省的类型。

+0

这是正确的,但我仍然不知道为什么。这些控件都呈现正确,他们只是没有得到默认值设置。无论如何,默认为textfield并指定xtype = checkbox,而不是inputType = checkbox解决了问题。 – ConsultUtah 2010-11-15 15:10:03

+0

请参阅我的回答以澄清此问题。 – 2010-11-18 06:15:01

0

编辑:使用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 */ 
     } 
    ], 

我立足这一关的分机3.3文件,所以您需要调整您正在使用的版本。

+0

没有必要通过这样的参照创建组件。 OP的问题在于使用'inputType'而不是正确的'xtype'。 – 2010-11-18 06:15:59

+0

好点。我更新了我的回复。 – lawnsea 2010-11-18 17:04:11

2

inputType不是适当的配置。 xtype会更合适(是什么defaultType适用)。如果你读了FormPanel.defaultType文档:

“的默认的xtype孩子的 组件......”

也许配置实际上应该是defaultXType更精确...无论如何,而inputType在技术上是一个有效的配置,它实际上是那种用于直接修改字段的HTML类型的属性(它不常用)水平较低的配置。因此,在您的代码中,您实际上正在创建复选框组件,但随后更改了它们的HTML类型属性,这不是Ext所期望的。切换到xtype,而不是对所有字段和你所期望的一切应该工作。