View Full Version : [PARTIALLY SOLVED] Suggestion needed: toolbar in region's collapsed & title elements

13 Oct 2007, 4:37 AM
Hi! I'd like to receive some recommendations about how to achieve this:

My app has a layout whose south region is used for browsing the application's docs. In "normal" conditions, most of the time that region is collapsed; you only need to expand it occasionally, and then collapse it again, since the screen space is needed to do the real work.

This south region has, as usual, a title element (or header), and a collapsed element. They are different DOM elements, but visually and from the user's point of view, they both look like a single element which moves up and down according to the collapsed/expanded state of the region.

I decided that it would be useful to have a Toolbar within this element(s) -- it would include a TextField and maybe some buttons that allow quick access to the docs. And (this is the important part) I'd like this toolbar to stay available regardless of the region's state. So, given that titleEl and collapsedEl are in fact 2 elements, the question is: should I build two toolbars and somehow keep them in sync so that they look like they are the same toolbar? Or is there a better approach?

I hope my description is clear... Thanks in advance.

19 Oct 2007, 12:35 PM
No success with this post... too few readers :-?

Another attempt, just in case...

19 Oct 2007, 12:50 PM
You want to put the textfield into the titlebar, next to the collapse button? If so I think somebody did that in Examples.

19 Oct 2007, 1:05 PM
You want to put the textfield into the titlebar, next to the collapse button?

Yes, with the added requirement that the textfield has to remain visible/usable even when the region is collapsed.

If so I think somebody did that in Examples.

I've not been able to find such an example... but thanks anyway!

19 Oct 2007, 4:16 PM
I would consider adding a statically-sized, non-collapsible region with no title bar to hold your search. There's no easy way I can think of to do exactly what you're asking. If you can provide a screenshot of what you're looking for maybe that will lead to other ideas.

20 Oct 2007, 12:57 AM
Ext 2.0 code, drops into an examples/* directory.

<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js">
<script type="text/javascript">

var viewport = new Ext.Viewport({
region: 'center',
title: 'Main Page'
}, {
region: 'south',
id: 'doc-panel',
height: 200,
layout: 'fit',
border: false,
style: {
borderWidth: "1px 0px 0px 0px"
split: true,
autoScroll: true,
tbar: new Ext.Toolbar({
cls: 'x-panel-header',
buttons: [
new Ext.Toolbar.TextItem("Search: "),
" ",
new Ext.form.TextField({
id: "search-key"
xtype: 'button',
iconCls: "x-tool x-tool-collapse-south",
style: {
border: '0px none'
listeners: {
render: function(b) {
var e = b.getEl();
b.button = e.child("button");
border: '0px none'
handler: function(b) {
var p = Ext.getCmp("doc-panel");
var f = p.getFrameHeight();
if (p.getInnerHeight() == 0) {
} else {
p.lastHeight = p.getInnerHeight() + f;
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.'

20 Oct 2007, 3:57 PM
Thanks Animal, this is exactly what I was looking for :)

I'll wait until the migration guide is available, so I can use this solution (I'm still developing with Ext 1.1.1).

EDIT: the guide *is* available, I just found it now!

20 Oct 2007, 10:01 PM
Actually, that didn't look that good. The Toolbar didn't have that "polished" look of a Panel header, so I've added the x-panel-header class to it. Try the latest version from that post.

20 Oct 2007, 11:06 PM
And now with proper border look, and pretty toggle button...

21 Oct 2007, 2:20 AM
Toggle button classes corrected...

21 Oct 2007, 4:19 AM
Prettier and prettier. You are not only showing some useful suggestions, you are doing the whole work! =D>

If you consider this example already finished, perhaps it could be more usefully exhibited in the Examples and Extras forum, what do you think?

21 Oct 2007, 5:44 AM
Yes, I was thinking of subclassing Panel to create ToolPanel or something. A Panel which always shows its top Toolbar instead of its header.

It might need more work for it to be ready for prime time, but I think it would make a good UX.

I think having an always available toolbar is a useful feature.

In fact, I think that Ext.Panel should support this. The Collapsed title bar should just be the title bar for horizontally collapsing Panels. That way, a Toolbar could be just placed in the title bar, and that would be always visible.

21 Oct 2007, 6:38 AM
Thanks Animal for your interest. I can contribute with testing, while I begin to become familiar with 2.0.

First couple of bugs to solve:

* IE6: collapse/expand is not working right.

* FF2/Win: with the south region collapsed, a mousedown on the splitbar (hold for about a second) makes the region expand a bit.

21 Oct 2007, 7:31 AM
Well, I've logged an enhancement request.

Surely for BorderLayoutRegions that are managing "north" and "south", the simplest way of collapsing the managed Panel if not in mini-collapse mode, is to set its body height to 0px. Just really collapse the Panel. No extra "collapseEl" needs to be shown, the Panel's header will still be visible.

And then we could look into adding an Ext.Toolbar to the header element, and we could have usable collapsed north and south. Click into the search box, type a value, press enter, and it expands the Panel with your results in it.

The blank, flat blue collapsedEl is a bit of a waste of space really!

26 Nov 2007, 6:02 AM
Any update for this on Ext 2.0?

26 Nov 2007, 11:30 AM
I've been trying to create an EnhancedBorderLayout from the original BorderLayout class which displays the north and south headers when they are collapsed.

It's almost working, but it's not right yet. The code is [I]really[I] hairy in that layout class!

26 Nov 2007, 6:23 PM
Thanks Animal.

I used the code that you posted, and it seems to work fine in FF (just changed the expand to < 10 since I get a height of 2 for some reason), but totally not working in IE.

I'll look into this one and try to update it. Thanks.

16 Jan 2008, 8:22 AM
Animal, dukz, any progress on this?


28 Mar 2008, 6:18 AM
did you work on this:

Yes, I was thinking of subclassing Panel to create ToolPanel or something. A Panel which always shows its top Toolbar instead of its header.

I was seraching on the forum for some ideas on how to do exactly this!
Or do you have any suggestion on how to realize it?


11 Jun 2008, 12:08 PM
any progress on this ???