ExtJS: Automatycznie zmienia rozmiar pól formularza przy zmianie rozmiaru okna

Question

Utworzono Ext.Window z niektórymi polami Ext.form wewnątrz. Ale gdy zmieniam rozmiar okna, elementy formularza wciąż mają początkową szerokość i wysokość.

Czy jest wymagana jawna zmiana rozmiaru pól formularza przy zmianie rozmiaru okna? Czy jest jakaś opcja, która umożliwia automatyczną zmianę rozmiaru pól formularza?

Przykładowy kod:

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

można sprawdzić zakotwiczenie, co sprawia, że ​​dla form ładnie resizable:

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

Patrz "kotwicy" własność na "składnik":

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

Answer 2

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

by to zrobić. możesz zobaczyć kilka próbek there i dokumentację there.

Także, jeśli nie chcesz, aby określić wielkość dla każdego z nich można wcisnąć domyślne z panelu formularza z obiektem defaults config

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

Answer 3

Podejrzewam, że FormPanel „FP” jest częściowo zawinił.

W Ext JS zwykle najlepiej jest zadeklarować wszystko z poziomu okna wewnątrz konstruktora Ext.Window. Tworzenie rzeczy i próbowanie ich późniejszego podłączenia było dla mnie źródłem wielu frustracji.

(Ok, druga odpowiedź na temat szerokości: 100% jest prawdopodobnie lepsza, ale mimo to miałem wiele problemów z zmienianiem rozmiaru itp. Kiedy nie zadeklarowałem wszystkiego naraz ... nie znalazłem dokładnie ., kiedy to OK, aby zrobić jeszcze)