CompositeElement

ExtJS-4

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

Разборки с Ext.core.Element заняли у меня слишком много времени, потому что зациклился на поиске привычных по jQuery методов навигации по DOM в виде цепочек запросов:

var parent=$('#someID');
var tables=parent.find('table'); … /* делаем что-то с табличками */
var forms=tables.find('form');   … /* делаем что-то с формами */
var input=form.find('input');   …  /* делаем что-то с input */

Найти вменяемый аналог в 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'})

В первой строке определяю DOM родительского элемента.
Во 2-3 строке используя DOM родительского элемента в качестве отправной точки поиска ищу соответствующий дочерний элемент.
В последней строке преобразую DOM в объект Ext.core.Element, и уже с ним выполняю какую-то операцию.
Причем если в цепочке результат какой-нибудь операции будет не в единственном числе, нужно вводить цикл.

Судя по тому что пишут в форуме Ext и тому, что разработчики Ext ввели специальные адаптеры для использования jQuery, Prototype и др., я - не единственный кто столкнулся с этой проблемой.

А в остальном многие из методов Ext.core.Element и Ext.CompositeElement для навигации по DOM иногда работают предсказуемо. Но не всегда

1. parent, prev, next, child для Ext.core.Element

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'}); // родительский элемент

#ex1 > #ex1a

#ex1 > #ex1b

#ex1 > #ex1c

#ex1 > #ex1a

#ex1 > #ex1b

#ex1 > #ex1c

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

2. Ext.each для Ext.CompositeElement

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

div.ex3

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

div.ex3

Подробнее о праметрах функции each применительно к данному примеру можно посмотреть здесь

3. filter,add,… для Ext.CompositeElement

Похожие, но не аналогичные методы выборки есть и в jQuery:

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

Характерно, что всего методов у Ext.CompositeElement (ExtJS 4.0.3) ровно тринадцать. Несчастливое число. Ниже приведу пример работы некоторых из них без комментариев.

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

.ex4.exFilter

.ex5.exFilter

.ex6