PDA

View Full Version : ToolBar fails to extend to the whole width of the panel



atchijov
7 Feb 2010, 7:50 AM
This started when I switch to 3.1. In number of places in my project ToolBar (usually tbar) fails to extend to the whole width of the panel. Latest example is as following


var result = { xtype: "dataview", .... };

return {
xtype: "panel", cls: "mc-editor-panel", title: "References", collapsible: true, height: 200, autoWidth: true, items: [ result ],
tbar: { xtype: "toolbar", autoWidth: true, items: [{
text: "add URL", iconCls: "mc-editor-add-url"
}, {
text: "add Book", iconCls: "mc-editor-add-book"
}, {
text: "add Text", iconCls: "mc-editor-add-text"
}, "->", {
text: "delete", iconCls: "mc-editor-delete"
}]}
};

NOTE: The problem still persist if I define tbar just as an array of buttons.

When I looked into DOM, I see



<div class="x-panel-bwrap" id="ext-gen214">
<div class="x-panel-tbar x-panel-tbar-noborder" id="ext-gen215" style="width: 294px;">
<div class="x-toolbar x-small-editor x-toolbar-layout-ct" id="ext-comp-1114" style="width: auto;">
<table cellspacing="0" class="x-toolbar-ct">
...


It looks like problem is due to style statement for id="ext-gen215". This width value is completely wrong. It looks like this value is a "smallest" width which still can fit all buttons.

Looking forward to your comments/suggestions.

Andrei

7 Feb 2010, 8:27 AM
yo udon't need to set 'autoWidth : true' in the toolbar, when used as a 'tbar' in a panel.

7 Feb 2010, 8:30 AM
btw, you don't need to configure tbar as an xtype object with items. I can simply be an array of objects that will get converted to a toolbar with items.

for example:



var panel = {
tbar : [
{
text : 'btn1',
handler : someFn
},
{
text : 'btn2',
handler : anotherFn
}
]

}

tobiu
7 Feb 2010, 8:31 AM
which layout do you use in your container?

the tbar has autowidth, but the parent does not use that. since you told nothing about the parent-container, helping might be impossible.

kind regards,
tobiu

7 Feb 2010, 8:33 AM
one last (Stylistic) tip: The benefit that Configuration objects give you is the ability to easily read a list of parameters and know what those parameters are. By writing multiple options per line, you force the readers of your code (and yourself) to scan entire line with your eyes, looking for the pattern that is the key for an option that you're seeking. By placing them one per line, you can simply scan from top to bottom vertically, and find something much easier without having to use a find utility in your IDE.

for instance:


buildViewport : function() {
if (! viewport) {
cardPanel = new Ext.Panel({
layout : 'card',
activeItem : 0,
border : false,
items : {
xtype : 'dashboard'
},
tbar : [
{
text : 'Dashboard',
iconCls : 'icon-chart_curve',
scope : this,
toggleGroup : 'navGrp',
itemType : 'dashboard',
enableToggle : true,
pressed : true,
handler : this.onSwitchPanel
},
'-',
{
text : 'Manage Departments',
iconCls : 'icon-group_edit',
itemType : 'departmentmanager',
toggleGroup : 'navGrp',
enableToggle : true,
scope : this,
handler : this.onSwitchPanel
},
{
text : 'Manage Employees',
iconCls : 'icon-user_edit',
itemType : 'employeemanager',
toggleGroup : 'navGrp',
enableToggle : true,
scope : this,
handler : this.onSwitchPanel
},
'->',
{
text : 'Log out',
iconCls : 'icon-door_out',
scope : this,
handler : this.onLogOut
}
]
});

viewport = new Ext.Viewport({
layout : 'fit',
items : cardPanel
});
Ext.getBody().unmask();
}
},

atchijov
7 Feb 2010, 9:39 AM
Thanks for quick response.

Below I am trying to reply to all questions:

1) I have tried to specify tbar: as array of buttons. this actually was how initial version of the code looked like. It does not make any difference.
2) "Parent" container of the panel with tbar is Ext.form.FormPanel
3) Panel with tbar sized properly (though it has autoWidth: true, so it may not account for much)
4) "dataview" panel "inside" panel with tbar sized properly as well.

What is really strange, I have similar situations all over the code and it will work in one case, but will not work in another (it was all working before 3.1). When it DOES work, tbar will size properly in the begging and resize appropriately if panel size changed. When it DOES NOT work, tbar will not resize at all if panel size changed.

Andrei

7 Feb 2010, 10:03 AM
does it happen when you statically size the panel?

atchijov
7 Feb 2010, 11:13 AM
No. If I explicitly specify width of the panel with tbar, then tbar will extend to the whole width of the panel.

Problem is that I can not really specify width and in any case, this pane is liable to get resized.

Andrei

7 Feb 2010, 11:16 AM
Andrei,

Is the panel a *child* of another container (Container, Panel, formpanel, tabpanel, window, etc)?

7 Feb 2010, 11:16 AM
Btw, if you're free on 2/23, feel free to join us in Chantilly at an Ext JS meetup. It would be awesome to meet more people in the area who are Ext JS developers.

atchijov
7 Feb 2010, 11:58 AM
Yes. Panel with tbar has quite a few ancestors. Most immediate parent is "form" which is in turn placed in "tabpanel" which is in turn placed in "center" region of another panel (this is why the whole thing liable to change width, there is collapsible west region).

If you want, you can look at this problem on our demo site:

https://demo.metricscenter.net/index.php/mc-catalog.html?entityId=158512&entityClass=MCDimension

It is slightly different view, but the same problem (Look at panel with title: Levels).

NOTE: You can decline any additional permissions to our applet and ignore all dialogs about it. This URL will "work" regardless.

Andrei

7 Feb 2010, 11:59 AM
I suggest you use the AnchorLayout for autoSizing. Ext JS generally enforces the mantra that child items should never autoSize themselves to a parent. The parent should autosize the child.

Does that make sense?

7 Feb 2010, 12:01 PM
You might want to reconsider the double west region layout approach or make your page wider.

The following bug is pretty bad.
http://tdg-i.com/img/screencasts/2010-02-07_1500.png

7 Feb 2010, 12:02 PM
Also:
http://tdg-i.com/img/screencasts/2010-02-07_1501.png

this is al friendly advice ;)

atchijov
7 Feb 2010, 12:23 PM
I know about and agree with most (all) of your criticism, but I really would like to resolve the problem with toolbar first.

Andrei

7 Feb 2010, 12:28 PM
Set the parent of that panel with the fit layout and call it a day. :)

You shouldn't have to nest items like you are though.

atchijov
7 Feb 2010, 12:29 PM
Using "anchor" on the panel (instead of autoWidth) solved the problem.

Thnx a lot for your time.

Hopefully will be able to see you on Feb 23rd

Andrei

dan.oprita
19 Jan 2011, 5:23 AM
I had the same problem and the following worked for me:

Add for the toolbar, the listener:



afterlayout: function() {
this.getEl().parent().setStyle("width", "auto");
}