Jump to main content Jump to doc navigation

4. Ext JS Tutorial - Manipulating Nodes

Other versions: 3.x — Other languages: EN RU — Found a problem? Please edit this page or report an issue.

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',
            });
        });
  1. Ext JS Tutorial - Message Boxes
  2. Ext JS Tutorial - Ajax Include
  3. Ext JS Tutorial - Animation
  4. Ext JS Tutorial - Manipulating Nodes
  5. Ext JS Tutorial - Panels
  6. Ext JS Tutoral - Advanced Grid
  7. Ext JS Tutorial - Inside a CMP