.. / 11.1 Навигация по DOM в ExtJS

  1. ExtJS-4

Этот раздел - одно из немногих исключений в ExtJS, который вызвал полное непонимание. После jQuery или Prototype здесь все кажется сделаным через через ж.. А может и не кажется, а так и есть на самом деле.

jQuery, который теперь не знает только ленивый использует для навигации по DOM простой и лаконичный синтаксис, например:

  var ex=$('#ex1');

Результатом этой операции в jQuery является не объект DOM, а объект jQuery, в котором инкапсулированы и сам DOM-элемент и методы и свойства для манипуляции этим объектом. Например - кроссброузерная установка атрибутов (ID, class, style…) установка и получения параметров элемента (height, width, visibility…) и т.д. Отчасти в четкой и ясной навигации по DOM кроется один из секретов популярности jQuery. В ExtJS все то же самое предельно запутано и неудобно.

Для того чтобы получить набор узлов DOM, в ExtJS используется не одна функция, а целая куча всякого говна. И результат этих функций - несколько разных объектов ExtJS, или наборы DOM-элементов. Еще одна особенность ExtJS - то что большинство объектов и методов имеют разные варианты написания. Иногда это просто синонимы, а иногда они методы и объекты с дополнительными параметрами и свойствами.

Ниже приведу сводку методов.

Методы параметры результат
Ext.get(el)
Ext.fly(el)
el - ID или DOM-элемент Объект Ext.core.Element
Ext.select(selector)
Ext.core.Element.select(selector, unique, root)
selector - строковое значение CSS/XPath-селектора,
или массив значений CSS/XPath-селекторов
Объект Ext.CompositeElementLite
или Ext.CompositeElement
Ext.query(selector)
Ext.DomQuery.select(selector,root)
selector - строковое значение CSS/XPath-селектора,
или массив значений CSS/XPath-селекторов
Массив DOM-узлов
Ext.getBody(),Ext.getDoc(), Ext.getHead() - Метод позволяет получить Body, Document, Head как объект Ext.core.Element
Ext.getDom(el) el - ID или DOM-элемент DOM-узел

Ext.core.Element (он же Ext.Element) - объект в котором инкапсулирован DOM и набор методов для манипуляции с ними. Фактически это основной метод работы с DOM

Ext.CompositeElementLite и Ext.CompositeElement - еще один класс, в котором согласно документации инкапсулировано, то же что и Ext.core.Element.

На всякий случай. Все примеры на этой странице вызываются по готовности DOM. Код ниже

<script> Ext.onReady(function(){   // Выполнить аргумент - функцию по готовности DOM. 
});
</script>

1 Ext.get

1.1 Ext.get позволяет определить елемент DOM и полуцчить сообтветствующий ему Ext.core.Element пo id. Пример и код см.ниже

var ex1 = Ext.get('ex1');   // Выделили DOM-элемент с id=ex1 
ex1.createChild('< div>Ex1< /div>'); // Разместили в нем HTML

Что произошло?
А. Методом get() нашел элемент с id=«ex1» (он над примером кода, подсвечен срым цветом) и создал новый объект Ext.Element, в котором находится и сам элемент DOM и дполнительно инкапсулировано около сотни методов и свойств для манипуляции с ним.
В. Забегая вперед, для иллюстрации примеров исползовал метод createChild объекта Ext.Element, который добавляет в найденный элемент HTML-код. При создании дочернего элемента ExtJS сгенерировал ID и добавил ID к созданому дочернему ID. Для красоты в реальном JS я подсветил красным цветом то что вставялется динамически.

1.2 Точно так же в get в качестве параметров можно добавить и DOM-елемент.

Ext.get(document.getElementById('ex2')).createChild('<div>Ex2</div>');

2 Ext.select

Этот метод отдаленно похож на метод навигации в jQuery. Он позволяет получить объект Ext.CompositeElement по CSS/Xpath -селектору заданному строкой. Ниже я приведу то что совпадает в обоих библиотеках. Т.е. получение по CSS/Xpath-селекторам объекта ExtJS.Element, с которым можно проводить какие-то дальнейшие манипуляции. Все остальное придется вынести в отдельную часть.

