4. Ext JS Tutorial - Manipulating Nodes
Last updated Apr 12th, 2019 | Page history | Improve this page | Report an issue
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
$301 per month—let's make that $500!
Learn moreA common thing for Javascript to do is to manipulate sections of the page. We include our standard Ext JS stuff and styling and let's consider a page with a div that we want to remove:
<html>
<title>My Ext JS Test Page</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>Handling Elements</h1>
<div id="div1" class="myDiv">I am here to stay</div>
<div id="div2" class="myDiv">I will get deleted</div>
<div class="myclass">One</div>
<div class="myclass">Two</div>
<div class="myclass">Three</div>
</body>
</html>
When you load this in a browser, you should see that only the div1 remains: div2 gets deleted. Note how the Ext JS selector does not use the hashtag (#) like jQuery does.
Ext JS Select¶
So how does Ext JS do selections like jQuery? It has a couple ways. One option is its select() method, which does use notation similar to jQuery.
Consider the following code that would delete all three divs where class="myclass":
Ext.onReady(function() {
Ext.select('.myclass').each(function(el){
el.remove();
});
});
Appending Content¶
Consider the following two variations of code that produce the same result:
Ext.onReady(function() {
var myDiv1 = Ext.get('div1');
myDiv1.createChild('<div>My baby goes here.</div>');
// OR a bit more verbose and self-documenting
myDiv1.createChild({
tag: 'div',
html: 'My baby goes here.'
});
});
The createChild method is similar to jQuery's append() method.
Prepending Content¶
Ext JS can also put stuff at the beginning of an element. Consider the insertFirst method:
Ext.onReady(function() {
var myDiv1 = Ext.get('div1');
myDiv1.insertFirst({
tag : 'div',
html : 'Child inserted at node 0',
});
});