4. Ext JS Tutorial - Manipulating Nodes
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
- 7. Ext JS Tutoral - Advanced Grid
- 8. Ext JS Tutorial - Inside a CMP
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).