extjs：锚点在FormPanel中被忽略

Question

我试图在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的FormPanel中，但我不知道。

UPDATE：这是我的测试。

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

http://doc.obliquid.com/dev/formLayout/test2.html 是@owlness完全独立的建议。它主要工作，除了一个错误：文本区实际上是从窗口。要看到这个，只需在textarea内输入，直到滚动条出现，你会看到它离开窗口。

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

http://doc.obliquid.com/dev/formLayout/test4.html 相同test3.html而不形式{显示：内联}样式。它越来越好。

http://doc.obliquid.com/dev/formLayout/test5.html 相同test4.html而不标签{余量右：20像素;}和输入{边距：7px的;}和相同test2.html现在。

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

UPDATE 2：我通过改变锚设置textarea的作为锚解决textarea的问题： '100％-51'。我通过试错找到了数字-51，大约是前两个字段的高度。我不是很高兴有一个神奇的数字，但它的工作原理。如果有人知道更好的解决方案...

Answer 1

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