View Full Version : \n and ExtJS.innerHtml conflicting?

9 Jul 2009, 11:13 AM
Random question for folks. I have this event on various HTMLelement's, which I add to a panel.

After I add all my elements to the panel, I add a newline "\n". (panel.dom.innerHtml += '\n')

This causes all the event watchers to break and simply function. However if I don't add this newline character, everything works.

Anyone run into this weird bug before?

BTW I need the newline cause it helps deal with a layout issue. ~_~

9 Jul 2009, 11:22 AM
For real?

You actually ask ther browser to parse an HTML string to build a new DOM structure? And you expect it to still work?

And there's no such thing as "newline". It's just a white space element.

Your web app has problems.

What are you actually doing?

9 Jul 2009, 11:36 AM
Hmm. I'm trying to build a tag cloud using a <p> and some styled <a> tags. In simple pseudo code it looks like this:

tag_cloud = new Ext.Panel({cls: tagcloud});
tag_cloud_html = Ext.get(this.getDomElementId('tagcloud'));

foreach(anchor) {

//then I put in my anchors
tag_element = tag_cloud_html.innerHtml({the anchor}, true); // returns HTMLELement
tag_element.on('click', {some function}); // add the on click event

//at this point, if i DONT add a newline, i get one huge string that forces layout to widen
//so i add the newline
tag_cloud_html.dom.innerHTML += '\n'


When I have that \n it breaks all my event watchers. If I don't add that \n, the watchers work, but the layout is all wrong. Am I just building this wrong in general?

9 Jul 2009, 11:46 AM
Am I just building this wrong in general?

You should use DomHelper to build the HTML object instead of doing ugly string concat. Then, you should add a single click handler to the container and delegate all the handling to that fn rather than adding a boatload of handlers.

9 Jul 2009, 11:57 AM
If I were you I'd post a simple working showcase:

9 Jul 2009, 12:07 PM
You don't see what I'm saying? You're adding event listeners, and then setting innerHTML, and you can't see that the elements to which you added listeners don't exist any more?

9 Jul 2009, 12:28 PM
I dont understand Animal. But I suspect you are on to something...

I added the anchor elements with the event attached. Why would hardcoding "\n" after the anchor element added disrupt the event listeners? The anchor element is still in its original state.

9 Jul 2009, 12:56 PM
Setting innerHTML creates a whole new DOM structure.

The browser parses it, creates new elements and adds them into the element.

What did you think?

9 Jul 2009, 1:00 PM
Well I used the += operator.

So it should take the old contents, and add the \n to the end.

tag_cloud_html.dom.innerHTML += '\n'


9 Jul 2009, 1:02 PM
<shoots self>

9 Jul 2009, 1:08 PM
Am I missing something? Doesn't event listening require the fact that the properties of the anchor tag doesn't change, ie. the ID? What should it matter I am appending a \n ?

10 Jul 2009, 6:44 AM
Care to enlighten me Animal? You clearly realize something I don't... :-|