Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Question using Ext's update() instead of dom.innerHTML

I have a question concerning the performance, reliability, and best practice method of using Extjs's update() method, versus directly updating the innerHTML of the dom of an Ext element.

Consider the two statements:

Ext.fly('element-id').dom.innerHTML = 'Welcome, Dude!';

and

Ext.fly('element.id').update('Welcome, Dude!', false);

I don't need to eval() any script, and I'm certain that update() takes into consideration any browser quirks.


Also, does anyone know if using:

Ext.fly('element-id').dom.innerHTML

is the same as

d.getElementById('element-id').innerHTML

?
Browser and platform compatibility are important, and if the two are fundamentally the same, then ditching Ext.element.dom.innerHTML altogether for update() would probably be my best solution.

Thanks in advance for your help,

Brian

like image 876
DondeEstaMiCulo Avatar asked Jan 22 '10 07:01

DondeEstaMiCulo


People also ask

Why innerHTML does not work?

Can break the document: There is no proper validation provided by innerHTML, so any valid HTML code can be used. This may break the document of JavaScript. Even broken HTML can be used, which may lead to unexpected problems.

How do I add text to innerHTML?

To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

How do I get the innerHTML value?

Firstly, to get the innerHTML value of any tag, you either need that tag to have its 'id' property or 'name' property set. Then you can respectively use the 'document. getElementById(yourTagIdValue). innerHTML' or 'document.


2 Answers

If you do not need to load scripts dynamically into your updated html or process a callback after the update, then the two methods you've outlined are equivalent. The bulk of the code in update() adds the script loading and callback capabilities. Internally, it simply sets the innerHTML to do the content replacement.

Ext.fly().dom returns a plain DOM node, so yes, it is equivalent to the result of getElementById() in terms of the node it points to. The only subtlety to understand is the difference between Ext.fly() and Ext.get(). Ext.fly() returns a shared instance of the node wrapper object (a flyweight). As such, that instance might later point to a different node behind the scenes if any other code calls Ext.fly(), including internal Ext code. As such, the result of a call to Ext.fly() should only be used for atomic operations and not reused as a long-lived object. Ext.get().dom on the other hand returns a new, unique object instance, and in that sense, would be more like getElementById().

like image 184
Brian Moeskau Avatar answered Sep 18 '22 03:09

Brian Moeskau


I think you answered your own question: "Browser and platform compatibility are important, and if the two are fundamentally the same, then ditching Ext.element.dom.innerHTML altogether for update() would probably be my best solution." JS libraries are intended (in part) to abstract browser differences; update is an example.

@bmoeskau wrote above, update() provides additional functionality that you don't need right for your current problem. Nevertheless, update is a good choice.

like image 44
Upperstage Avatar answered Sep 20 '22 03:09

Upperstage