ExtJS HTML dom manipulation

0 0

By Walking Tree Sencha ExtJS September 8, 2009

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.

<span style="font-family: Rubik;">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>’

        )

    });

 
</span>

<span style="font-family: Rubik;">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>’,

‘</tpl>’

)

});

</span>

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?

<span style="font-family: Rubik;">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]);
}
};</span>

<span style="font-family: Rubik;">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]);

}

};</span>

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}.

<span style="font-family: Rubik;">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>’

        )

    });</span>

<span style="font-family: Rubik;">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>’,

‘</tpl>’

)

});</span>

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

<span style="font-family: Rubik;">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]);
}
};</span>