views:

3337

answers:

3

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

+2  A: 

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');
    
Stefan Gehrig
Thanks, that was easy.
jeremib
It's much easier to simply give each field an id and do `Ext.getCmp('cell_phone');`. It's also faster (direct hash lookup instead of an internal loop each time).
bmoeskau
@bmoeskau: That's correct only in case you apply an `id` to your form fields. `Ext.getCmp()` (which is a shortcut to `Ext.ComponentMgr.get()`) is only able to retrieve components by their ids. Using the code the OP presented, `Ext.getCmp('cell_phone');` won't work.
Stefan Gehrig
Um, yeah I know. My recommendation was to use id instead of relying only on name (which is why I said "give each field an id..."), for the reasons I mentioned. Either way will work fine, but using id is usually simpler to deal with.
bmoeskau
Oops - sorry, I over read that part about assigning ids.
Stefan Gehrig
+1  A: 

You can also set them in bulk by using the setValues() method.

eg:

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

Nice! worked for me :D

But you can set default value:

...
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first_name',
id: 'first_name',
value: 'somevalue',
anchor:'95%'
},
...

renedet