blockquote:

Ext.select('blockquote').createChild('select by tag «blockquote»');. .. .. .. ..

blockquote:

div.ex4:
Ext.select('.ex4').createChild('select by class «ex4»');. .. .. .. ..
div.ex4:
div#ex4:
 Ext.select('#ex4').createChild('select by id «ex4»');
…….
div#ex4:
ex81
 Ext.select('#ex8 div').createChild('select    #ex8 div ');. .. .. .. ..
ex81

Метод Ext.select позволяет использовать селекторы CSS2-CSS3, анаолгично jQuery и до кучи имеет собственные методы выборки. Приведу их без проверки, в надежде что меня не обманули

 Ext.select('span > b'); // выборка всех  элементов b явл. прямыми потомками span
 Ext.select('span + b'); // выборка всех  элементов b перед которыми стоит span
 Ext.select('div:first');          // выборка первого div
 Ext.select('div:last');           // выборка последнего div
 Ext.select('div:even');           // выборка четных div
 Ext.select('div:odd');            // выборка нечетных div
 Ext.select('div[title]');         // выборка всех div с атрибутом title
 Ext.select('div[title='bar']');   // выборка всех div с атрибутом title=my
 Ext.select('div[title!='bar']');  // выборка всех div с атрибутом title не равного 'bar'
 Ext.select('div[title^='bar']');  // выборка всех div с атрибутом title начинающихся с 'bar'
 Ext.select('div[title$='my']');   // выборка всех div с атрибутом title заканчивающихся на 'bar'
 Ext.select('div[title*='my']');   // выборка всех div с атрибутом title содержащим 'bar'
 Ext.select('input:checked]');     // выборка всех input c checked = true
 Ext.select('div{display=none}');  // выборка всех div с CSS-стилем display=none
 Ext.select('div{display!=none}'); // выборка всех div с CSS-стилем display!=none
 Ext.select('div{height%=2}');     // выборка всех div с CSS-стилем в котором высота делится на два
 Ext.select('div:not(form)')              // выборка div, не содержащих формы
 Ext.select('div:has(a)')            // выборка div, содержащих ссылку
 Ext.select('input:checked')           // выборка включенных чекбоксов

Полностью можно найти в документации

3. Ext.fly

Метод Ext.fly аналогичен методу Ext.get), с той разницей что он оптимизирован под сборку мусора. Разработчики рекомендуют использовать его в тех случаях, когда нет необходимости в многократном использовании полученного элемента DOM

div#ex5:
Ext.fly('ex5').createChild('select by id «ex5»');
…….
div#ex5:

Для метода select можно организовать то же самое, но для этого нужно указать дополнительный параметр unique.

4. Ext.query

Этот метод аналогичен select, но на выходе выдает не объект Ext.Element, а набор DOM-элементов

var ex20=Ext.query('.ex20');
for (var i in ex20) ex20[i].innerHTML='<strong>.ex20'+i+'</strong>';
…….

5. getBody,getDoc, getHead

Все это даю без тестовых примеров:

  • Ext.getBody() - возвращает body как Ext.Element
  • getDoc() - возвращает весь документ как Ext.Element
  • getHead() - возвращает head как Ext.Element
  • getDom(param) - возвращает узел (node) DOM, и принимает на входе - id, DOM, Ext.Element

6. getDom

getDom(param) - возвращает узел DOM, и принимает на входе - id, DOM, Ext.Element

Далее

  1. Навигация по DOM. Часть 2
  2. Манипуляции с DOM. Часть 1. Установка/чтение стилей, классов, атрибутов
  3. Манипуляции с DOM. Часть 2. Добавление/удаление и пр. операции с узлами
  1. 2011-12-11
  2. ExtJS-4
  1. www.quizzpot.com/2009/04/getting-to-know-the-object-element/ - quizzpot.com Getting to know the object Element
  2. www.sencha.com/learn/domquery-v11-basics/ - sencha.com DomQuery v1.1 Basics
  3. docs.sencha.com/ext-js/4-0/#!/api/Ext.DomQuery - API Ext.DomQuery
Go Index Test