Creating a toolbar inside the title bar?

[ykoehler]

Hello all, this is my first post inside Ext JS Forums. I am a newbie, so be friendly :-)

I want to have a FormPanel with a title, a collapsible button and more button all on the same horizontal bar. I presentely use the tbar but it is consuming too much vertical space and the title bar then look empty as it has only two elements (the title on the left and the collapse button on the right).

I saw on the net methods to make the tbar look & feel like the title bar with the exception that there is no collapsible button appearing.

I attempted to use the "header" attribute of the Panel but failed miserably. I am not yet familiar with Ext JS internals and it seems this field require more advanced knowledge.

If you feel a screenshot of my goal would be worth it I can draw one and include it on request.

Thanks again to anyone who read and put time answering or try to guide me.

Yannick Koehler

[Animal]

Yes, it is possible.

I can imagine the possibility of a plugin class adding a toolbar to the header element of a Panel.

But if you are a newbie, you should not even think about tweaks like that.

You should be working on using Viewports, Containers, Components and Layouts. You must learn the basics before you do any extras.

[ykoehler]

But if you are a newbie, you should not even think about tweaks like that.

You should be working on using Viewports, Containers, Components and Layouts. You must learn the basics before you do any extras.

Well, I am a newbie with 2 days of usage, so I know a little about ViewPort, Containers, Components and Layouts. I also have done a layout that I am satisfy with and started looking into Ext.Direct and implemented a form with this functionality, which explain that now I want to solve the location of my "save" button. So unsure if I have to get a certification before I can actually attempt such modification ;-)

I am evaluating the framework for a project and I need to see how flexible it is to meet our marketing requirement and design specification. Because they wants button on top of the panel, I need to know if this is feasible and actually make a proof of concept before we can proceed.

My idea was to go look inside the panel class code to see how the Collapsible button gets added inside the header, and then attempt to create a toolbar object that would display itself between the title and the collapsible button and call it hbar.

But before investigating that code I wanted to know if there was a simpler solution already as to me this looked like an obvious end-user request when you use a collapsible panel and wants button at the top instead of button (the amount of vertical space wasted is big in my opinion).

Yannick Koehler

[ykoehler]

I found that I can add additional buttons using tools and toolTemplate, I added a save icon, yet it goes on the right side of the collapsible and doesn't seem to offer the same flexibility as the toolbar.

[Animal]

Oh the collapsed element of a north or south region?

Yes, that's a bone of contention. It's completely wasted space!

I have had a Feature request out there for about 4 years asking that the read header element be used as the collapsed placeholder when the region is north or south.

[ykoehler]

Oh the collapsed element of a north or south region?

Yes, that's a bone of contention. It's completely wasted space!

I have had a Feature request out there for about 4 years asking that the read header element be used as the collapsed placeholder when the region is north or south.

Well in my case it is not related to the borderlayout. Here's what I have...

Viewport (taking the whole window)
West: (Collapsible/Split) 180px
East: (Collapsible/Split) 180px (collapsed by default)
North: fixed 100 px
South: fixed 30 px
Center: (fit layout)
Grid Panel:
Content Panel: (fit/autoScroll)
FormPanel1 (collapsible/titleCollapse)
FormPanel2 (collapsible/titleCollapse)
FormPanel3 (collapsible/titleCollapse)


The FormPanel1-3 are the one I want to affect. Like I said I'd like to have title, one or two button like "[CHANGE]", "[SAVE]" and "[CANCEL]" located just to the left of the collapsible tool which is an arrow that points down or up depending on the collapse state of the particular FormPanel.

I can use the tools attribute of the class Panel to add new button but the panel will add the Collapsible button to the left of my tool and I'd like it to be to the right. I also which I could use text instead of graphics, yet to me the cost of toolTemplate seems bigger than the cost of Toolbar.

Yannick Koehler

[ykoehler]

Picture are worth a thousand words right? so here it is, you can see my panel before and what I am trying to obtain.

[Animal]

Er what?

center fit layout.

That countains one child. The grid I'm assuming. (pointless nesting a gridpanel in a fit layout panel)

So what are these 3 form panels doing? and where could they be? There's no container they could go in.

[Animal]

Picture are worth a thousand words right? so here it is, you can see my panel before and what I am trying to obtain.

Can you see what's in those pictures?

[moegal]

looks like a save button in the top right in the second image
Can you use a icon only here, it is built in with tools. There is even a save icon.

http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel