PDA

View Full Version : Buttongroup doesnt layout properly if on a hidden card in cardlayout.



scaddenp
24 Feb 2011, 3:22 PM
Ext version tested:


Ext 3.2 rev 1



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


Chrome 9.0
IE8 (Does slightly better than other browsers - only one item hidden
FF3 (firebug 1.3.0.10 installed)
Safari 4



Operating System:


WinXP Pro



Description:


Using a card layout, if the panel is not displayed first, then a buttongroup in the toolbar does not lay out
properly. Two buttons are hidden behind other controls. If the same panel is made to be top card, then the layout is correct.



Test Case:



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]
});
});

HTML


<!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>

Steps to reproduce the problem:


Press "switch" button on top panel. Note only controls visible in tbar.
Change code so activeItem = 0. Repeat. The tbar is laid out properly.



The result that was expected:
Should have 5 controls in tbar (a combo,two buttons, a text field and a button).

The result that occurs instead:

Two buttons are hidden behind combo and text field


Debugging already done:


none



Possible fix:


not provided

scaddenp
27 Feb 2011, 7:02 PM
Putting the container in the card with hideMode:'offsets' makes this work. No idea why but it does go.