extjs: привязка игнорируется в FormPanel

Question

Я пытаюсь использовать параметр anchor внутри ExtJS FormPanel. FormPanel находится внутри окна, и мне бы хотелось, чтобы при изменении размера окна текстовые поля и текстовая область также изменялись. В идеале до 5 пикселей до правого поля. Текстовая область, которая является последним элементом, должна занимать все оставшееся вертикальное пространство (минус 5 пикселей).

У меня был некоторый успех при использовании width: '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 полностью автономным. В основном это работает, за исключением одной ошибки: текстовая область фактически исчезает из окна. Чтобы увидеть это, просто введите текстовое поле, пока не появится полоса прокрутки, и вы увидите, что она выходит из окна.

http://doc.obliquid.com/dev/formLayout/test3.html это то, что мне показалось, когда я попробовал предложить @owlness в своем приложении из-за таблицы стилей style.css.

http://doc.obliquid.com/dev/formLayout/test4.html такой же, как test3.html без form {display: inline} style. Становится лучше.

http://doc.obliquid.com/dev/formLayout/test5.html такой же, как test4.html без label {margin-right: 20px;} и input {margin-top: 7px;} , и теперь совпадает с test2.html.

Теперь проблема в том, как заставить текстовую область оставаться в окне, лучше с нижним полем.

ОБНОВЛЕНИЕ 2 : Я решил проблему текстовой области, изменив настройку привязки текстовой области на anchor: '100% -51' . Я нашла число -51 методом проб и ошибок, и это примерно высота первых двух полей. Я не очень рад, что есть магическое число, но оно работает. Если кто-нибудь знает лучшее решение ...

Answer 1

Ext.form.FormPanel по умолчанию использует макет привязки. Что вам нужно, так это макет «fit» для экземпляра 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
});