[FIXED][3.0rc1] strange Toolbar-Behaivor

[wilderland]

Hello,

I tried yesterday the ExtJS 3.0 rc1 Toolbar and found a strange layout in Firefox and IE7, in Opera everything works fine:

hier the Config of the Toolbar:



var tb = new Ext.Toolbar({

height: 80,
region:'north',
items: [
{
text: 'Startseite',height:70, width:80,
icon: webRoot+'img/icons/png-24/home.png',
cls:"x-btn-text-icon",
scale: 'large',split: false, iconAlign: 'top', hideBorders:'false',
listeners:{click:handelHomeButton}

},
{
xtype: 'splitbutton', text: 'Suchen', height:70, width:80,
icon: webRoot+'img/icons/png-24/search.png',
cls:"x-btn-text-icon",
scale: 'large', split: true, iconAlign: 'top',
menu:[{text:'Projekte'},{text:'Firmen'},{text:'Kontakte'},{text:'gespeicherte Suche',menu:[{text:'Raum Berlin'}, {text:'Projekte mit Fenster'}]},{text:'letzte Suchen',menu:[{text:'19.April 12:34'}, {text:'17.April 09:34'}]} ],
arrowAlign:'bottom',
listeners:{click:addProjectTab}
},
{
xtype: 'splitbutton', text: 'Favoriten', height:70, width:80,
icon: webRoot+'img/icons/png-24/favorits.png',
cls:"x-btn-text-icon",
scale: 'large', split: true, iconAlign: 'top',
menu:[{text:'Meine Favoriten 1', menu:[{text:'meine Top Projekte'}, {text:'hier Angebot abgeben'}]},{text:'Meine Favoriten 2'},{text:'Meine Favoriten 2'},'-',
{text:'gemeinsame Favoriten', menu:[{text:'Vertriebsteam 2'}, {text:'ganz interessant für uns'}]}],
arrowAlign:'bottom'
},
{
xtype: 'splitbutton', text: 'Alarme', height:70, width:80,
icon: webRoot+'img/icons/png-24/alert.png',
cls:"x-btn-text-icon",
scale: 'large', split: true, iconAlign: 'top',
menu:[{text:'Baugesuch eingereicht(1)'},{text:'Baubewilligung erteilt(5)'},{text:'Ausschreibung(5)'}],
arrowAlign:'bottom'
},
{
xtype: 'splitbutton', text: 'Aktivitäten', height:70, width:80,
icon: webRoot+'img/icons/png-24/activities.png',
cls:"x-btn-text-icon",
scale: 'large', split: true, iconAlign: 'top',
menu:[{text:'Anruf(0)'},{text:'Emails(5)'},{text:'Besuch(5)'},{text:'Brief(0)'}],
arrowAlign:'bottom'
},
{
xtype: 'splitbutton', text: 'Export', height:70, width:80,
icon: webRoot+'img/icons/png-24/save.png',
cls:"x-btn-text-icon",
scale: 'large', split: true, iconAlign: 'top',
menu:[{text:'Export als CSV'},{text:'Export als PDF'}],
arrowAlign:'bottom'
},
// add a vertical separator bar between toolbar items
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
{
xtype: 'textfield', name: 'field1',
emptyText: 'Suchbegriffe eintragen'
},

{text:'finden'},
'-',
{
text: 'Profil', height:70, width:80,
icon: webRoot+'img/icons/png-24/profile.png',
cls:"x-btn-text-icon",
scale: 'large', split: true, iconAlign: 'top',
menu:[{text:'Passwort ändern'},{text:'Sprache ändern', menu:[{text:'deutsch'}, {text:'englisch'}]}],
arrowAlign:'bottom'
},
{
text: 'Logout', height:70, width:80,
icon: webRoot+'img/icons/png-24/exit.png',
cls:"x-btn-text-icon",
scale: 'large', split: false, iconAlign: 'top'
}

]
});

globalViewPort = new Ext.Viewport({
id:'MainViewport',
layout:'border',
autoScroll:true,
items:[
tb,
{title:'test', region:'west'},
{title:'test', region:'center'}

]
});


I use only this 3 files ...


<link rel="stylesheet" type="text/css" href="/js/ext-3.0-rc1/resources/css/ext-all.css" />
<script type="text/javascript" src="/js/ext-3.0-rc1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-3.0-rc1/ext-all-debug.js"></script>


Look at the pictures an you will see what I mean. The Firefox, don't show the labels, the IE7 don't show the arrows. Only Opera works like expected ... Maybe it will help you to fix some problems in the layout.

Greats wilderland.

[evant]

Try the following override:



Ext.override(Ext.Button, {
getTemplateArgs : function(){
var cls = (this.cls || '');
cls += (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
if(this.pressed){
cls += ' x-btn-pressed';
}
return [this.text || '&#160;', this.type, this.iconCls || '', cls, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass()];
}
});


You can also remove the cls property from your code.

[wilderland]

I tried your code snippet, it works, thank you. Only remove the cls-property it don't work.

I also have the effect, that the style will not apply to the button after loading the page, the icon was shown 'tiled' in the background of the button ... after a mouseover it was correct ...

But thank you ...