ExtJS: автоматически изменяет размер полей формы при изменении размера окна

Question

Я создал Ext.Window с несколькими полями Ext.form внутри. Но когда я изменяю размер окна, элементы формы по-прежнему имеют начальную ширину и высоту.

Требуется ли явное изменение размеров полей формы при изменении размера окна? Или есть опция, позволяющая автоматически изменять размеры полей формы?

Пример кода:

var f_1 = new Ext.form.TextField({fieldLabel: 'Label 1'});
var f_2 = new Ext.form.TextField({fieldLabel: 'Label 2'});
var fp = new Ext.form.FormPanel({items: [f_1, f_2]});

var w = new Ext.Window({
    layout: 'form',
    title: 'test',
    items: fp
});

w.show()

Answer 1

Вы можете проверить привязку, которая делает формы с хорошим изменяемым размером:

http://www.extjs.com/deploy/dev/examples/form/anchoring.html

См. Свойство "anchor" в "Component":

http://www.extjs.com/deploy/dev/docs/?class=Ext.Component

Answer 2

var f_1 = new Ext.form.TextField({fieldLabel: 'Label 1', anchor:'95%'});

сделает это. Вы можете увидеть некоторые образцы там и документацию там .

Также, если вы не хотите указывать размер для каждого из них, вы можете перенести значение по умолчанию с панели форм с помощью defaults объекта конфигурации

var fp = new Ext.form.FormPanel({
           items: [f_1, f_2]
           ,defaults: {
               anchor: '95%' 
           }
        });

Answer 3

Я подозреваю, что FormPanel "fp" частично виноват.

В Ext JS обычно рекомендуется объявлять все из окна полностью внутри конструктора Ext.Window. Создание вещей и попытка присоединить их позже стали источником большого разочарования для меня.

(Хорошо, другой ответ о ширине: 100%, вероятно, лучше. Но, тем не менее, у меня было много проблем с изменением размера и т. Д., Когда я не объявлял все сразу ... точно не выяснил, когда пока все нормально.)