PDA

View Full Version : Creating a toolbar inside the title bar?



ykoehler
5 Mar 2010, 6:16 AM
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
5 Mar 2010, 6:43 AM
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
5 Mar 2010, 7:03 AM
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
5 Mar 2010, 7:17 AM
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
5 Mar 2010, 7:17 AM
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
5 Mar 2010, 7:32 AM
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
5 Mar 2010, 7:37 AM
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
5 Mar 2010, 7:38 AM
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
5 Mar 2010, 7:38 AM
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
5 Mar 2010, 8:00 AM
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

Animal
5 Mar 2010, 8:08 AM
Yes. There is the http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel&member=toolTemplate

But more to the point is his Container->Component structure.

It looks knackered.

Animal
5 Mar 2010, 8:08 AM
Yes. There is the http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel&member=toolTemplate

But more to the point is his Container->Component structure.

It looks knackered.

Animal
5 Mar 2010, 8:09 AM
Admins!

Why are my posts always doubled?

ykoehler
10 Mar 2010, 11:01 AM
I found out how to do it. Yep, I had to use tools here how I did it:


var myPanel = new Ext.form.FormPanel({
collapsible: true,
collapseFirst: false, /* Make sure the collapse tool icon show up to the right */
titleCollapse: true,
title: 'MyTitle',
defaultType: 'textfield',
items: [
{
name: 'field1',
fieldLabel: 'field1'
},
{
name: 'field2',
fieldLabel: 'field2'
}
],
tools: [
{
id: 'save-link',
text: '[Save]',
}
]
});and I added a css rule:


.x-tool-save-link{
background:transparent;
}Just love it, wish it was easier to find but at least I got an understanding of the framework code a little more due to this issue.

--
Yannick Koehler

Animal
10 Mar 2010, 11:55 AM
How would you change the docs to make it easier to do what you just did?

Let's make it easier for the next person!

steffenk
10 Mar 2010, 12:41 PM
A panel is a panel is a panel :)

ChrisW
10 Mar 2010, 2:13 PM
As another newbie I too have stumbled upon the tools feature in panels rather than found the documentation introduce it. Zend framework (which I using as my backend) provide a concept of use for each class in addition to the API. so I would like to see tweaking of the documentation to understand more of how the libraries are intended to be used.
The examples are useful but only go so far.
As a halfway house I was wondering about working thru the forum questions and collating similar How Do I questions and then postulating a best practice approach. A second suggestion is to build up a strucured approach to trouble shooting. My recent question about troubleshooting an event did not really provide the diagnostic tools for me to sort the problem out and then to provide feedback to the community.
This is intended to be constructive as when I 'master' a feature I do appreciate the design approach.

Animal
10 Mar 2010, 3:28 PM
Firebug === diagnostic tool

ykoehler
11 Mar 2010, 6:00 AM
How would you change the docs to make it easier to do what you just did?

Let's make it easier for the next person!

I appreciate this open-mind spirit, way to go!

Like I mention in my subject my goal was to add tools or button to the title bar. Therefore if for example "tools", which is a very generic term, would have been called "titleTools" or "headerTools" it would already have help me out getting there. Second, the description of tools is this:


An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.Element.html) referenced by a public property called tools.After the fact it seems obvious that the "header" is where the title is contained and that I should have figured this out, yet what would have helped is a graphics displaying the different part of a panel (header, body, footer, top bar, bottom bar, title area, tool area, etc)

Then my next problem was that once I found what tools is used for, the description indicate that tools is an array, no prob there, and that is contains tools button config items. Is this a button class object? a Toolbar item? or something else? An hyperlink to what this is exactly would be good.

So once you know this and you add a button inside a collapsible panel what you see is actually strange. First the button that you add show up with a X symbol. Quite strange... Then you realize that those button are special, they use a CSS background-position statement, that's a CSS sprite I believe. So you have to figure out how to get rid of the X, using CSS...

If instead, it was part of the API like this:


{ id: 'toggle', sprite: 'x-tool-toggle' }someone who add a new tool like this:


{ id: 'save', text: '[SAVE]' }Won't have to figure out why the text isn't rendered and that he gets an X instead. Also text is actually not a listed config items yet it does work, so should it be added to the documentation?

Finally, once you solve the display the layout is still wrong (in my case, not all case). The collapse toggle button is draw to the left side of the added tool buttons. Why is that? If you look at the HTML source you do see your button first, then the collapse toggle button yet the display is wrong.

After code investigation you then find out what is the purpose of collapseFirst. Here is it's description:


true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the panel's title bar, false to render it last (defaults to true).The panel's title bar? Is this the same as header tool area? Once you find the collapseFirst then you are ok, but to find it you have to investigate the code or read the whole panel doc. Could be nice to indicate "related items" documentation under the different attributes such as tools.

But hey, it is not that bad, the framework is very nice and it is working. So take my little complaints with a grain of salt.

--
Yannick Koehler

Animal
11 Mar 2010, 6:09 AM
Did you miss the huge section describing all that??

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/toolsconfig.jpg

Animal
11 Mar 2010, 6:12 AM
After code investigation you then find out what is the purpose of collapseFirst.



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

ykoehler
11 Mar 2010, 6:17 AM
Did you miss the huge section describing all that??

It doesn't describe all that I talk about... It describe only what a tool button config is. Yet like I said, text works and it is not described. Also why not re-using existing class like button instead of defining a whole new class inside the documentation of a property?

Animal
11 Mar 2010, 6:36 AM
text does not work. It does nothing.

ykoehler
11 Mar 2010, 6:41 AM
text does not work. It does nothing.

Well recheck my solution, works fine!

Including a screenshot that shows it...

Animal
11 Mar 2010, 6:52 AM
You did something else.

Only the properties documented are used.

steffenk
11 Mar 2010, 8:47 AM
A picture could help a lot showing where the title is, the tools, the tbar, the bbar, the panel body etc.

ykoehler
11 Mar 2010, 11:36 AM
You did something else.

Only the properties documented are used.

you're right, I overrided the way those tools get rendered to include text.