Question

我创建了Ext.Window，里面有一些Ext.form字段。但是当我调整窗口大小时，元素仍然具有初始宽度和高度。

是否需要在窗口调整大小时显式调整表单字段的大小？或者有一些选项可以自动调整表单字段的大小？

示例代码：

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

你可以查看锚定，这可以形成可调整大小的形式：

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

请参阅“组件”上的“锚点”属性：

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

Answer 2

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

会这样做。您可以看到一些示例there和文档there。

另外，如果您不想为每个指定大小，可以使用defaults配置对象从表单面板中推送默认值

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

Answer 3

我怀疑FormPanel“fp”部分有问题。

在Ext JS中，通常最好从Ext.Window构造函数中的窗口一直声明所有内容。创造事物并试图在以后添加它们对我来说是非常沮丧的原因。

（好吧，关于宽度的另一个答案：100％可能更好。但是，当我没有立即宣布所有内容时，我在调整大小等方面遇到了很多问题...还没有确切地知道什么时候这样做还可以。）

ExtJS：在窗口调整大小时自动调整表单字段的大小

3 个答案: