javascript - ExtJS: Automatically resize form fields on window resize - Stack Overflow

admin管理员组

文章数量:1278979

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

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

• javascript
• extjs

Share Improve this question Follow asked Nov 11, 2009 at 6:01 Sergey StolyarovSergey Stolyarov 2,66733 gold badges2929 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

See the "anchor" property on "Component":

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

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

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

本文标签： javascriptExtJS Automatically resize form fields on window resizeStack Overflow