View Full Version : Composite images in GXT. How do they work?

9 Sep 2009, 8:26 AM

I am investigating how GXT uses composite images and Image Bundles as I need to create a custom object similar to the header of a TabItem. My object needs rounded corners, i found the image


This contains ALL 4 rounded corners, top left and right and bottom left and right. The main css file gxt-all.css contains the following classes:

.x-box-blue .x-box-bl,
.x-box-blue .x-box-br,
.x-box-blue .x-box-tl,
.x-box-blue .x-box-tr {
background-image: url(../images/default/box/corners-blue.gif);

The 4 classes relate to the 4 corners, but they point to the same gif file. This to me means that GXT internally somehow knows how to split the image in its 4 components and use them. AFAIK GWT bundles and uses single images, not composites like corners-blue.gif.

How is this done? I looked in the GXT source code and I couldn't find any reference to either the css classes or the image directly.

Any help or insight greatly appreciated.


9 Sep 2009, 8:36 AM
I suggest to inspect the elements with firebug. Each corner will have different background positions that are assigned also with css.

9 Sep 2009, 8:59 PM

I will try that.