PDA

View Full Version : Bug? buttongroup doesnt layout properly if on a hidden card in cardlayout.



scaddenp
21 Feb 2011, 7:05 PM
I have panel with toolbar. The toolbar has a number of button groups. This one is coded:


{
xtype: 'buttongroup',
title: 'Select',
defaults: {
scale: 'small',
enableToggle: true,
pressed: false,
group: 'draw',
toggleGroup: 'draw',
allowDepress:false
},
items: [combo,{
id: 'pointSelectButton',
text: 'By Point',
disabled:true,
toggleHandler: function(){
toggleControls("pointSelect");
}
},{
id: 'polySelectButton',
text: 'By Polygon',
disabled:true,
toggleHandler: function(){
toggleControls("polySelect");
}
},searchField,
{
id: 'advancedButton',
text: 'Advanced',
enableToggle: false,
allowDepress: true,
handler: displayQueryForm
}]

The panel is in a card layout. When the card is display first, all if fine. However, if another is displayed first, then when the panel is made visible, the buttongroup layout is flawed. The two button "pointselectButton" and "polySelectButton" are hidden behind combo and searchfield. "Advanced" is correct.
2478324784
Wrong Right

Barzoy
21 Feb 2011, 11:03 PM
1. Set toolbars height to any fixed value to avoid problems with IE7
2. Try this

// don't use xtype, call buttonpanels constuctor directly by yourself
new Ext.ButtonGroup({
width: 90,
onAfterLayout: function() {
// set buttonpanels height to toolbars height
this.setHeight(this.ownerCt.getHeight());
},
items: [
/*...
blah-blah-blah
...*/
]
});
3. Or this

// don't use xtype, call buttonpanels constuctor directly by yourself
new Ext.ButtonGroup({
width: 90,
onAfterLayout: Ext.emptyFn,
items: [
/*...
blah-blah-blah
...*/
]
});

scaddenp
22 Feb 2011, 11:58 AM
Thanks for the suggestion. However, as the screenshots show, the height is fine but width isnt. Also the issue shows in FF,IE,Safari and Chrome.

scaddenp
23 Feb 2011, 7:43 PM
Still stumped. I tried
layout:new Ext.layout.CardLayout({layoutOnCardChange:true}),

but no change. Unless the card is rendered first, it wont layout the button group properly.

Condor
24 Feb 2011, 2:29 AM
How did you put the buttongroups in the toolbar? Are you using a layout that gives the buttongroups a width?

scaddenp
24 Feb 2011, 1:10 PM
No. Full code for the Tbar is:


mapTBar = new Ext.Toolbar({
items: [{
xtype: 'buttongroup',
defaults: {
scale: 'medium',
iconAlign:'top'
},
title: 'Navigation',
items: [{
text: 'previous',
iconCls: 'toolBarNavPrevious',
group: "nav",
handler: nav.previous.trigger
},{
text: 'next',
group: "nav",
iconCls: 'toolBarNavNext',
handler: nav.next.trigger
},{
id: 'panZoomButton',
text: 'Zoom/Pan',
iconCls: 'toolBarPan',
enableToggle: true,
pressed: true,
checked: true,
allowDepress: false,
group: "draw",
toggleGroup: "draw",
toggleHandler: function(){
toggleControls("Zoom/Pan");
}
}]
},{
xtype: 'buttongroup',
title: 'Measure',
defaults: {
scale: 'medium',
iconAlign:'top',
enableToggle: true,
pressed:false,
allowDepress:false,
group: 'draw',
toggleGroup: 'draw'},
items: [{
id: 'measureDisatanceButton',
text: 'Distance',
iconCls: 'toolBarMeasureDistance',
toggleHandler: function(){
toggleControls("measureDistance");
}
},{
id: 'measureAreaButton',
text: 'Area',
iconCls: 'toolBarMeasureArea',
toggleHandler: function(){
toggleControls("measureArea");
}
}]
},
new GeoExt.Toolbar.ControlDisplay({
map: map,
control: mousePositionControl
}),'->',
{
xtype: 'buttongroup',
title: 'Select',
defaults: {
scale: 'small',
enableToggle: true,
pressed: false,
group: 'draw',
toggleGroup: 'draw',
allowDepress:false
},
items: [combo,{
id: 'pointSelectButton',
text: 'By Point',
disabled:true,
toggleHandler: function(){
toggleControls("pointSelect");
}
},{
id: 'polySelectButton',
text: 'By Polygon',
disabled:true,
toggleHandler: function(){
toggleControls("polySelect");
}
},searchField,
{
id: 'advancedButton',
text: 'Advanced',
enableToggle: false,
allowDepress: true,
handler: displayQueryForm
}]
}]
});



As I said, it works fine if this card is displayed initially. Display fine when reactivated, but doesnt calculate a width correctly if another card is displayed first.

If this is a bug rather than my inexperienced coding, then I can make a minimal js to demo it. Perhaps should do that right away.

scaddenp
24 Feb 2011, 2:57 PM
okay, here is pretty minimal, standalone code that reproduces the problem.
HTML is:


<!DOCTYPE HTML PUBLIC "http://www.gns.cri.nz">
<html style="height:100%">
<head>
<title>card layout problem</title>
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="Tbar_layout.js"></script>
<link rel="stylesheet" href="ext-3.2.1/resources/css/ext-all.css" type="text/css" />

</head>
<body style="height:100%">


</body>
</html>Tbar_layout.js is


var mapPanel;
Ext.onReady(function() {
toolbar = new Ext.Toolbar({id:'maintoolbar',enableOverflow:true,
items:[{id:'toogle', xtype:'button', text:'switch',
handler:function (){
if (mainbody.layout.activeItem.id=='PBE') {
mainbody.layout.setActiveItem('mif')
} else {
mainbody.layout.setActiveItem('PBE');
}
}
}]
});
hdrPanel = new Ext.Panel({
height:50,
region:"north",
bbar:toolbar
});
searchField = new Ext.form.TextField({
name: 'field1',
enableKeyEvents: true,
emptyText: 'enter search term',
text: 'search',
disabled:true,
});
combo = new Ext.form.ComboBox({
displayField: 'layerName',
valueField: 'layerID',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
editable: false,
width: 120
});

mapTBar = new Ext.Toolbar({
items: [
'->',
{
xtype: 'buttongroup',
title: 'Select',
defaults: {
scale: 'small',
enableToggle: true,
pressed: false,
group: 'draw',
toggleGroup: 'draw',
allowDepress:false
},
items: [combo,
{
id: 'pointSelectButton',
text: 'By Point',
disabled:true
},
{
id: 'polySelectButton',
text: 'By Polygon',
disabled:true
},searchField,
{
id: 'advancedButton',
text: 'Advanced',
enableToggle: false,
allowDepress: true,
}]
}]
});

mapPanel = new Ext.Panel({
region:'center',
tbar: mapTBar
});
mif = new Ext.Panel({
id: 'mif',
loadMask:false
});
PBE = new Ext.Container({
id :'PBE',
layout:'border',
items:[mapPanel]
});
mainbody = new Ext.Container({
layout:new Ext.layout.CardLayout({layoutOnCardChange:true}),
region:'center',
activeItem:1,
items:[PBE,mif]
});
viewPort = new Ext.Viewport({
layout:'border',
items:[hdrPanel,mainbody]
});
});
Press switch button to change cards. If activeItem=1 by default then the button group fails to layout properly.
Change the code above so activeItem=0, and the button group layouts is correct.

scaddenp
24 Feb 2011, 3:02 PM
Fails in FF, Safari, Chrome, but the test code (slightly modified see below) works in IE8.


var mapPanel;
Ext.onReady(function() {
toolbar = new Ext.Toolbar({id:'maintoolbar',enableOverflow:true,
items:[{id:'toogle', xtype:'button', text:'switch',
handler:function (){
if (mainbody.layout.activeItem.id=='PBE') {
mainbody.layout.setActiveItem('mif')
} else {
mainbody.layout.setActiveItem('PBE');
}
}
}]
});
hdrPanel = new Ext.Panel({
height:50,
region:"north",
bbar:toolbar
});
searchField = new Ext.form.TextField({
name: 'field1',
enableKeyEvents: true,
emptyText: 'enter search term',
text: 'search',
disabled:true
});
combo = new Ext.form.ComboBox({
displayField: 'layerName',
valueField: 'layerID',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
editable: false,
width: 120
});

mapTBar = new Ext.Toolbar({
items: [
'->',
{
xtype: 'buttongroup',
title: 'Select',
defaults: {
scale: 'small',
enableToggle: true,
pressed: false,
group: 'draw',
toggleGroup: 'draw',
allowDepress:false
},
items: [combo,
{
id: 'pointSelectButton',
text: 'By Point',
disabled:true
},
{
id: 'polySelectButton',
text: 'By Polygon',
disabled:true
},searchField,
{
id: 'advancedButton',
text: 'Advanced',
enableToggle: false,
allowDepress: true
}]
}]
});

mapPanel = new Ext.Panel({
region:'center',
tbar: mapTBar
});
mif = new Ext.Panel({
id: 'mif',
loadMask:false
});
PBE = new Ext.Container({
id :'PBE',
layout:'border',
items:[mapPanel]
});
mainbody = new Ext.Container({
layout:new Ext.layout.CardLayout({layoutOnCardChange:true}),
region:'center',
activeItem:1,
items:[PBE,mif]
});
viewPort = new Ext.Viewport({
layout:'border',
items:[hdrPanel,mainbody]
});
});

scaddenp
24 Feb 2011, 3:06 PM
Correction - ALMOST works in IE8. Layout better but still have one item on top of another.

Condor
24 Feb 2011, 11:30 PM
A ButtonGroup isn't very good at determining it's own width. I suggest you give it a fixed width.

Barzoy
25 Feb 2011, 1:39 AM
Try following layout

new Ext.Toolbar({
height: 85,
layout: 'fit',
items: [{
xtype: 'form',
border: false,
bodyBorder: false,
bodyStyle: {
background: 'transparent'
},
frame: false,
items: [{
xtype: 'container',
layout: 'column',
defaults: {
onAfterLayout: Ext.emptyFn
},
items: [
new Ext.ButtonGroup({
title: 'Test',
width: 150,
items: [
// any controls here
]
})
]
}]
}]
});

It's really possible to make this thing work.
24861

scaddenp
27 Feb 2011, 6:50 PM
nope. The width parameter seems to be ignored. I tried 100,200, 500, 900. The results are just the same.

Note that a cut down test has been posted to bugs.

scaddenp
27 Feb 2011, 6:57 PM
Got it working. Noticed another bug report with 'card' layout and suggestion of hideMode:'offsets'. I tried that and bingo. It works without any width etc.