CODEWITHSUNDEEP
javascriptextjs
Sergey Stolyarov
Sergey Stolyarov

Reputation: 2667

ExtJS: Automatically resize form fields on window resize

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()

Upvotes: 6

Views: 17911

Answers (3)

RageZ
RageZ

Reputation: 27323

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

Upvotes: 1

Alan
Alan

Reputation: 1208

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

Upvotes: 4

richardtallent
richardtallent

Reputation: 35404

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.)

Upvotes: 0

Related Questions