Третий параметр — строка с HTML-кодом, с помощью которого будет создан новый элемент.
Метод insertHtml возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. К сожалению, указать ему вернуть экземпляр объекта Element мы не можем.
Пример:
var htelCMain = Ext.getDom("cmain"); Ext.DomHelper.insertHtml("afterBegin", htelCMain, "<P ID="newparagraph" CLASS="someclass"></P>");
Здесь мы добавили в начало контейнера cmain новый абзац с именем newparagraph и привязанным к нему стилевым классом someclass.
Пример:
var htelNavbar = Ext.getDom("navbar"); Ext.DomHelper.insertHtml("beforeBegin", htelNavbar, "<HR>"); Ext.DomHelper.insertHtml("afterEnd", htelNavbar, "<HR>");
А здесь мы поместили до и после списка, формирующего полосу навигации, горизонтальные линии HTML.
Метод overwrite создает новый элемент Web-страницы и помещает его внутрь указанного элемента, заменяя все его предыдущее содержимое:
Ext.DomHelper.overwrite(<элемент — будущий родитель>, <конфигуратор>|<HTML-код>[, true])
Первый параметр — элемент Web-страницы, который станет родителем для вновь создаваемого элемента. Это может быть либо строка с именем элемента, либо представляющий его экземпляр объекта Element.
Второй параметр — либо конфигуратор, описывающий параметры создаваемого элемента, либо строка с HTML-кодом, на основе которого он будет создан.
Метод overwrite возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. Но если мы передадим в качестве третьего, необязательного, параметра значение true, он вернет экземпляр объекта Element.
Пример:
var oConf4 = { tag: "P", html: "Новое содержимое контейнера."}Ext.DomHelper.overwrite("cmain", oConf4);
Здесь мы создаем новый абзац и помещаем его в контейнер cmain, полностью заменяя его предыдущее содержимое.
Метод markup принимает в качестве единственного параметра конфигуратор и возвращает строку с созданным на его основе HTML-кодом.
Пример:
Ext.DomHelper.markup(<HTML-код>)
var s = Ext.DomHelper.markup(oConf4);
В переменной s окажется строка "<P>Новое содержимое контейнера.</P>".
Создавать новые элементы Web-страницы мы можем также с помощью рассмотренных далее методов объекта Element. Вероятно, во многих случаях они будут удобнее.
Метод createChild создает новый элемент Web-страницы и делает его потомком данного элемента:
<экземпляр объекта Element>.createChild(<конфигуратор> [, <элемент, перед которым будет вставлен созданный элемент>])
Первым параметром данному методу передается конфигуратор, описывающий параметры создаваемого элемента Web-страницы.
Если второй параметр опущен, созданный элемент Web-страницы будет помещен в самом конце данного элемента и станет его последним потомком. Если же в качестве его передать какой-либо элемент-потомок в виде экземпляра объекта Element, создаваемый элемент будет вставлен перед ним.
Метод createChild возвращает экземпляр объекта Element, представляющий созданный элемент.
Пример:
var elCMain = Ext.get("cmain");
elCMain.createChild(oConf, elCMain.first());
Здесь мы вставляем абзац, описываемый конфигуратором oConf, в самое начало контейнера cmain — перед первым его потомком.
Метод insertFirst принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и помещает его в начало данного элемента в качестве его первого потомка:
<экземпляр объекта Element>.insertFirst(<конфигуратор>) Ext.get("cmain"). createChild(oConf);
Метод replaceWith принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и полностью заменяет им данный элемент.
В примере из листинга 15.4 мы удаляем полностью контейнер cmain и помещаем на его место другой контейнер, описываемый конфигуратором oCont5, с новым содержимым и тем же именем.
Листинг 15.4
<экземпляр объекта Element>.replaceWith(<конфигуратор>)
var oConf5 = { tag: "DIV", html: "<P>Новый контейнер с новым содержимым.</P>", id: "cmain"
} Ext.get("cmain"). replaceWith(oConf5);
Метод wrap принимает в качестве параметра конфигуратор, создает на его основе элемент Web-страницы и помещает в него данный элемент, делая его потомком созданного элемента:
<экземпляр объекта Element>.wrap([<конфигуратор>])
Как видим, при вызове этого метода мы можем не указывать конфигуратор. В таком случае метод wrap создаст блочный контейнер на основе тега <DIV>.
Пример:
Ext.select("UL[id=navbar]"). wrap();
Здесь мы заключаем список navbar, формирующий полосу навигации, в блочный контейнер. Обратим внимание, что мы не передали методу wrap никаких параметров — он сам "поймет", что именно блочный контейнер мы хотим создать.
А в следующем примере мы заключаем все абзацы, непосредственно вложенные в контейнер cmain, в большие цитаты:
Ext.select("DIV[id=cmain] > P"). wrap({ tag: "BLOCKQUOTE" });
Да, библиотека Ext Core представляет весьма мощные средства для создания новых элементов Web-страницы. К сожалению, удалить ненужные элементы можно
только методом remove объекта Element. Он немедленно удаляет данный элемент Web- страницы со всем его содержимым, не принимает параметров и не возвращает значения.
Пример:
Ext.get("cmain"). remove();
Здесь мы удаляем контейнер cmain со всем его содержимым.
Обработка событий
Теперь самое время рассмотреть один ключевой вопрос Web-программирования: события, их возникновение и обработка.
Понятие события и его обработки
Рассматривая примеры Web-сценариев, мы исходили из предположения, что они выполняются при загрузке Web-страницы. Как мы уже знаем из главы 14, Web- сценарий исполняется в том месте HTML-кода Web-страницы, в котором присутствует создающий его тег <SCRIPT>. При этом неважно, является Web-сценарий внутренним (помещенном прямо в HTML-код) или внешним (хранящимся в отдельном файле Web-сценария).
Однако существует большая группа Web-сценариев, которые выполняются при возникновении определенного события, к которому эти Web-сценарии были привязаны. О них-то и пойдет сейчас разговор.
Событием в терминологии Web-программирования называется некое условие, которое возникает в Web-обозревателе в ответ на действия посетителя или в процессе работы самого Web-обозревателя. Так, щелчок левой кнопкой мыши на элементе Web-страницы приводит к возникновению события "щелчок левой кнопкой мыши", а перемещение курсора мыши над элементом Web-страницы — "перемещение курсора мыши". Нажатие клавиши на клавиатуре приводит к возникновению события "нажатие клавиши", а ошибка в загрузке изображения — "ошибка загрузки".
Существует много разнообразных событий, как говорится, на все случаи жизни. Ежесекундно их возникает десятки, если не сотни.
Так вот, мы можем заставить Web-сценарий выполняться в ответ на возникновение определенного события в определенном элементе Web-страницы. Для этого нужный Web-сценарий особым образом привязывается к данному элементу Web- страницы и событию. Такие Web-сценарии называются обработчиками событий.
Что может делать обработчик события? Да что угодно! При наведении курсора мыши он может привязывать к элементу Web-страницы другой стилевой класс, меняя его представление. (Именно такой обработчик события мы создали в главе 14.) При щелчке левой кнопкой мыши на элементе Web-страницы — разворачивать или сворачивать блочный контейнер, открывая или скрывая его содержимое. А при изменении размеров окна Web-обозревателя — менять размеры блочных контейнеров, чтобы полностью занять ими клиентскую область окна.
Теперь уясним следующие моменты, связанные с обработчиками событий.
— Обработчик события оформляется в виде функции, которая принимает два параметра. Подробнее об этом мы поговорим потом.
— Обработчик события привязывается к конкретному элементу Web-страницы, в котором возникают события, требующие обработки. Так, если нужно обработать событие "щелчок левой кнопкой мыши" в каком-либо абзаце, обработчик привязывается к данному абзацу.
— Обработчик события привязывается к конкретному событию. Так, если мы привязали обработчик к событию "щелчок левой кнопкой мыши", он будет выполняться только при возникновении именно этого события. Другие события, скажем, "двойной щелчок левой кнопкой мыши", он обрабатывать не будет.
— Обработчик события выполняется только при возникновении заданного события в элементе Web-страницы, к которому он привязан. Во время загрузки Web- страницы он не выполняется.
— Мы можем привязать один и тот же обработчик сразу к нескольким элементам Web-страницы и нескольким событиям. Так, один и тот же обработчик может обрабатывать событие "щелчок левой кнопкой мыши" в абзаце и в гиперссылке. Кстати, так часто и делают.
События объекта Element
