PDA

View Full Version : Please help with my tbar



TheBigOnion
18 Feb 2010, 9:44 AM
Hello all,
I am trying to put a tool bar in my panel using the example at:
http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html (http://www.extjs.com/forum/../deploy/dev/examples/layout-browser/layout-browser.html)
Absolute Layout Form

but when I run it my words are on top of my images and my images seem to be repeating themselves.

Here's a piece of my code:


var panel = new Ext.Panel({
title:Ext.getDom('page-title').innerHTML
,id:'simplestbl'
,layout:'border'
,width:600
,height:400
,renderTo:Ext.getBody()
,tbar: [{
text: 'Send',
iconCls: 'icon-send'
},'-',{
text: 'Save',
iconCls: 'icon-save'
},{
text: 'Check Spelling',
iconCls: 'icon-spell'
},'-',{
text: 'Print',
iconCls: 'icon-print'
},'->',{
text: 'Attach a File',
iconCls: 'icon-attach'
}]

...


What is causing this?

Thanks,
Michael

MaximGB
18 Feb 2010, 11:06 AM
What are the CSS rules for icon classes?

TheBigOnion
18 Feb 2010, 11:22 AM
.icon-send {
background-image:url(../images/email_go.png) !important;
}
.icon-save {
background-image:url(../images/disk.png) !important;
}
.icon-print {
background-image:url(../images/printer.png) !important;
}
.icon-spell {
background-image:url(../images/spellcheck.png) !important;
}
.icon-attach {
background-image:url(../images/page_attach.png) !important;



Basically I am using the layout-browser.css from the example.

TheBigOnion
18 Feb 2010, 1:23 PM
I tried the example at http://www.quizzpot.com/2009/08/toolbar-in-panels-and-windows/ and had the exact same results. It might have something to do with my mac/browser. (tried on both firefox and safari)

I even added in:


defaults:{
iconAlign: 'top'
}

but icon is still directly behind text.