View Full Version : HTML in last tab from BorderLayout does not behave correctly

5 Jun 2007, 3:40 AM

I have to insert a button (div based) inside the tab label. I did it and it works just fine for all tabs except for the last one.

My test code:

layout.add('center', new Ext.ContentPanel('clipboardArticlesContainer', {title: '<b>Tab1<div id=\'id1\'>o</div></b>'}));
layout.add('center', new Ext.ContentPanel('clipboardMediaContainer', {title: '<b>Tab2<div id=\'id2\'>o</div></b>'}));

Ext.EventManager.on("id1", 'click', function(e) {alert(1);});
Ext.EventManager.on("id2", 'click', function(e) {alert(2);});

If you try to click on the button from the last panel (this is happening only on the last tab), you'll notice there's no alert message, as opposed to the first tab which fires the event correctly.

Can you point me on how to fix/workaround this? I tried inserting/removing a dummy tab, but the ext engine does not get fooled so easily.


5 Jun 2007, 3:58 AM
What is that code supposed to do? Can you describe what you think it's doing?8-|8-|8-|8-|8-|

5 Jun 2007, 4:06 AM
If I have two tabs with the labels "Tab1" and "Tab2", it adds to the right of each button (using css styling of course) a small button (in the example above, the buttons are actually the letter 'o' - <b>Tab2<div id=\'id2\'>o</div></b>'.

Clicking on that button would perform some special functionality requested by the client, like a search.

5 Jun 2007, 4:18 AM
You you put an element inside the tab's title.

Then you want to perform an action on click of that element do you?????

5 Jun 2007, 5:05 AM
Yes, I do :-)

5 Jun 2007, 6:00 AM
Right, you want an Element, and do so something ON CLICK of that Element...

<Takes horse to water...>


5 Jun 2007, 6:05 AM
Ok. As I mentioned, I did it. It works just fine for all tabs except the last one. What's wrong with the last tab? Why the events are not thrown?

5 Jun 2007, 6:48 AM

Ext.get("yourElementId").on("click", function(e) { alert("Clicked on" + e.getTarget().id;)});

5 Jun 2007, 9:01 AM
Thanks for the replies. This was the first thing I tried amongst many more. Even document.getElementById("yourElementId").onclick = function() {alert("hello");}; doesn't work. It's something fishy with the way events are handled for that last tab.

It is actually very simple to try the above code. Just paste it into any of the examples in the layout directory and you'll see what I mean (ver 1.0.1).