Для взаимодействия с элементами DOM в Ext JS имеется класс-обертка Ext.Element. Он предоставляет ряд методов, которые позволяют
управлять элементами DOM. Так, с помощью метода Ext.get можно получить ссылку на элемент. Этот метод в качестве параметра может принимать
id элемента, элемент DOM или объект Ext.Element. Например, у нас на веб-странице есть элемент <div id='mainBody'></div>
Тогда мы можем получить этот элемент так:
var mainId = Ext.get('mainBody');
alert('ID основного элемента DIV: ' + mainId.id);
При передачи в качестве параметра ID, Ext JS использует метод document.getElementById для получения нужного элемента.
Метод Ext.get позволяет выбрать только одни элемент. Чтобы выбрать несколько элементов, нужно использовать методы Ext.select или
Ext.query
Метод Ext.select извлекает из DOM набор элемент на основании селекторов CSS и возвращает объект Ext.CompositeElement
и Ext.CompositeElementLite
Возьмем к примеру следующую разметку:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script>
Ext.onReady(function(){
var elements = Ext.select('div#text');
elements.hide();
});
</script>
</head>
<body>
<div id="content">
<div id="text1">Текст1</div>
<div class="t2" >Текст2</div>
<div id="text2">Текст3</div>
<div class="t2" >Текст4</div>
</div>
</body>
</html>
Тогда чтобы скрыть элементы div c id="text1" мы можем использовать такое выражение:
var elements = Ext.select('div#text1');
elements.hide();
Метод Ext.select принимает в качестве параметра селектор CSS, по которому будет производиться выборка. В данном случае
используется id=text и тег элемента div. Мы также можем обращаться по классу или комбинировать селекторы в запросе:
var elements = Ext.select('div .t2');
elements.hide();
Метод Ext.select может принимать также два дополнительных необязательных параметра. Первый необязательный параметр представляет
булевое значение. Если оно равно true, то для каждого узла DOM создавать свой объект Ext.Element, а метод возвращает
объект Ext.CompositeElement. Если же параметр равен false, то возвращается объект Ext.CompositeElementLite
Второй необязательный параметр представляет корневой элемент, с которого начинается поиск элементов. Он может принимать либо ID, либо объект Ext.Element.
Этот метод подобен Ext.select - он также принимает css-селекторы для поиска элементов. Отличие заключается в том, что не создается
никаких объектов-оберток для найденных элементов DOM, что ведет к большей производительности.
Для перехода по элементам DOM
Используя вышеуказанные методы, мы можем получить отдельные объекты выборки. Для этого используем метод item:
var elements = Ext.select('div').item(1);
alert(elements.dom.innerHTML);
Метод item принимает в качестве параметра индекс элемента в найденном наборе (индексы начинаются с 0). Получив элемент, можно производить
над ним манипуляции. Например получить его содержание.
Используя методы prev и next, можно получить предыдущий и следующий элементы из структуры DOM. Например:
var element = Ext.select('div#text2').item(0);
alert(element.dom.innerHTML); //выведет 'Текст3'
var el = element.next();
alert(el.dom.innerHTML); //выведет 'Текст4'
el = element.prev();
alert(el.dom.innerHTML); //выведет 'Текст2'
Также мы можем получить доступ к первому и последнему дочерним элементам внутри некоторого элемента.
var element = Ext.get('content');
var el = element.first();
alert(el.dom.innerHTML); //выведет 'Текст1'
el = element.last();
alert(el.dom.innerHTML); //выведет 'Текст4'
Мы можем уточнить параметры поиска, указав в методах first/last/prev/next определенные css-селекторы:
var element = Ext.get('content');
el = element.last('div');
alert(el.dom.innerHTML); //выведет 'Текст4'
С помощью метода parent мы можем получить родительский элемент для данного элемента:
el = element.last('div').parent();
А метод child позволяет по указанному селектору получить первый дочерний элемент:
var element = Ext.get('content');
var el = element.child('div#text1');
Кроме поиска элементов мы можем производить с ними определенные преобразования. Например, с помощью метода setStyle мы можем изменять
стиль:
var element = Ext.get('content');
var el = element.child('div#text1');
el.setStyle('color', 'red');
element.setStyle({
'font-family': 'Verdana',
'font-size': '13px',
'background-color': 'silver',
});
В Ext JS есть альтернативная форма записи:
element.setStyle({
fontFamily: 'Verdana',
fontSize: '13px',
backgroundColor: 'silver',
});
Оба примера идентичны, просто в данном случае мы отбрасываем дефис в имени свойства и делаем первую букву после дефиса заглавной.
Либо мы можем добавить данному элементу класс, если, конечно, данный класс у нас определен на странице:
element.addClass('header');
Кроме стилевых особенностей мы можем поменять содержимое элемента:
element.update('<b>Hello World!</b>')
Фактически в данном случае мы изменяем у элемента свойство innerHTML.
Используя класс Ext.DomHelper, мы можем добавлять в определенные элементы:
var body = Ext.get('content'); // определяем id родительского элемента для вставки
// определяем новый элемент
var newElement = {
tag: 'h2',
html: 'Заголовок'
};
// добавление
var createdElement = Ext.DomHelper.append(body, newElement);
Здесь класс Ext.core.DomHelper использует метод append для добавления нового элемента в конец элемента DOM. Для нового элемента мы можем определить следующие параметры:
tag: представляет тег элемента (в данном случае h2)
children: представляет все дочерние элементы данного элемента. Они определяются подобным образом в виде безымянных объектов
и имеют те же свойства
cls: представляет класс элемента
html: представляет html-разметку элемента
Так, мы можем добавить таким образом новый элемент, содержащий сложную структуру, к примеру, список:
Ext.onReady(function(){
var body = Ext.get('content');
var newElement = {
tag: 'ol',
cls: 'listClass',
children: [{
tag: 'li',
html: 'Первый'
},{
tag: 'li',
html: 'Второй'
}]
};
var createdElement = Ext.DomHelper.append(body, newElement);
});
Мы можем добавлять не только отдельные элементы, но и просто строковое представление данных элементов. Так, предыдущий пример будет эквивалентен следующему:
Ext.core.DomHelper.append(body, '<h2>Заголовок</h2>');
Добавление с помощью метода append не исчерпывает все возможности по вставке новых элементов. Так, мы можем методы insertBefore и
insertAfter, чтобы конкретизировать позицию вставки:
Ext.DomHelper.insertBefore(body.first(), newElement); Ext.DomHelper.insertAfter(body.first(), newElement);
Здесь мы получаем первый элемент и вставляем новый элемент перед ним - то есть на первое место и после него.
Альтернативой выше приведенным методам вставки элементов является добавление через шаблоны:
var body = Ext.get('content');
var templ = Ext.DomHelper.createTemplate({
tag: 'h2',
html: '{header}'
});
templ.append(body, {header:'Привет мир!'});
Здесь сначала мы генерируем шаблон с помощью свойства createTemplate. В шаблоне определяется плейсхолдер (в данном случае header),
на место которого потом будет подставляться содержимое. Затем мы используем соответствующий метод (append/insertBefore/insertAfter) для добавления элемента.
Этот метод в качестве первого параметра принимает id элемента или сам элемент, в который добавляем. Второй параметр вставляет на место плейсхолдера
контент.
Кроме вставки мы можем изменять содержимое элемента. Для этого у класса Ext.DomHelper используется метод overwrite.
Его действие подобно выше рассмотренному методу update. Например, нам надо заменить содержимое элемента с id=content:
var body = Ext.get('content');
var newElement = {
tag: 'ol',
cls: 'listClass',
children: [{
tag: 'li',
html: 'Первый'
},{
tag: 'li',
html: 'Второй'
}]
};
var newElement = Ext.DomHelper.overwrite(body, newElement);