在ExtJS中设置表单字段的值

Question

我正在使用ExtJS创建一个formPanel：

new Ext.FormPanel({
    labelAlign: 'top',
    title: 'Loading Contact...',
    bodyStyle:'padding:5px',
    width: 600,
    autoScroll: true,
    closable: true,
    items: [{
        layout:'column',
        border:false,
        items:[{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [{
                xtype:'textfield',
                fieldLabel: 'First Name',
                name: 'first_name',
                id: 'first_name',
                anchor:'95%'
            }, {
                xtype:'datefield',
                fieldLabel: 'Birthdate',
                name: 'birthdate',
                width: 150,
            }]
        },{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [{
                xtype:'textfield',
                fieldLabel: 'Last Name',
                name: 'last_name',
                anchor:'95%'
            },{
                xtype:'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email',
                anchor:'95%'
            }]
        }]
    },{
        xtype:'tabpanel',
        plain:true,
        activeTab: 0,
        height:300,
        /*
         * By turning off deferred rendering we are guaranteeing that the
         * form fields within tabs that are not activated will still be
         * rendered. This is often important when creating multi-tabbed
         * forms.
         */
        deferredRender: false,
        defaults:{bodyStyle:'padding:10px'},
        items:[{
            title:'Address',
            layout:'form',
            defaults: {width: 230},
            defaultType: 'textfield',

            items: [{
                fieldLabel: 'Line1',
                name: 'line1',
                allowBlank:false,
            },{
                fieldLabel: 'Line2',
                name: 'line2',
            },{
                fieldLabel: 'City',
                name: 'city',
                allowBlank: false,
            },{
                xtype:"combo",
                fieldLabel:"State",
                name:"state",
                hiddenName:"combovalue"
              }, {
                fieldLabel: 'Zipcode',
                name: 'zipcode',
                allowBlank: false,
            }]
        },{
            title:'Phone Numbers',
            layout:'form',
            defaults: {width: 230},
            defaultType: 'textfield',

            items: [{
                fieldLabel: 'Home',
                name: 'home_phone',
            },{
                fieldLabel: 'Cell',
                name: 'cell_phone'
            },{
                fieldLabel: 'Emergency',
                name: 'emergency_phone'
            }]
        },{
            cls:'x-plain',
            title:'Notes',
            layout:'fit',
            items: {
                xtype:'htmleditor',
                name:'notes',
                fieldLabel:'Notes'
            }
        }]
    }],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
})

我如何通过名称访问表单字段以手动设置其值？谢谢

- jeremib

Answer 1

这很容易：

• 获取表单面板（顺便提一下，它是Ext.form.FormPanel而不仅仅是Ext.FormPanel）：

  var formPanel = new Ext.form.FormPanel({...});
  

• 获取底层的 Ext.form.BasicForm

var form = formPanel.getForm();

你可以使用findField(name)通过表单字段名称来检索它们：

var cellField = form.findField('cell_phone');

- Stefan Gehrig

---

将每个字段赋予一个 id 并执行 Ext.getCmp('cell_phone') 会更加简单。这样做也会更快（直接哈希查找而不是每次内部循环）。 - Brian Moeskau

@bmoeskau：如果不必要，我建议不要给每个字段分配一个id。id必须在整个页面上是唯一的。如果您需要创建同一组件/表单的更多实例（例如选项卡面板中的多个“详细表单”），这将是一个问题。顺便说一句，Sencha也建议这样做-请参阅Ext.Component.id配置文档... - Michal Levý

@MichalLevý 同意。4年前的情况是不同的。事情会变化。实际上，推荐的方法findField在公共API中已经不存在了（不确定它是否仍然存在于代码中）。正确的答案（今天，也许另外4年就不一定了）是使用其他各种方法，如find()、findBy()、findByType()等。 - Brian Moeskau

@bmoeskau，“findField”仍然存在于“Ext.form.BasicForm”公共API中（ExtJS版本4.2），方法参数可以是字段名称或字段“id”。因此，答案仍然适用。我建议不要使用“id”的原因是出于可重用性和可维护性的考虑... - Michal Levý

是的，再次确认，使用 ids 和 Ext.getCmp() 已不再是推荐的做法。 - Brian Moeskau

Answer 2

你还可以使用setValues()方法批量设置它们。

例如：

Ext.getCmp('formname').getForm().setValues({
fielda: 'value1', 
fieldb: 'value2' 
})

- Jason

Answer 3

很好！对我有帮助 :D

但是你可以设置默认值:

...
items: [{
xtype:'textfield',
fieldLabel: '名字',
name: 'first_name',
id: 'first_name',
value: '一些值',
anchor:'95%'
},
...

- renedet