ExtJS Методы по управлению DOM

Методы ExtJS по управлению DOM.

Методы	параметры	результат
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 type="text/javascript">
    Ext.onReady(function(){
        // Выполнить функцию по готовности DOM.
    });
</script>

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

var ex1 = Ext.get('ex1');  // Выделили DOM-элемент с id="ex1"

ex1.createChild('< div>Ex1< /div>'); // Разместили в нем HTML

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

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

Ext.select - этот метод отдаленно похож на метод навигации в jQuery.
Он позволяет получить объект Ext.CompositeElement по CSS/Xpath-селектору заданному строкой.

Ext.select('blockquote').createChild('select by tag "blockquote"');

Ext.select('.ex4').createChild('select by class "ex4"');

Ext.select('#ex4').createChild('select by id "ex4"');

Ext.select('#ex8 div').createChild('select #ex8 div ');

Метод 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')       // выборка включенных чекбоксов

Метод Ext.fly аналогичен методу Ext.get с той разницей, что он оптимизирован под сборку мусора.

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

Ext.fly('ex5').createChild('select by id "ex5"');

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

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

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

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

Цепочки запросов в ExtJS.

var parent=Ext.query('#ex1');
var table = Ext.query('table',parent);
var form=Ext.query('form',table);
var input=Ext.query('input',form);

Ext.get(input).setStyle({'border':'5px solid red'})

parent, prev, next, child для Ext.core.Element - эти методы применимы к Ext.core.Element, то есть к результату полученному при помощи Ext.get().
Эти методы не применимы к результату более универсального Ext.select().
Ext.select() возвращает совершенно другой объект Ext.CompositeElement, к которому эти методы напрямую неприменимы.

var сhild1=Ext.get('#ex1').child('div'); // первый дочерний элемент
child1.createChild(' <b>select "#ex1 child"</b>');

var ex1b=Ext.get('ex1b');
ex1b.next().createChild(' <b>select "#ex1b next"</b>'); // следующий сосед
ex1b.prev().createChild(' <b>select "#ex10 prev"</b>'); // предыдущий сосед
ex1b.parent().setStyle({'border':'5px solid red'}); // родительский элемент

Итератор Ext.each - отдельный метод ExtJS. Среди прочего он позволяет перебирать результаты DOM-выборки. Мы разберем здесь пример только для Ext.CompositeElement.

var ex3=Ext.select('.ex3'); ex3.each(function(el,c,index){
    this.createChild(' <b>".ex3 ('+ index+')"</b>'); // здесь this применяется к текущему элементу набора Ext.CompositeElement
}); 

Ext.filter - отфильтровывает из набора Ext.CompositeElement те элементы, которые соответствуют образцу выбора CSS/XPath.
Ext.add - добавляет в набор Ext.CompositeElement.
Ext.clear - удаляет элементы из набора Ext.CompositeElement, при этом не трогает сами DOM-элементы.
Ext.getCount - количество элементов в выборке.

var ex4=Ext.select('.ex4');// создается первичный набор CompositeElement
ext4.add('.ex5').add('.ex6'); // к нему добавляются дополнительные выборки
ex4.each(function(el,c,index){// перебираем полученный набор
    this.createChild('<b>".exAdd  ('+ index+')"</b>');
});

Приведем пример выполнения некотрых выборок DOM-элементов:

var ex5=ex4.filter('.exFilter'); // выбираем из набора только те элементы, которые имеют CSS-класс exFilter
ex5.each(function(el,c,index){ // перебираем полученный набор
    this.createChild('<b>".exFilter  ('+ index+')"</b>');
});