2

I wonder, if someone has THE CLUE for me on one of my devel problem (sure you do ;-) ).

I try to use a "Dojo Tab Container" with dynamic Dojo Tab Panes.

<xp:div id="tabs">
    <xe:djTabContainer id="djTabContainer1" tabPosition="top"
        style="height:250px;width:500px" defaultTabContent="defTab">
        <xp:this.facets>
            <xe:djTabPane xp:key="defTab" id="myTab" partialEvents="true" closable="true">
                <xp:panel>
                    <xp:label value="#{javascript:getComponent('myTab').getTitle()}"></xp:label>
                </xp:panel>
            </xe:djTabPane>
        </xp:this.facets>
    </xe:djTabContainer>
</xp:div>

Then there's a SSJS (button) event to add tabs (actually the action is more complex to calculate title etc., but this should explain):

var cont:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer = getComponent('djTabContainer1');
cont.createTab({id:'tab1', tabUniqueKey:'tab1', tabTitle:'tab1'});
cont.createTab({id:'tab2', tabUniqueKey:'tab2', tabTitle:'tab2'});
cont.createTab({id:'tab3', tabUniqueKey:'tab3', tabTitle:'tab3'});

Now I want to programmatically switch (open) to another tab, or close a tab. It's quite difficult to find useful examples here.

I found out, that I can programmatically switch to another tab via cont.setSelectedTab('2') instead of cont.setSelectedTab('tab2') - as I would expect. For some reason the tabUniqueKey parameter is fully ignored, while the tabTitle parameter isn't. Even worse: it looks like all createTab()-parameters are ignored, except of tabTitle.

Is there an elegant way to get the tab pane component? getComponent('tab2') doesn't work. Neither "id:'tab2'" nor "tabUniqueKey:'tab2'" are taken in account. I can get a tab using getComponent('myTab'), but that's fully useless, if all tabs have the same id.

So, neither does

var cont:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer = getComponent('djTabContainer1'); 
var tabSel:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabPane = comp.selectTab('tab2');

nor

var tabSel:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabPane = comp.setSelectedTab('tab2');

At least what I'm looking for is something similar to:

cont.closeTab('tab3'); // to close tab3
Thomas Z
  • 89
  • 1
  • 1
  • 9

1 Answers1

1

createTab() returns a UIDojoTabPane pane object and you can use it to select the created tab afterwards:

var cont:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer = getComponent('djTabContainer1');
var paneTab1:com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabPane = cont.createTab({id:'tab1', tabUniqueKey:'tab1', tabTitle:'tab1'});
...
cont.setSelectedTab(paneTab1.getTabUniqueKey());

You can use this pane object to close the tab too:

paneTab1.closeTab()
Knut Herrmann
  • 30,880
  • 4
  • 31
  • 67