4. Ext JS - Управление узлами

Последнее обновление Dec 5th, 2019 | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

JavaScript обычно использует манипуляции с разделами страницы. Мы включили наши стандартные вещи и стили Ext JS. Давайте рассмотрим страницу с div, который мы хотим удалить:

<html>
    <title>Моя тестовая страница Ext JS</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.get('div2').remove();
        });
    </script>

    <body>
        <h1>Обработка элементов</h1>

        <div id="div1" class="myDiv">Я здесь останусь</div>

        <div id="div2" class="myDiv">Я буду удален</div>

        <div class="myclass">Один</div>
        <div class="myclass">Два</div>
        <div class="myclass">Три</div>
    </body>
</html>

Когда вы загрузите эту страницу в браузере, вы должны увидеть, что остается только div1, а div2 удаляется. Обратите внимание, что селектор Ext JS не использует хэштег (#), как jQuery.

Выборки в Ext JS¶

Так как же Ext JS делает выборки наподобие jQuery? У него есть пара способов. Одним из вариантов является метод select(), который использует нотацию, аналогичную jQuery.

Рассмотрим следующий код, который удалит все три div, где class="myclass"

        Ext.onReady(function() {
            Ext.select('.myclass').each(function(el){
                el.remove();
            });
        });

Добавление контента после элемента¶

Рассмотрим следующие два варианта кода, которые дают одинаковый результат:

        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.createChild('<div>Мой дочерний элемент будет здесь.</div>');

            // ИЛИ немного более подробно и самодокументированно

            myDiv1.createChild({
                tag: 'div',
                html: 'Мой дочерний элемент будет здесь.'
            });
        });

Метод createChild аналогичен методу jQuery append().

Добавление контента перед элементом¶

Ext JS также может поместить материал в начало элемента. Рассмотрим метод insertFirst:

        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');

            myDiv1.insertFirst({
                tag  : 'div',
                html : 'Дочерний элемент вставлен в узле 0',
            });
        });