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',
            },{
                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

jeremib
  • 741
  • 2
  • 7
  • 17

3 Answers3

25

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
  • 82,642
  • 24
  • 155
  • 189
  • 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). – Brian Moeskau Mar 15 '10 at 00:16
  • @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 Mar 15 '10 at 07:47
  • 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. – Brian Moeskau Mar 15 '10 at 08:47
  • @bmoeskau: I recommend against giving each field an id if not necessary. Id has to be unique across whole page. This is problem if you need to create more instances of the same component\form (for example multiple "detail forms" in tab panel). btw Sencha recommends the same - see Ext.Component.id config docs... – Michal Levý Jul 24 '14 at 07:55
  • @MichalLevý Agreed. 4 years ago was a different story. Things change. In fact, the recommended method `findField` no longer even exists on the public API (not sure if it's in the code still). The correct answer (today, maybe not in another 4 years) is to use the various other methods like `find()`, `findBy()`, `findByType()` etc. – Brian Moeskau Jul 25 '14 at 15:20
  • @bmoeskau `findField` is still present in `Ext.form.BasicForm` public API (ExtJS version 4.2) and method argument can be field name **or** field `id`. So the anwers still applies. My recommendation against using `id`s is made from the reusability and maintainability point of view... – Michal Levý Jul 26 '14 at 11:38
  • Yes, again, totally agreed that ids and Ext.getCmp() are no longer recommended practices. – Brian Moeskau Jul 28 '14 at 05:07
22

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

eg:

Ext.getCmp('formname').getForm().setValues({
fielda: 'value1', 
fieldb: 'value2' 
})
Jason
  • 1,163
  • 7
  • 10
3

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
  • 287
  • 3
  • 12