Jump to main content Jump to doc navigation

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',
            });
        });
  1. Ext JS - Окна сообщений
  2. Ext JS - Ajax
  3. Ext JS - Анимация
  4. Ext JS - Управление узлами
  5. Ext JS - Панели
  6. Ext JS - Расширенная сетка
  7. Ext JS - Внутри CMP

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

  • modmore
  • STERC
  • Digital Penguin
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Dannevang Digital
  • Sepia River Studios
  • Chris Fickling
  • CrewMark
  • deJaya
  • eydolan
  • Following Sea
  • Lefthandmedia
  • Murray Wood
  • Anton Tarasov
  • Stéphane Jäggi
  • Raffy
  • Snow Creative
  • Nick Clark
  • A. Moreno
  • JT Skaggs
  • Helen
  • YJ
  • krisznet
  • Richard
  • Yanni

Budget

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

Learn more