PDA

View Full Version : Combobox hides TextField in toolbar



dobberph
28 May 2010, 1:35 AM
Hi all,

i have a toolbar with a menu, then a combobox and then a textfield.
The combobox is in front of the textfield, so that you can barely see the textfield.
It looks like this:
20689

My Code is this:


Ext.onReady(function(){
Ext.QuickTips.init();

var storeAbteilungen = new Ext.data.ArrayStore({
fields: ['id', 'name'],
idIndex: 0
});
var abteilungen = [
[1, 'Judo'],
[2, 'Leichtathletik'],
[3, 'Schwimmen'],
[4, 'Rudern'],
[5, 'Tanzen']
];
storeAbteilungen.loadData(abteilungen);
var comboAbteilungen = new Ext.form.ComboBox({
store: storeAbteilungen,
typeAhead: true,
displayField: 'name',
mode: 'local',
triggerAction: 'all',
emptyText: 'Abteilungen',
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up('.x-menu');
},
//iconCls: 'no-icon'
});

var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}
]
});

var tb = new Ext.Toolbar({
items: [
{ text:'Menü', menu: menu }
,
comboAbteilungen
,
{ xtype: 'tbseparator' }
,
{ xtype: 'tbspacer', width: 15 }
,
{ xtype: 'textfield', id: 'login_textfield', emptyText: 'enter your login' }
,
{ xtype: 'tbspacer', id: 'spacerLogin1' ,width: 15 }
,
{ xtype: 'textfield', id: 'password_textfield', emptyText: 'password', inputType: 'password' }
,
{ xtype: 'tbspacer', id: 'spacerLogin2', width: 15 }
,
{ xtype: 'button', id: 'login_button', text: 'login' , handler: login }
,
{ xtype: 'button', id: 'logout_button', text: 'logout' , handler: logout, hidden: true }
]
});

tb.render('toolbar');
tb.doLayout();


Thanks a lot,
Tobi

1 Jun 2010, 10:17 AM
tobi, try wrapping them in a container or panel.

dobberph
2 Jun 2010, 2:34 AM
Hi j,

I solved it yesterday by using a menu:


Ext.onReady(function(){
Ext.QuickTips.init();

var abteilungen = [
'Judo',
'Leichtathletik',
'Schwimmen',
'Rudern',
'Tanzen'
];
/*
var storeAbteilungen = new Ext.data.ArrayStore({
fields: ['name'],
});
storeAbteilungen.loadData(abteilungen);

var comboAbteilungen = new Ext.form.ComboBox({
store: storeAbteilungen,
id: 'comboAbteilungen',
typeAhead: true,
displayField: 'name',
mode: 'local',
triggerAction: 'all',
emptyText: 'Abteilungen',
selectOnFocus: true,
width: 135,
autoWidth: true,
getListParent: function() {
return this.el.up('.x-menu');
},
listeners:{
'select': switchAbteilung
}
//iconCls: 'no-icon'
});*/

var menuAbteilungen = new Ext.menu.Menu({
id: 'menuAbteilungen',
style: {
overflow: 'visible' // For the Combo popup
}
});
for (var a = 0; a < abteilungen.length; a++){
menuAbteilungen.add({
text: abteilungen[a],
handler: switchAbteilung,
});
}

var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}
]
});

var tb = new Ext.Toolbar({
items: [
{ text:'Menü', menu: menu }
,
/*comboAbteilungen
,*/
{
//icon: 'preview.png',
//cls: 'x-btn-text-icon',
text: 'Abteilungsauswahl',
menu: menuAbteilungen
}
,
{ xtype: 'tbseparator' }
,
{ xtype: 'tbspacer', width: 15 }
,
{ xtype: 'tbfill' }
,
{ xtype: 'textfield', id: 'login_textfield', emptyText: 'enter your login' }
,
{ xtype: 'button', id: 'logout_button', text: 'logout' , handler: logout, hidden: true }
,
{ xtype: 'tbspacer', id: 'spacerLogin1' ,width: 15 }
,
{ xtype: 'textfield', id: 'password_textfield', emptyText: 'pas', inputType: 'password' }
,
{ xtype: 'tbspacer', id: 'spacerLogin2', width: 15 }
,
{ xtype: 'button', id: 'login_button', text: 'login' , handler: login }
,
{ xtype: 'label', id: 'loggedInLabel', hidden: true }
,
{ xtype: 'tbspacer', width: 15 }
]
});


Thanks for your help,
Tobi