LayoutDialog, toolbar and text/images - Ext JS
Hi I am doing a LayoutDialog with a toolbar if I set this css don't appear right the text and images in the buttons
paging.add({
text: 'Edit',
cls: 'x-btn-text-icon tbEdit',
tooltip: 'Edit Current Record',
handler: this.onEdit.createDelegate(this)
});
in css:
.tbEdit .x-btn-text {
BACKGROUND-IMAGE: url(../../images/edit16.gif)
}
which css I have to use in toolbar inside a LayoutDialog for appear right text and images?
kind regards
Frank
#
2
03-06-2007, 09:33 AM
Try
#
3
03-06-2007, 11:03 AM
Animal from inside a LayoutDialog don't appear in the toolbar buttons the image using
.tbEdit .x-btn-text-icon {
background-image: : url(../../images/edit16.gif)
}
I set it and appear the text and image (text align left and then the image), it appear ok in IE6 but in FF appear the text on image, any advice please
.tbEdit .x-btn-text{
background-image: url('../../images/edit16.gif');
background-position: 0px 0px;
background-repeat: no-repeat;
padding-left:18px;
padding-top:1px;
width:auto;
display:block;
}
kind regards
Frank
#
4
03-06-2007, 11:19 AM
You shouldn't need to do all that. Text+image buttons are supported.
Here's how I create one:
with
#
5
03-06-2007, 12:54 PM
Animal how you wrote it work fine to me too, but in this case the toolbar don't is inside a LayoutDialog when the toolbar is inside LayoutDialog
.home-button .x-btn-text {
background-image: url("../images/home.gif");
}
don't work.
the example that you send me is using LayoutDialog?
kind regards
Frank
paging.add({
text: 'Edit',
cls: 'x-btn-text-icon tbEdit',
tooltip: 'Edit Current Record',
handler: this.onEdit.createDelegate(this)
});
in css:
.tbEdit .x-btn-text {
BACKGROUND-IMAGE: url(../../images/edit16.gif)
}
which css I have to use in toolbar inside a LayoutDialog for appear right text and images?
kind regards
Frank
#
2
03-06-2007, 09:33 AM
Try
.tbEdit .x-btn-text-icon {
background-image: : url(../../images/edit16.gif)
}
#
3
03-06-2007, 11:03 AM
Animal from inside a LayoutDialog don't appear in the toolbar buttons the image using
.tbEdit .x-btn-text-icon {
background-image: : url(../../images/edit16.gif)
}
I set it and appear the text and image (text align left and then the image), it appear ok in IE6 but in FF appear the text on image, any advice please
.tbEdit .x-btn-text{
background-image: url('../../images/edit16.gif');
background-position: 0px 0px;
background-repeat: no-repeat;
padding-left:18px;
padding-top:1px;
width:auto;
display:block;
}
kind regards
Frank
#
4
03-06-2007, 11:19 AM
You shouldn't need to do all that. Text+image buttons are supported.
Here's how I create one:
fcl.widget.pageToolbar.addButton({
id: 'home-btn',
cls:'x-btn-text-icon home-button',
text: 'Home',
handler: fcl.widget.setLocation.createCallback("/myHome.jsp")
});
with
.home-button .x-btn-text {
background-image: url("../images/home.gif");
}
#
5
03-06-2007, 12:54 PM
Animal how you wrote it work fine to me too, but in this case the toolbar don't is inside a LayoutDialog when the toolbar is inside LayoutDialog
.home-button .x-btn-text {
background-image: url("../images/home.gif");
}
don't work.
the example that you send me is using LayoutDialog?
kind regards
Frank