ExtJS HTML dom manipulation

Many times you have a need to add, remove or update an existing HTML DOM object based on the user actions. Ext.DomQuery allows you to write query inside the selector which returns the nodes of your interest. Based on your business logic, you can perform DOM tree operations.

Before we talk about how to manipulate a DOM object in ExtJS, it is important to understand, what it is. DOM (document object model) is a standard way to represent Html, XHTML and other XML formats as a tree within a web browser. The HTML DOM is a standard for how to get, change, add, or delete HTML elements. Each DOM nodes (which can be of type element, text or document) has following pointers, which allows easier navigation:
• Parent Node
• Previous Sibling
• Next Sibling
• Child Nodes
• First Child
• Last Child

While this pointer may be useful to reach to a certain node in a tree, ExtJS implements CSS / Xpath to allow you a direct selection of a known node and from there you can navigate further and perform one or more tree operations like:
• Remove Child
• Replace Child
• Append Child
• Insert Before

In addition, HTML DOM node has the following properties, which allows you further control and you can build more logic:
• innerHTML (not a part of the W3C DOM specification, but supported by most of the browser) – is useful for returning or replacing the content of HTML elements
• nodeName – the name of the current node
• nodeValue – the value of the current node
• parentNode – the parent node of the current node
• childNodes – the child nodes of the current node
• attributes – the attributes nodes of the current node

Most of the time, you may be working with innerHTML attribute. Let’s see how does it work?

Let’s consider that you have a doctor appointment requests window and process says that the doctor must approve the appointment to be considered as valid. Also, you can send a request for rescheduling the appointments. So, the business requirement is that appointment and the re-schedule request is coming from many patients and the doctor needs to approve, disapprove or approve conditionally.

Now, I want to remove the node corresponding to this request from the browser, the moment doctor approves or disapproves the request. Also, at the same time, I do want to show other pending appointments to the doctor, including other requests from the same patient. How do we do that?

Let’s see what do you need to delete all the requests for the patient id?

While this is good and most of the time, it will work, if a patient has multiple requests with the same doctor for a different date and/or time then other requests also get deleted. What do we do in such cases? Of course, there should be a way to use patient id as well as the date and / or time information to identify the exact node that we want to delete.

Simplest way is to change your DataView construction to assign the value of id like {patient_id}{date_time}.

You may also need to modify the function to be able to pass the appropriate parameters.

I hope you find this useful. You can refer to following links for more details about the APIs used in above codes.


Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.