Alex Rivera | Logout

Set form field values in ExtJS

Asked 2010-03-14T18:58:50.360
12

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',
  
Edit
Report

1 Answer

27

It's quite easy:

  • get hands on the form-panel (by the way it's Ext.form.FormPanel and not just Ext.FormPanel):

    var formPanel = new Ext.form.FormPanel({...});
    
  • get the underlying Ext.form.BasicForm

    var form = formPanel.getForm();
    
  • you then can use findField(name) to retrieve your form fields by their names:

    var cellField = form.findField('cell_phone');
    
answered 2010-03-14T19:16:17.967

Your Answer