move & move back of table changes order of objects => how to rearrange?

[eeddggaarr]

Hi,
in a tabstrip there is 1 table (always visible) and 1 listbox which is invisible at start and can be made visible by clicking a button. As the listbox should always be above the table its background colour is white and on the top of the Tab_2 in the overview:

if a user wants to edit the table with the help of builder panel the table is moved to another tab. After editing is finished the table is moved back to its original postion and this is where my problem emerges:
when the listbox is made visible now it is barely readable because the table is on top.
I have not found an API to directly alter order of objets on a page like in the builder:
any suggestions/workarounds to push the listbox to the top again?
my current workaround: when the table is moved back I simply move and re-move the listbox too. By far not optimal but its working for now.
thank you & br
edgar

[JBARLOW · Accepted solution]

Panels are your friend here 🙂

The above example I have 2 Tabs:  Tab_1 & Tab_2
pnl_1 sits on Tab_1  
pnl_2 sits on Tab_2

Table_1 sits inside pnl_1 
The listbox sits outside the panel - ergo it's always on top.

Code used:

The button on Tab_1 used to move the Table contains this code:
pnl_2.moveWidget(Table_1);
TabStrip_1.setSelectedKey('Tab_2');
Table_1.openNavigationPanel();

The button on Tab_2 uses this code:

pnl_1.moveWidget(Table_1);
TabStrip_1.setSelectedKey('Tab_1');

[eeddggaarr · Accepted solution]

Nice workaround James! Up to now I always tried to strictly minimize the number of objects I used. However, I might need to rething my approach.