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 these 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 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 request for rescheduling the appointments. So, the business requirement is that appointment and re-schedule request is coming from many patients and doctor needs to approve, disapprove or approve conditionally.

var pendingAppointmentsRequest = new
Ext.DataView({

        itemSelector: 'div.thumb-wrap',

        style:'overflow:auto',

        store: appointmentsStore,

        deferEmptyText : true,

        emptyText:'No entry found',

          tpl: new Ext.XTemplate(

            '<tpl
for=".">',

            '<div
class="thumb-wrap" id="{patient_id}">',

            '<div
style="float:right; padding-top=20px; padding-left=20px">',

           
'<span><a><b>{patient_name}</b> needs appointment with
you at {date_time}</a>',

            '<button
type="button" onclick="approveAppointment({patient_id},
\'{date_time}\');">Approve</button>',

            <<<Some more
codes>>>

            '</div>',

            '</div>',

            '</tpl>'

        )

    });

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?

function removeAppointmentRequest(patientId) {
var elArray = Ext.DomQuery.select("div[id=requests] div[id=" + patientId +"]");
for( elementCount = 0; elementCount < elArray.length; elementCount++) {
var parentNode = elArray[elementCount].parentNode;
parentNode.removeChild(elArray[elementCount]);
}
};

While this is good and most of the time, it will work, if a patient has multiple requests with the same doctor for different date and/or time then other requests also gets deleted. What do we do in such cases? Of course, there should be a way to use patient id as well as 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 value of id like {patient_id}{date_time}.

var pendingAppointmentsRequest = new
Ext.DataView({

        itemSelector: 'div.thumb-wrap',

        style:'overflow:auto',

        store: appointmentsStore,

        deferEmptyText : true,

        emptyText:'No entry found',

          tpl: new Ext.XTemplate(

            '<tpl
for=".">',

            '<div
class="thumb-wrap" id="{patient_id}{date_time}">',

            '<div
style="float:right; padding-top=20px; padding-left=20px">',

           
'<span><a><b>{patient_name}</b> needs appointment with
you at {date_time}</a>',

            '<button
type="button" onclick="approveAppointment({patient_id},
\'{date_time}\');">Approve</button>',

            <<<Some more
codes>>>

            '</div>',

            '</div>',

            '</tpl>'

        )

    });

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


function removeAppointmentRequest(patientId,dateTime ) {
var elArray = Ext.DomQuery.select("div[id=requests] div[id=" + patientId + dateTime +"]");
for( elementCount = 0; elementCount < elArray.length; elementCount++) {
var parentNode = elArray[elementCount].parentNode;
parentNode.removeChild(elArray[elementCount]);
}
};

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

References
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html
http://www.yui-ext.com/deploy/ext-1.0.1/docs/output/DomQuery.jss.html
http://www.w3schools.com/XPath/

Tagged with: , , , ,
Posted in Sencha ExtJS
5 comments on “ExtJS HTML dom manipulation
  1. RobD says:

    Your site was extremely interesting, especially since I was searching for thoughts on this subject last Thursday. 🙂

  2. Kelli Garner says:

    Great site, how do I subscribe?

  3. Tnelson says:

    Generally I do not post on blogs, but I would like to say that this post really forced me to do so, Excellent post!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: