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

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%' 
           }
        });

Answer 2

My suspicion is that the FormPanel "fp" is partially at fault.

In Ext JS, it is usually best practice to declare everything from the window all the way down inside the Ext.Window constructor. Creating things and trying to attach them later has been the source of much frustration for me.

(Ok, the other answer about width: 100% is likely better. But still, I've had a lot of problems with resizing, etc. when not declaring everything at once... haven't figured out exactly when it's ok to do so yet.)

Answer 3

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