Javascript 在 ExtJS 中设置表单字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2443330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set form field values in ExtJS
提问by jeremib
I'm using ExtJS to create a formPanel:
我正在使用 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'
}]
})
How do I access the form fields by the name to set their value manually? Thanks
如何按名称访问表单字段以手动设置其值？谢谢
回答by Stefan Gehrig
It's quite easy:
这很容易：
get hands on the form-panel (by the way it's
Ext.form.FormPaneland not justExt.FormPanel):var formPanel = new Ext.form.FormPanel({...});get the underlying
Ext.form.BasicFormvar form = formPanel.getForm();you then can use
findField(name)to retrieve your form fields by their names:var cellField = form.findField('cell_phone');
接触表单面板（顺便说一下，它
Ext.form.FormPanel不仅仅是Ext.FormPanel）：var formPanel = new Ext.form.FormPanel({...});得到底层
Ext.form.BasicFormvar form = formPanel.getForm();然后，您可以使用
findField(name)它们的名称检索表单字段：var cellField = form.findField('cell_phone');
回答by Jason
You can also set them in bulk by using the setValues() method.
您还可以使用 setValues() 方法批量设置它们。
eg:
例如：
Ext.getCmp('formname').getForm().setValues({
fielda: 'value1',
fieldb: 'value2'
})
回答by renedet
Nice! worked for me :D
好的！为我工作：D
But you can set default value:
但是您可以设置默认值：
...
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first_name',
id: 'first_name',
value: 'somevalue',
anchor:'95%'
},
...
...
项目：[{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first_name',
id: 'first_name',
value: 'somevalue',
anchor:'95%'
},
...
