ExtJS: transparent button background

Posted on 2010-03-31
Medium Priority
Last Modified: 2012-05-09
Hi there,
i use ExtJS 3.1.1 and i have a normal Ext.Panel with 4 Toggle Buttons.
Now i want to change the Background of the Buttons to transparent and only on mouseover a background should be visible.
Like in Microsoft Office 2007, in the Settings Window on the left navigation panel.

How is that possible? (I dont want to change it global for all buttons. Only for the 4 buttons in this panel)

thx and best regards


Question by:mesX
  • 3
  • 2

Expert Comment

ID: 29283405
If you put a class on the panel you can drill down in the css to remove the image.  The background image for the button is actually on a table behind the actual button element.   This is how it is currently set and we want to override it.  These classes are on the td element of the table under the buttons class.
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {

So what we need to do is on your panel have a class   cls: 'transpButtonPanel'
Then you can say in your css file  .transpButtonPanel .x-btn td {background-image: none}
This should then cause any button under that panel to have no button image.

Then in your css file add another rule for when the button has the mouse over it and both together you have

.transpButtonPanel .x-btn td {background-image: none}
.transpButtonPanel .x-btn-over td {url(PATHTOEXT/resources/images/default/button/btn.gif)}

I am not 100% sure if it is resources/images but starting after images it is correct.  Most of this is off my head with a little help from firebug so it may be slightly off.  You may need to change things slightly to get it to work with toggle buttons but this will at least give you an idea how to go about it.


Author Comment

ID: 29365158
thank you very much for your help!
I have some problems with the mouse over effect and the toggle effect.

.transpButtonPanel .x-btn-over td {background-image:url(path/To/My.gif)}
the button stayes transparent but with a thick border of my image.gif.

u know what i can do?


Author Comment

ID: 29365370
Oh, and before i forget: how is it possible to alignment the text of the button to the left and not center?


Accepted Solution

g3k0 earned 2000 total points
ID: 29604931
Hello again,

I apologize for my slow answer.  I am out of town for the weekend visiting my Fiancee.  Since you are using your own image, it may be better just to drop the image directly on the .transpButtonPanel .x-btn-over rather than on the td elements, and leave the td elements with no background image.  The toggle class would be .trasnpButtonPanel .x-btn-pressed.  The text class could probably be floated left.  The path for that would be .transpButtonPanel .x-btn-text.

If those don't work just be more specific when drilling down in the css or use an !important at the end of the css rule.  

I definitely recommend looking into these classes in firebug and playing with them to get your desired effect.

Author Closing Comment

ID: 31709551
Thank you very much for your help!
It realy works!

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question