ExtJS: динамично расположение ajust после добавления/удаления некоторых полей формы
Я нахожу, что большинство веб-форм правильно допускает код страны, код зоны, тогда оставление 7 цифрами, но почти всегда забывает позволять запись расширения. Это почти всегда заканчивает тем, что заставило меня произнести сердитые слова, с тех пор на работе у нас нет регистратора, и мое расширение # необходимо для достижения меня.
4 ответа
Когда вы добавляете / удаляете компоненты из контейнера, вы должны вызвать Container.doLayout (), чтобы он пересчитал размеры.
[EDIT]: Обратите внимание, что это применимо только к Ext <= 3.x. В 4.x система компоновки управляет этим за вас. Хотя метод все еще существует, вам никогда не придется его использовать.
вы должны использовать свойство "visibility" элемента. Хитрость в том, что даже невидимые элементы занимают место на странице.
object.style.visibility="hidden"
[Новый ответ, чтобы я мог отформатировать код]
Один из подходов - сделать внешний макет более ориентированным на то, что вы хотите, например, BorderLayout с севером (верхний поля) и центр (редактор HTML). Таким образом, редактор HTML можно было бы просто привязать к 100% высоте его контейнера (центральной области). В этом случае, поскольку макет будет правильно управляться, мой предыдущий совет doLayout () должен работать.
Если вы действительно хотите управлять полями за пределами макета, которые помогут вам в этом, тогда это будет зависеть от вас управлять высотой вручную. Один из способов - изменить свойство привязки. То, как я делал это раньше (и это более предпочтительно), - это прослушивать соответствующее событие и устанавливать размер компонентов по мере необходимости. Так, например, вы можете добавить в окно слушателя изменения размера:
listeners: {
'resize': function(){
Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110);
}
}
Используя ваш тестовый код, это довольно близко. Однако в реальном коде вы бы хотели получить высоту из существующих видимых компонентов и вычесть это число, а не жестко его кодировать, но вы поняли идею. Один из способов упростить этот подход - добавить ваши верхние поля в отдельную панель, которая является autoHeight: true, а затем после отображения или скрытия полей просто измерьте высоту этой панели и вычтите ее из высоты окна (плюс поля / отступы) чтобы получить высоту вашего HTML-редактора (это то, что я делал в прошлом, когда не мог полагаться на макет, чтобы управлять им).
Как видите, есть много способов снять шкуру с этой кошки, чтобы вы могли выберите подход, который вам больше всего подходит.
Я хочу получить высоту из ваших существующих видимых компонентов и вычесть это число, а не жестко его кодировать, но вы поняли идею. Один из способов упростить этот подход - добавить ваши верхние поля в отдельную панель, которая является autoHeight: true, а затем после отображения или скрытия полей просто измерьте высоту этой панели и вычтите ее из высоты окна (плюс поля / отступы) чтобы получить высоту вашего HTML-редактора (это то, что я делал в прошлом, когда не мог полагаться на макет, чтобы управлять им).Как видите, есть много способов снять шкуру с этой кошки, чтобы вы могли выберите подход, который вам больше всего подходит.
Я хочу получить высоту из ваших существующих видимых компонентов и вычесть это число, а не жестко его кодировать, но вы поняли идею. Один из способов упростить этот подход - добавить ваши верхние поля в отдельную панель, которая является autoHeight: true, а затем после отображения или скрытия полей просто измерьте высоту этой панели и вычтите ее из высоты окна (плюс поля / отступы) чтобы получить высоту вашего HTML-редактора (это то, что я делал в прошлом, когда не мог полагаться на макет, чтобы управлять им).Как видите, есть много способов снять шкуру с этой кошки, чтобы вы могли выберите подход, который вам больше всего подходит.
используйте autoHeight: true , и размер окна изменится в соответствии с размером контейнера.