extjs: anchor ignored in FormPanel

I'm trying to use the anchor parameter inside an ExtJS FormPanel. The FormPanel is inside a Window and I would like that when the Window is resized the textfields and textarea get resized too. Ideally until 5 pixel to the right margin. The textarea which is the last element should take all the remaining vertical space (minus 5 pixels).

I had some success using width: '94%', but I would like to use anchor as it seems it would be a more precise placement.

Here is what I tried:

var formItems = [
    {
        fieldLabel: 'To',
        allowBlank: false,
        anchor: '-5'
    },
    {
        fieldLabel: 'Subject',
        allowBlank: 开发者_Go百科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();

I suspect that the solution could be to use AnchorLayout for the FormPanel, but I'm not sure.

UPDATE: Here are my tests.

http://doc.obliquid.com/dev/formLayout/test1.html uses percentage width and height, resizing works ok horizontally, but doesn't work vertically.

http://doc.obliquid.com/dev/formLayout/test2.html is the suggestion of @owlness totally standalone. It mostly works, except for one bug: the textarea is actually going off the window. To see this, just type inside the textarea until the scrollbar appears and you will see that it goes out of the window.

http://doc.obliquid.com/dev/formLayout/test3.html is what appeared to me when I tried the suggestion of @owlness in my application because of the style.css stylesheet.

http://doc.obliquid.com/dev/formLayout/test4.html is the same as test3.html without form {display:inline} style. It's getting better.

http://doc.obliquid.com/dev/formLayout/test5.html is the same as test4.html without label {margin-right:20px;} and input {margin-top:7px;} and is the same as test2.html now.

The problem now is how to make the textarea stay in the window, better with a bottom margin.

UPDATE 2: I solved the problem of the textarea by changing the anchor setting for the textarea as anchor: '100% -51'. I found the number -51 by trial and error and is approximately the height of the first two fields. I'm not so happy that there is a magic number, but it works. If anyone knows a better solution...

Ext.form.FormPanel uses an anchor layout by default. What you need is a 'fit' layout on the Ext.Window instance so that the form itself will autosize:

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

Also, a perhaps cleaner way of getting the fields to fill the form width while leaving some padding is to set their anchors to 100%:

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

... and then put padding on the form:

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