Set form field values in ExtJS
Posted
by jeremib
on Stack Overflow
See other posts from Stack Overflow
or by jeremib
Published on 2010-03-14T18:58:50Z
Indexed on
2010/03/14
19:25 UTC
Read the original article
Hit count: 750
JavaScript
|extjs
I'm using ExtJS to create a 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
© Stack Overflow or respective owner