Листинг 16.2

function adjustContainers() {

var clientWidth = Ext.lib.Dom.getViewportWidth();

var clientHeight = Ext.lib.Dom.getViewportHeight();

var cNavbarWidth = Ext.get("cnavbar"). getWidth();

var cHeaderHeight = Ext.get("cheader"). getHeight();

var cCopyrightHeight = Ext.get("ccopyright"). getHeight();

Ext.get("cheader"). setWidth(clientWidth);

var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30; Ext.get("cnavbar"). setHeight(cNavbarHeight); Ext.get("cmain"). setHeight(cNavbarHeight); Ext.get("cmain"). setWidth(clientWidth — cNavbarWidth—10); Ext.get("ccopyright"). setWidth(clientWidth);

}

В конце тела функции, которую мы передаем в качестве параметра методу onReady

объекта Ext, вставим два выражения:

Ext.fly(window). on("resize", adjustContainers);

adjustContainers();

Сохраним файл main.js. Откроем Web-страницу index.htm в Web-обозревателе — и сразу отметим, что блочные контейнеры приняли такие размеры, чтобы занять всю клиентскую область окна Web-обозревателя. Попробуем изменить размеры окна и понаблюдаем, как меняются размеры контейнеров.

Но как все это работает? Сейчас разберемся.

Код, добавленный нами в файл main.js, объявляет функцию adjustContainers, которая станет обработчиком события resize окна Web-обозревателя. Именно эта функция будет задавать размеры контейнеров. Давайте рассмотрим ее код построчно.

Сначала мы получаем ширину и высоту клиентской области окна Web-обозревателя:

var clientWidth = Ext.lib.Dom.getViewportWidth();

var clientHeight = Ext.lib.Dom.getViewportHeight();

К данным значениям мы будем обращаться не один раз, так что лучше сохранить их в переменных. Ведь доступ к переменной выполняется значительно быстрее, чем вызов метода.

Затем получаем ширину контейнера cnavbar, высоту контейнеров cheader и ccopyright:

var cNavbarWidth = Ext.get("cnavbar"). getWidth();

var cHeaderHeight = Ext.get("cheader"). getHeight();

var cCopyrightHeight = Ext.get("ccopyright"). getHeight();

Эти значения также понадобятся нам в дальнейшем.

Далее задаем ширину контейнера cheader равной ширине клиентской области окна Web-обозревателя:

Ext.get("cheader"). setWidth(clientWidth);

Вычисляем высоту контейнеров cnavbar и cmain:

var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30;

Для этого вычитаем из высоты клиентской области высоту контейнеров cheader и ccopyright и дополнительно 30 пикселов — чтобы создать отступ между нижним краем контейнера ccopyright и нижним краем клиентской области.

Задаем полученное ранее значение в качестве высоты контейнеров cnavbar и cmain:

Ext.get("cnavbar"). setHeight(cNavbarHeight); Ext.get("cmain"). setHeight(cNavbarHeight);

Задаем ширину контейнера cmain:

Ext.get("cmain"). setWidth(clientWidth — cNavbarWidth — 10);

Ее значение получаем, вычтя из ширины клиентской области ширину контейнера cnavbar и еще 10 пикселов — величину внешнего отступа между ними (он задан в именованном стиле navbar атрибутом стиля margin-right).

Напоследок задаем ширину контейнера ccopyright равной ширине клиентской области окна Web-обозревателя:

Ext.get("ccopyright"). setWidth(clientWidth);

На этом выполнение функции adjustContainers закончилось.

Теперь рассмотрим два выражения, помещенные в тело функции, являющейся параметром метода onReady объекта Ext.

Привязываем функцию adjustContainers в качестве обработчика к событию resize окна Web-обозревателя:

Ext.fly(window). on("resize", adjustContainers);

И сразу же ее вызываем, чтобы контейнеры приняли правильные размеры сразу после загрузки Web-страницы:

adjustContainers();

Вот и все. Согласитесь — ничего сложного.