Search code examples
extjsgridwindowmodal-dialogformpanel

ExtJS - Nested Window/FormPanel

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?

Solution

  • 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.