javascript - extjs:在 FormPanel 中忽略 anchor

Question

我正在尝试在 ExtJS FormPanel 中使用 anchor 参数。 FormPanel 在 Window 内，我希望在调整 Window 大小时，文本字段和文本区域也会调整大小。理想情况下直到右边距 5 个像素。作为最后一个元素的文本区域应占用所有剩余的垂直空间(负 5 像素)。

我使用 width: '94%' 取得了一些成功，但我想使用 anchor ，因为它似乎是一个更精确的位置。

这是我尝试过的:

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

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

更新:这是我的测试。

http://doc.obliquid.com/dev/formLayout/test1.html使用百分比宽度和高度，调整大小在水平方向上正常，但在垂直方向上不起作用。

http://doc.obliquid.com/dev/formLayout/test2.html是@owlness 完全独立的建议。它大部分工作，除了一个错误:文本区域实际上离开了窗口。要看到这一点，只需在文本区域内键入直到滚动条出现，您会看到它从窗口中消失。

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

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

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

现在的问题是如何让文本区域留在窗口中，最好有底部边距。

更新 2:我通过将文本区域的 anchor 设置更改为 anchor: '100% -51' 解决了文本区域的问题。我通过反复试验找到了数字 -51，它大约是前两个字段的高度。我不太高兴有一个神奇的数字，但它确实有效。如果有人知道更好的解决方案...

Answer 1

Ext.form.FormPanel 默认使用 anchor 布局。您需要的是 Ext.Window 实例上的“适合”布局，以便表单本身可以自动调整大小:

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

此外，让字段填充表单宽度同时保留一些填充的更简洁的方法是将它们的 anchor 设置为 100%:

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

...然后在表单上填充:

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