Доступ к DOM-элементам в Ext JS 6

Есть три способа доступа к DOM-элементам: get, query и select.

Ext.get

Функция принимает идентификатор элемента и возвращает элемент обернутый в Ext.dom.Element:

var mydiv = Ext.get('myDivId');

Ext.query

Метод выбирает дочерние узлы предоставленного корневого узла на основе CSS-селектора. Метод возвращает массив (HTMLElement[]/Ext.dom.Element[]) элементов соответствующих селектору. Если соответствий нет, то возвращается пустой массив. Следующий код возвращает элементы с CSS-классом 'oddRow':

var someNodes = Ext.query('.oddRow',
myCustomComponent.getEl().dom);

Ext.select

На основе предоставленного CSS/XPath-селектора возвращает объект типа CompositeElement, который представляет собой коллекцию элементов. CompositeElement имеет методы для фильтрации, обхода и выполнения групповых действий над всем множеством:

var rows = Ext.select('div.row'); ////Matches all divs with class
row
rows.setWidth(100); // All elements become 100 width

Можно объединить две вышеприведенные строки в одну (текучий интерфейс):

Ext.select('div.row').setWidth(100);

Можно сделать множественный выбор, указав поисковый критерий:

Ext.select('div.row, span.title'); //Matches all divs with class row and all spans with class title

По умолчанию метод select рассматривает HTML body как корень и начинает поиск по всему DOM дереву тела документа. Можно самому задать корневой элемент:

Ext.get('myEl').select('div.row');

То же самое можно сделать другим способом:

Ext.select('div.row', true, 'myEl');// This is equivalent to the previous line.

Следующий код находи div элемент класса row c атрибутом title равным значению bar и еще этот элемент должен быть первым дочерним узлом своего непосредственного родительского узла:

Ext.select('div.row[title=bar]:first')

Ext.ComponentQuery

Позволяет найти компонент по ID, xtype и свойствам. Можно искать глобально или указать корневой компонент. Следующий запрос вернет все компоненты с xtype равным button:

Ext.ComponentQuery.query('button');

Можно получить компонент с идентификатором foo:

Ext.ComponentQuery.query('#foo');

Следующий запрос вернет все компоненты с xtype равным button и заголовком 'my button':

Ext.ComponentQuery.query("button[title='my button']");
//or
parent.query('textfield[title=my button]');

Можно использовать вложенные селекторы:

Ext.ComponentQuery.query('formpanel numberfield'); // Gets only the numberfields under a form

Следующий код возвращает удовлетворяющего переданному критерию первого прямого потомка у контейнера:

parent.child('button[itemId=save]');

Если соответствий не будет найдено то вернется null. Аналогично можно использовать другие методы nextNode, up, down, previousSibling.