ExtJS: Automatically resize form fields on window resize

Question

I've created Ext.Window with some Ext.form fields inside. But when I resize window form elements still have initial width and height.

Is it required explicitly resize form fields on window resize? Or there is some option that enables auto resize of form fields?

Sample code:

var f_1 = new Ext.form.TextField({fieldLabel: 'Label 1'});
var f_2 = new Ext.form.TextField({fieldLabel: 'Label 2'});
var fp = new Ext.form.FormPanel({items: [f_1, f_2]});

var w = new Ext.Window({
    layout: 'form',
    title: 'test',
    items: fp
});

w.show()

Answer 1

You could check out anchoring, which makes for nicely-resizable forms:

http://www.extjs.com/deploy/dev/examples/form/anchoring.html

See the "anchor" property on "Component":

http://www.extjs.com/deploy/dev/docs/?class=Ext.Component

Answer 2

var f_1 = new Ext.form.TextField({fieldLabel: 'Label 1', anchor:'95%'});

would do it. you can see some samples there and the documentation there.

Also if you don't want to specify size for each of them you can push the default from the form panel with the defaults config object

var fp = new Ext.form.FormPanel({
           items: [f_1, f_2]
           ,defaults: {
               anchor: '95%' 
           }
        });