Chapter 2. DOM manipulation

When working on applications, you may think metaphorically to help you develop parallels for concepts in your mind. For instance, we like to think of the timing of an application’s launch as similar to that of the space shuttle’s launch, where timing can mean the difference between success and frustration. Knowing when to initialize your JavaScript is critical when dealing with anything that manipulates the DOM. In this chapter you’ll learn how to launch your JavaScript using Ext JS to ensure your application code initializes at the right time on each browser. Then we’ll discuss using Ext.Element to manipulate the DOM.

As you know, DOM manipulation is one of the tasks that web developers are required to code for most of the time. Whether it’s the addition or removal of elements, I’m sure you’ve felt the pain of performing these tasks with the out-of-the-box JavaScript methods. After all, DHTML has been at the center of dynamic web pages for ages now.

We’ll look at the heart of Ext JS, known as the Ext.Element class, which is a robust, cross-browser, DOM element-management suite. You’ll learn to use Ext.Element to add nodes to and remove them from the DOM, and you’ll see how it makes this task easier.

2.1. Let Ext JS kick off your code

2.2. Managing DOM elements with Ext.Element

2.3. Using templates and XTemplates

2.4. Summary