PDA

View Full Version : [SOLVED][3.??] comboBox on toolbar bug



manduks
28 Jul 2009, 4:09 PM
Ext version tested:
Ext JS 3.0.0
Adapter used:
ext
css used:
only default ext-all.css


Browser versions tested against:

FF3 (firebug 1.3.0.10 installed)
Operating System:
vista
Description:
Well Iīm trying to put toolbar inside a menu of a button, what it does is that is shows the toolbar but
it does not show the components of my tool bar. So what I did was that instead of creating a toolbar directly
I created a panel an then inside the panel I created the toolbar inside the tbar of the panel, so it did work
,but when I put a combo inside that toolbar the dropdown list hides behind the menu item of the botton :(, I have tried the simpliest
case where I put directly the combo to the menu of the button and it hides too :(. you can see the code and the screenshots.
thanks in advance :)
See screenshot

Test Case:
1.-Simpliest test case


Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var panelPruebas=new Ext.Panel({
renderTo:Ext.getBody(),
tbar:[{
xtype:'buttongroup',
items:[{
text:'<b><br>Buscar Usuario',
scale:'large',
iconAlign:'top',
menu : {

items:[{
xtype:'combo',
fieldLabel:'Nivel de Acceso',
name:'cb-nivel',
store:[['Vendedor','Vendedor'],['Contador','Contador']],
editable:false,
triggerAction: 'all',
emptyText:'Elige nivel de acceso...',
hideTrigger:true,
forceSelection:true
},'-',{
text:'<b><br> Buscar </b>',
scale:'large',
iconAlign: 'top'
},'-',{
text:'<b><br>Limpiar</b>',
scale:'large',
iconAlign: 'top'
}]

}
}]
}

]
});
});

2.- The toolbar but not its components



Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var panelPruebas=new Ext.Panel({
renderTo:Ext.getBody(),
tbar:[{
xtype:'buttongroup',
items:[{
text:'<b><br>Buscar Usuario',
scale:'large',
//iconCls:'fUser',
iconAlign:'top',
menu :{
items:[ new Ext.Toolbar({
height:50,
witdth:500
items:[{
xtype:'combo',
fieldLabel:'Nivel de Acceso',
name:'cb-nivel',
store:[['Vendedor','Vendedor'],['Contador','Contador']],
editable:false,
triggerAction: 'all',
emptyText:'Elige nivel de acceso...',
hideTrigger:true,
forceSelection:true
},'-',{
text:'<b><br> Buscar </b>',
scale:'large',
//iconCls:'buscar',
iconAlign: 'top'
},'-',{
text:'<b><br>Limpiar</b>',
scale:'large',
//iconCls:'limpiar',
iconAlign: 'top'
}]
})
]
}


}]
}

]
});
});
3.- A panel with a tool bar but the dropdown of the combo behind :(


Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var panelPruebas=new Ext.Panel({
renderTo:Ext.getBody(),
tbar:[{
xtype:'buttongroup',
items:[{
text:'<b><br>Buscar Usuario',
scale:'large',
//iconCls:'fUser',
iconAlign:'top',
menu : {
items:new Ext.Panel({
width:800,
autoHeight:true,
//title:'jeje',
tbar:new Ext.Toolbar({
height:50,
items:[{
xtype:'combo',
fieldLabel:'Nivel de Acceso',
name:'cb-nivel',
store:[['Vendedor','Vendedor'],['Contador','Contador']],
editable:false,
triggerAction: 'all',
emptyText:'Elige nivel de acceso...',
hideTrigger:true,
forceSelection:true
},'-',{
text:'<b><br> Buscar </b>',
scale:'large',
//iconCls:'buscar',
iconAlign: 'top'
},'-',{
text:'<b><br>Limpiar</b>',
scale:'large',
//iconCls:'limpiar',
iconAlign: 'top'
}]
})
})
}
}]
}

]
});
});
See this URL : http://


Steps to reproduce the problem:
foo

bar

The result that was expected:
dropdown in front of the tool bar
The result that occurs instead:
it is behind
Screenshot or Video:
1.-
15291

2.-15292

3.-15293

mjlecomte
28 Jul 2009, 6:20 PM
Moved this to help.

manduks
29 Jul 2009, 4:56 PM
why moved isnīt this a bug? ,anybody has a workaround for thi issue I have tried a lot of things but did not work :(

mjlecomte
29 Jul 2009, 5:09 PM
Seems that you're either asking for help or potentially are encountering a previously reported behavior, see here:
http://extjs.com/forum/showthread.php?p=351546#post351546

See the related links and posts.

manduks
29 Jul 2009, 5:30 PM
sorry, i just didnīt find that tread thank you very much for the help, =D> best luck and lol