Question

我正在尝试在ExtJS FormPanel中使用 anchor 参数。 FormPanel位于一个Window中，我希望在调整Window的大小时，textfields和textarea也会调整大小。理想情况下，直到5个像素到右边距。作为最后一个元素的textarea应该占用所有剩余的垂直空间（减去5个像素）。

我使用宽度取得了一些成功：'94％'，但我想使用锚点，因为它似乎是一个更精确的位置。

以下是我的尝试：

var formItems = [
    {
        fieldLabel: 'To',
        allowBlank: false,
        anchor: '-5'
    },
    {
        fieldLabel: 'Subject',
        allowBlank: false,
        anchor: '-5'
    },
    {
        fieldLabel: 'Message',
        xtype: 'textarea',
        allowBlank: false,
        anchor: '-5 -5'
    }
];
var form = new Ext.form.FormPanel({
    frame: true,
    labelWidth: 55,
    defaultType: 'textfield', 
    items: formItems
});
var win = new Ext.Window({
    title: 'Testing',
    width: 600,
    height: 300,
    items: form
});
win.show();

我怀疑解决方案可能是将AnchorLayout用于FormPanel，但我不确定。

更新：这是我的测试。

http://doc.obliquid.com/dev/formLayout/test1.html 使用百分比宽度和高度，调整大小可以水平工作，但不能垂直工作。

http://doc.obliquid.com/dev/formLayout/test2.html 是@owlness完全独立的建议。它主要起作用，除了一个bug：textarea实际上是在窗外。要看到这一点，只需在textarea内部输入，直到滚动条出现，您将看到它离开窗口。

http://doc.obliquid.com/dev/formLayout/test3.html 当我在我的应用程序中尝试@owlness的建议因为style.css样式表而出现在我身上。

http://doc.obliquid.com/dev/formLayout/test4.html 与没有表单{display：inline} 样式的test3.html相同。它变得越来越好。

http://doc.obliquid.com/dev/formLayout/test5.html 与test4.html相同，没有标签{margin-right：20px;} 和输入{margin-top：7px;} ，现在与test2.html相同

现在的问题是如何使textarea留在窗口，更好的是底部边缘。

更新2 ：我通过将textarea的锚点设置更改为锚点：'100％-51'来解决了textarea的问题。我通过反复试验找到了数字-51，大约是前两个字段的高度。我不是很高兴有一个神奇的数字，但它的确有效。如果有人知道更好的解决方案......

Answer 1

Ext.form.FormPanel默认使用锚布局。你需要的是Ext.Window实例上的'fit'布局，以便表单本身自动调整大小：

var win = new Ext.Window({
    title: 'Testing',
    width: 600,
    height: 300,
    layout: 'fit',
    items: form
});

此外，一种可能更简洁的方法是让字段填充表单宽度，同时留下一些填充是将其锚点设置为100％：

{
    fieldLabel: 'To',
    allowBlank: false,
    anchor: '100%'
}

...然后在表单上添加填充：

var form = new Ext.form.FormPanel({
    labelWidth: 55,
    padding: 5,
    defaultType: 'textfield', 
    items: formItems
});

extjs：在FormPanel中忽略锚点

1 个答案: