PDA

View Full Version : [SOLVED] Menu with buttongroup works in ext 3.rc1 but not in 3.0



tatsu
7 Aug 2009, 6:24 PM
The following code works fine in ext 3.rc1 but not in ext 3.0.


...
items:[{
xtype: 'toolbar',
items:[{
text: 'test',
iconCls: 'ico32family',
scale: 'large',
menu: {
xtype: 'menu',
items:[{
xtype: 'buttongroup',
title: 'Personen',
width: 100,
columns: 2,
defaults: {
xtype: 'button',
scale: 'large',
width: '100%',
iconAlign: 'left'
},
items: [{
text: 'anzeigen/<br/>bearbeiten',
iconCls: 'ico32editUser'
},{
iconCls: 'ico32addUser',
width: 'auto'
},{
colspan: 2,
text: 'importieren',
scale: 'small'
},{
colspan: 2,
text: 'Wer ist online?',
scale: 'small',
}]
}]
}
}]
}]
...
In ext 3.0 the button are invisible (see image in the Attachment).
Any solution for this? Thanks in advance.

Animal
7 Aug 2009, 10:02 PM
There is some problem going on with a Menu's child Components having their doLayout called.

I don't have time to go through it all, but here's a workaround:



menu: {
xtype: 'menu',
enableScrolling: false,
items: {
afterRender: function() {
this.constructor.superclass.afterRender.apply(this, arguments);
this.doLayout.defer(1, this);
},
xtype: 'buttongroup',
title: 'Personen',
width: 100,
columns: 2,
defaults: {
xtype: 'button',
scale: 'large',
width: '100%',
iconAlign: 'left'
},
items: [{
text: 'anzeigen/<br/>bearbeiten',
iconCls: 'ico32editUser'
},{
iconCls: 'ico32addUser',
width: 'auto'
},{
colspan: 2,
text: 'importieren',
scale: 'small'
},{
colspan: 2,
text: 'Wer ist online?',
scale: 'small',
}]
}
}

Animal
7 Aug 2009, 10:08 PM
OK, it's something to do with deferred layouting if doLayout is called when hidden (which it initially is for a Menu)

more soon...

Animal
7 Aug 2009, 10:35 PM
Two things are wrong.

1. Container.doLayout should only check for if the layoutTarget is display:none, not for general "visibility" which checks the visibility style which does not affect layout.

2. It mistakenly returns false from the isVisible test because somehow, ElementStyle.getStyle("visibility") returns "hidden" when it is not hidden.


You can see that even though the visibility is "" it returns the style as "hidden"!

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

Animal
7 Aug 2009, 11:07 PM
Here's your proper fix:



Ext.override(Ext.Container, {
targetHasLayout: function() {
var el = this.getVisibiltyEl();
return el && !el.isStyle("display", "none");
},

doLayout: function(shallow, force){
var rendered = this.rendered,
forceLayout = this.forceLayout;

if(!this.targetHasLayout() || this.collapsed){
this.deferLayout = this.deferLayout || !shallow;
if(!(force || forceLayout)){
return;
}
shallow = shallow && !this.deferLayout;
} else {
delete this.deferLayout;
}
if(rendered && this.layout){
this.layout.layout();
}
if(shallow !== true && this.items){
var cs = this.items.items;
for(var i = 0, len = cs.length; i < len; i++){
var c = cs[i];
if(c.doLayout){
c.forceLayout = forceLayout;
c.doLayout();
}
}
}
if(rendered){
this.onLayout(shallow, force);
}
delete this.forceLayout;
}
});

tatsu
8 Aug 2009, 6:03 AM
Hi Animal,
thank you for your support. Now the combination of menu and buttongroup works fine. Your fix solved my problem.