Removing child nodes

Removing nodes could be considered much easier than adding them. All you need to do is locate the node with Ext JS and call its remove method. To test out removal of

Figure 2.4 The results of the targeted DOM element insertions with createChild

using an index and

36 CHAPTER 2 DOM manipulation

child nodes, you’ll start with a clean and controlled slate. Create a new page with the following HTML:

<div id='div1' class="myDiv"> <div id='child1'>Child 1</div> <div class='child2'>Child 2</div> <div class='child3'>Child 3</div> <div id='child4'>Child 4 </div> <div>Child 5</div>

</div>

Examining this HTML, you find a parent div with the id of 'div1'. It has five direct descendants, the first of which has the id of 'child1'. The second and third children have no ids, but they have CSS classes of 'child2' and 'child3'. The fourth child ele- ment has an id of 'child4' and a CSS class of 'sameClass'. Likewise, it has a direct child with an id of "nestedChild1" and the same CSS class as its parent. The last child of div1 has no id or CSS class. The reason you have all this stuff going on is that you’re going to start to use CSS selectors as well as directly target the ids of the elements.

In the examples where you add child nodes, you always reference the parent div (id='div1') by wrapping it in an Ext.Element class and using its create methods. To remove a child node, the approach is different. You need to specifically target the node that’s to be removed. Using the new DOM structure, let’s practice a few ways of doing this.

The first approach removes a child node from an already-wrapped DOM element. You’ll create an instance of Ext.Element wrapping div1 and then use it to find its first child node using a CSS selector:

var myDiv1 = Ext.get('div1');

var firstChild = myDiv1.down('div:first-child'); firstChild.remove();

In this example, you create a reference to div1 using Ext.get. You then create another reference, firstChild, to the first child using the Element.down method. You pass a pseudo class selector, which causes Ext JS to query the DOM tree within the context of div1 for the first child, which is a div, and wrap it within an instance of Ext.Element.

The Element.down method queries the first-level DOM nodes for any given Ext.Element. It so happens that the element that’s found is the one with the div id of 'child1'. You then call firstChild.remove, which removes that node from the DOM.

Here’s how you could remove the last child from the list using selectors:

var myDiv1 = Ext.get('div1');

var lastChild = myDiv1.down('div:last-child'); lastChild.remove();

This example works similarly to the previous one. The biggest difference is that you use the selector 'div:last-child', which locates the last childNode for div1 and

37 Managing DOM elements with Ext.Element

wraps it in an instance of Ext.Element. After that, you call lastChild.remove, and it’s gone.

NOTE CSS selectors are a powerful way of querying the DOM for items. Ext JS supports the CSS3 selector specification. If you’re new to CSS selectors, we advise visiting the following W3C page, which has a plethora of information on selectors: http://mng.bz/0vmd.

What if you want to target an element by an id? You can use Ext.get to do your dirty work. This time, you’ll create no reference and instead use chaining to take care of the job:

Ext.get('child4').remove();

Executing this code removes the child node with the id of 'child4' and its child node. Always remember that removing a node with children will also remove its child nodes.

NOTE If you’d like to read more about chaining, Dustin Diaz, an industry- leading developer, has an excellent article on his site at www.dustindiaz.com/ javascript-chaining/.

The last task we’ll look at is using Ext.Element to perform an Ajax request to load remote HTML fragments from the server and inject them into the DOM.

2.2.5 Using Ajax with Ext.Element

The Ext.Element class has the ability to perform an Ajax call to retrieve remote HTML fragments and inject those fragments into its innerHTML. You’ll need to first write an HTML snippet to load:

<div>

Hello there! This is an HTML fragment. <script type="text/javascript"> Ext.getBody().highlight(); </script>

</div>

In this HTML fragment, you have a simple div with an embedded script tag, which per- forms an Ext.getBody call. It uses chaining to execute the results of that call, to execute its highlight method. Ext.getBody is a convenient method to get a reference to the document.body wrapped by Ext.Element. Save this file as htmlFragment.html.

Next, you’ll perform the load of this snippet:

Ext.getBody().load({

url : 'htmlFragment.html', scripts : true

});

In this snippet, you call the load method of the result of the Ext.getBody call; pass a configuration object specifying the url to fetch, which is the htmlFragment.html file; and set scripts to true. What happens when you execute this code? See figure 2.5.

38 CHAPTER 2 DOM manipulation

When you execute this code snippet, you’ll see that the document body performs an Ajax request to retrieve your htmlFragment.html file. While the file is being retrieved, it shows a loading indicator. Once the request is complete, the HTML fragment is injected into the DOM. You then see the entire body element highlighted in yellow, which is an indication that your JavaScript was executed. Now you see that using the Ext.Element.load utility method is a great convenience compared to manually cod- ing an Ext.Ajax.request call.

And there you have it. Adding elements to and removing elements from the DOM is a cinch when using Ext.Element. Ext JS has another way to make adding elements even simpler, especially if you have repeatable DOM structures to be placed in the DOM. We explore the Template and XTemplate utility classes next.