ExtJS - Nested Window/FormPanel

Question

This is sort of a subjective question, but I'd like to get some ideas on the best way to lay this out. I'll set up the situation for you.

I have a grid with a column that allows the user to "View Details" on a particular item. The grid also allows the user to select multiple rows and "View Details" on those items. When the user clicks "View Details", a Window will pop over the grid, with a form inside it and controls to navigate between the multiple items (if they selected multiple items).

Here's a picture for an example: ExtJS Mockup

I have no problem creating the Window, but I'm curious as to how to handle multiple "FormPanels", if that makes sense? Would I need to create another Panel inside the container Panel for each item they have selected, and then hide/show based on the active item (shown as "Item #1" in the dropdown)?

I'm thinking of it like a deck of cards in which you can navigate through, but I've never done something like this before. Also note that each item/card will be prepopulated with information from the grid, but that should be easy enough to do if I'm using the same Store.

Thoughts?

better if you would add some code, i was searching how to add window inside another and found this, but if this would contain code, it might helped me.. — Raza Ahmed, May 27 '13 at 06:33

score 2 · Accepted Answer · answered Jun 23 '11 at 15:53

2

Yes you're right, and the layout you're looking for is the CardLayout.

You can read about it in the API here. The basic idea is like you said, a stack of cards that contain components, and you shuffle through them by calling the relevant methods.

answered Jun 23 '11 at 15:53

JamesHalsall

13,224
4
41
66

Cool, thanks. I'm assuming I can add a FormPanel inside of the individual 'items' in the CardLayout Panel? – dmackerman Jun 23 '11 at 17:05
Yes, you can treat a card like a panel and nest whatever you like in there – JamesHalsall Jun 23 '11 at 17:52

ExtJS - Nested Window/FormPanel

1 Answers1