Partial Header Panel Collapse

[oberoishikhar]

Hi All,

I am bit new to the extJS and I am working on designing a header panel that, if collapsed, collapses partially and displays a few text boxes. When expanded, it should display all the text boxes inside it (by resizing).

I was going through various forums, but no where I could find a way to actually partially collapse a panel. I came upon a snippet:


//to partially collapse a panellisteners : { beforeCollapse: function(cmp){ cmp.setHeight(cmp.minHeight); cmp.collapsed = true; // needed for the expand button to still work return false; // prevents collapsing of the panel. }}
But this isnt working for me. The requirement is as follows:

1. Upon load of the page, display a partially collapsed panel with few fields visible (with splitter bar image pointing downward).
2. On clicking on the splitter bar image, the panel should expand and display all the fields in it and splitter bar image resets to pointing top.

Can anyone point me in right direction please? Thanks!!

Shikhar

[mitchellsimoens]

Ext JS 3 or 4?

[oberoishikhar]

Hi, its 4.0.7

[mitchellsimoens]

I wouldn't have the panel be collapsible. I would have my own tool that looks like a collapse/expand tool but in the handler set the size of the panel.

[mitchellsimoens]

Also, I moved this to the Ext JS 4 Q&A forum