Expand my Community achievements bar.

SOLVED

Dynamic tabs in Dialog

Avatar

Level 4

I have created a component that has a dialog. The dialog has a tab which has a dropdown. Value selected in the dropdown opens up a new tab. It is a little different from the OOTB list component in the way that changing the value in dropdown does not close the previously opened tab. That means whenever a new value is selected from the dropdown a new tab opens and it doesn't override any other tab. I have been able to achieve this much. And this is where I am facing the issue: When I fill in the values in all the tabs and then save and close the dialog and then reopen it, I can see only one tab that was the last to be opened through dropdown. See the attachment for the code.

Thanks in advance

1 Accepted Solution

Avatar

Correct answer by
Employee

Hi,

I think you can do this (sorry, never tried it directly) using an event handler for the loadcontent event on the dialog.

Regards,

Justin

View solution in original post

4 Replies

Avatar

Correct answer by
Employee

Hi,

I think you can do this (sorry, never tried it directly) using an event handler for the loadcontent event on the dialog.

Regards,

Justin

Avatar

Level 4

Thanks for the inputs Justin. But since the xtype for the dialog is tabpanel and tabpanel doesn't have a loadcontent listener, I am not sure how am I going to add this listener to the dialog.

Avatar

Level 10

I am not aware of too many examples on this use case. Here is a community article that may point you in the right direction:

http://cqblog.inside-solutions.ch/2013/06/13/programmatically-adding-tabs-to-cq-dialogs/

Avatar

Level 4

Thanks for the response Scott. However, my issue revolves mainly around ExtJs I think. Maybe I wasn't clear in the original above. I am struggling with saving the state of the dialog. I would like all the authored tabs to visible when I reopen the dialog box. I can also provide a usecase if need be:

1) Open the dialog for the component.

2) Select a value from the dropdown on first tab. A new tab will open up. Call it tab A. Author it. 

3) Select another value from the dropdown on the first tab. Another tab will open up. Call it tab B. Author it.

4) Save and close the dialog

5) Reopen the dialog.

You will see that only the tab B is visible. Ideally both tab A and tab B were authored.