PDA

View Full Version : Ext.BasicDialog , button with icon issue



nseb
25 Feb 2007, 5:42 AM
Hi,

I want to add button with (text and icon) ,in dialog , but I've found a problem :
example in dialog hello example add this line :

dialog.addButton({icon:'test.gif' , text : 'test'} , dialog.hide);

the button is not visible.

Best regards.

Thank for you work jack ;-)

jack.slocum
25 Feb 2007, 6:00 AM
You are missing the class. 'x-btn-text-icon'. To explain further:

Each button can have one of 3 modes:

Text-only (default), Icon-only and Text + Icon

The way of triggering a specific mode is with a CSS class:

cls: 'x-btn-icon' // icon only

cls: 'x-btn-text-icon' // icon and text

You can either set your icon inline (as you have done) or you can set 2 classes and set it in CSS:

cls: 'x-btn-icon foobar'

and add this CSS:

.foobar .x-btn-text {
background-image:url(foo.gif);
}

nseb
25 Feb 2007, 6:08 AM
thanks for your reply,

but if tested:
dialog.addButton({icon:'test.gif' , cls: 'x-btn-text-icon' , text : 'test'} , dialog.hide);

the problem is always present;-(

jack.slocum
25 Feb 2007, 6:37 AM
Ah I didn't even notice in your first post that you are calling dialog.addButton. Look at the docs for the first param:

* @param {String/Object} config A string becomes the button text, an object is expected to be a valid Ext.DomHelper element config

It's not a Button config but a DomHelper config to make custom buttons (e.g. image buttons).

I just added to the code to sniff the object and determine if it is a Button config or DomHelper config so in the next rev you will be able to pass in a Button config as well.

nseb
25 Feb 2007, 2:30 PM
thanks jack ;-)

monstersinc
8 Apr 2011, 9:03 AM
Including height and width properties in your css will throw off your button layout.



.icon-ribbon-search32{
background: url(ribbon/search32.png);
/*
height: 32px;
width: 32px;
*/
}

monstersinc
8 Apr 2011, 9:13 AM
Including height and width properties in your css will throw off your button layout. Padding short button labels with a non-breaking space (text: '  Search  ') will help with image clipping.

.icon-ribbon-search32{
background: url(ribbon/search32.png);
/*
height: 32px;
width: 32px;
*/
}