PDA

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



rocketext
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. ~_~

Animal
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?

rocketext
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?

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

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.

mjlecomte
9 Jul 2009, 11:57 AM
If I were you I'd post a simple working showcase:
http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase

Animal
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?

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

Animal
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?

rocketext
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'

Right?

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

rocketext
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 ?

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