Create a custom collapse panel - Extjs 4.0a2

Question

ok here is an easy one. I need to create a simple custom panel that will have a collapse functionality. The thing is I need to control over the collapse button position, and I need to control the collapsed mode UI (that is I want the panel to show somethings in collapsed mode and not just the title.

for example : I want to create a search panel that will be nested in a viewport above a the pages of the application. each page will have access to the search panel title and its advance search form which is collapsible. in a collapse mode only a simple search and the title are visible.

here is an image before the collapse: (once clicking the circled arrow the panel will expand to show the advance search)

here is an image after the collapse:

how would you go about to implement such functionality?

Answer 1

I would use two panels in a vbox layout, the top one contains the basic search, and the bottom one contains the advanced search.

In the top panel I would just add an image of a down arrow and handle the onclick event to toggle the bottom panel.