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

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

Learn more

A 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',
            });
        });