smartgwt / Tickets / #684 can't easily add an extra icon to a tab *and* get a click event for it

Originally posted by: smartgwt...@gmail.com

For now, if you really need this you can add a click handler to the iconHTML (or add it programmatically via the low-level GWT Element API).

Summary: can't easily add an extra icon to a tab and get a click event for it
Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low
Status: Accepted

Originally posted by: antonucc...@gmail.com

Trying to understand, I fixed so (using the eventproxy, because the GWT Element has no methods to add an handler, only the gwt.Widget has addAttachHandler):

350:    protected void showSample(TreeNode node) {
351:        boolean isExplorerTreeNode = node instanceof ExplorerTreeNode;
352:        if (node instanceof CommandTreeNode) {
       ....
       .... unchanged code ....
       ....
374:                    String icon = explorerTreeNode.getIcon();
375:                    if (icon == null) {
376:                        icon = "silk/plugin.png";
377:                    }

       //create a foo Img to have an eventproxy attached
378:                    Img img0 = new Img(icon, 16, 16);
379:                    img0.setVisible(false);
380:                    img0.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
381:                        @Override
382:                        public void onClick(ClickEvent event) {
383:                            SC.say("it work");
384:                        }
385:                    });

//temporary attach the image to mainTabSet to have the DOM element rendered
386: mainTabSet.addChild(img0);

       //retrieve the img0's eventproxy and attach it to the <img .. > tag
387:                    com.google.gwt.dom.client.Element img0El = img0.getDOM();
388:                    String eventProxy = img0El.getAttribute("eventproxy");
389:                    String imgHTML = img0El.getInnerHTML();
390:                    imgHTML = imgHTML.replaceAll(">", "eventProxy=\"" +eventProxy+ "\">" );

       //finally set the title
391:                    tab.setTitle("<span>" + imgHTML + " " + sampleName + "</span>");

392:                    tab.setPane(panel);
393:                    tab.setCanClose(true);

       //remove the foo img as it isn't necessary (the eventproxy has created) (it is dangerous: the garbage collector could reuse eventproxy for other handler)
394:                    mainTabSet.removeChild(img0);
395:
396:                    mainTabSet.addTab(tab);
397:                    mainTabSet.selectTab(tab);
398:                } else {
399:                    mainTabSet.selectTab(tab);
400:                }
401:            }
402:        }
403:    }

*Originally posted by:* [antonucc...@gmail.com](http://code.google.com/u/107723154050908380557/)

Trying to understand,&nbsp; I fixed so \(using the eventproxy, because the GWT Element has no methods to add an handler, only the gwt.Widget has addAttachHandler\):

350:&nbsp;&nbsp;&nbsp; protected void showSample\(TreeNode node\) \{
351:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; boolean isExplorerTreeNode = node instanceof ExplorerTreeNode;
352:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if \(node instanceof CommandTreeNode\) \{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ....
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .... unchanged code ....
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ....
374:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String icon = explorerTreeNode.getIcon\(\);
375:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if \(icon == null\) \{
376:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; icon = "silk/plugin.png";
377:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //create a foo Img to have an eventproxy attached
378:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Img img0 = new Img\(icon, 16, 16\);
379:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img0.setVisible\(false\);
380:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img0.addClickHandler\(new com.smartgwt.client.widgets.events.ClickHandler\(\) \{
381:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @Override
382:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public void onClick\(ClickEvent event\) \{
383:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SC.say\("it work"\);
384:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \}
385:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \}\);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //temporary attach the image to mainTabSet to have the DOM element rendered
386:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mainTabSet.addChild\(img0\);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //retrieve the img0's eventproxy and attach it to the &lt;img .. &gt; tag
387:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.google.gwt.dom.client.Element img0El = img0.getDOM\(\);
388:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String eventProxy = img0El.getAttribute\("eventproxy"\);
389:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String imgHTML =&nbsp; img0El.getInnerHTML\(\);
390:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgHTML = imgHTML.replaceAll\("&gt;", "eventProxy=\"" +eventProxy+ "\"&gt;" \);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //finally set the title
391:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tab.setTitle\("&lt;span&gt;" + imgHTML + "&nbsp;" + sampleName + "&lt;/span&gt;"\);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
392:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tab.setPane\(panel\);
393:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tab.setCanClose\(true\);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //remove the foo img as it isn't necessary \(the eventproxy has created\) \(it is dangerous: the garbage collector could reuse eventproxy for other handler\)
394:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mainTabSet.removeChild\(img0\);
395:
396:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mainTabSet.addTab\(tab\);
397:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mainTabSet.selectTab\(tab\);
398:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \} else \{
399:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mainTabSet.selectTab\(tab\);
400:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \}
401:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \}
402:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \}
403:&nbsp;&nbsp;&nbsp; \}

Add attachments
Cancel

You seem to have CSS turned off. Please don't fill out this field.

can't easily add an extra icon to a tab and get a click event for it

Searches

Help

#684 can't easily add an extra icon to a tab and get a click event for it

Discussion