Javascript extjs:在FormPanel中忽略锚点

我试图在ExtJS FormPanel中使用锚定参数。FormPanel在一个窗口内，我希望在调整窗口大小时，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，但我不确定

更新：以下是我的测试

使用百分比宽度和高度，水平调整大小可以，但垂直调整不起作用

@owlness的建议是完全独立的。除了一个bug外，它基本上是有效的：textarea实际上已经离开了窗口。要查看这一点，只需在文本区域内键入，直到滚动条出现，您就会看到它离开窗口

这是我在应用程序中尝试使用@owlness的建议时看到的，因为style.css样式表

与test3.html相同，没有表单{display:inline}样式。情况正在好转

与test4.html相同，没有标签{margin right:20px；}和输入{margin top:7px；}，现在与test2.html相同

现在的问题是如何使textarea保持在窗口中，更好地使用底部边距

---

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

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

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

---

谢谢你的建议。我试着在窗口中布局：“fit”，但似乎窗体没有调整大小。此外，锚定：“100%”不起作用，文本字段仍然很小。注意：我在文档中读到：FormPanel配置了layout:'form'以使用Ext.layout.FormLayout布局管理器。@stivlo owlness的示例效果很好。证明-。您使用的是哪个版本的ExtJS？谢谢Skay，很有趣。。。它在我的应用程序中不起作用。现在我断章取义地尝试一下，看看它是否会改变。我使用的是ExtJS v 3.3.1，我添加了实时测试作为问题的更新，因为我可以在那里更好地格式化文本。在更改本地样式表并在文本区域添加锚定：“100%-51”后，问题得到了解决。