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
$311 per month—let's make that $500!
Learn moreJavaScript обычно использует манипуляции с разделами страницы. Мы включили наши стандартные вещи и стили 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',
});
});
- Ext JS - Окна сообщений
- Ext JS - Ajax
- Ext JS - Анимация
- Ext JS - Управление узлами
- Ext JS - Панели
- Ext JS - Расширенная сетка
- 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
Budget
$311 per month—let's make that $500!
Learn more