开发者

How do you set the background-image of a GXT ContentPanel

Seriously, I would think this would be a simple thing, but I can't seem to get it figured out. I have a ContentPanel who's Body I want to set a background for using an Image? How do I do that?

BONUS QUESTION: How do I change that image after the Content开发者_开发知识库Panel is rendered when a business action is triggered (e.g. user login).


I'm not sure what my problem was. I know I tried this previously, but swore it wasn't rendering they way I wanted it to.

cp.setBodyStyle("background:black url('http://www.google.com/intl/en/adwords/select/images/samples/leaderboard.jpg') no-repeat top right");

I haven't figured out how to swap it after login yet since I think setBodyStyle can only be called pre-render.

The solution provided by @AbstractChaos could probably work, but there's a problem using the Image object with that. Might need to incorporate the CssResource.

UPDATE @see the answer provided by @gonella as well. I no longer use GWT, so I haven't tested it. If that answer gets enough votes, I will change the official answer for this question.


I.e:

ContentPanel cp1 = new ContentPanel();

Image loadingImage = new Image(ExampleImages.INSTANCE.openstack01_580x200());
cp1.add(loadingImage);

public interface ExampleImages extends ClientBundle {

  public ExampleImages INSTANCE = GWT.create(ExampleImages.class);

  @Source("images/Openstack01_580x200.jpg")
  ImageResource openstack01_580x200();

}       

It works like a charm.


You could set the background up as a CSS style like so

.image1 {
background: url("yourLink");
}

.image2 {
background: url("another Link");
}

then possibly change the style it points to using

contentPanel.setBodyStyleName("image2");

as for your bonus question if in doubt call layout

contentPanel.layout(true);


You can set this in this way
contentPanel.setStyleAttribute("background","url('image link')");

When the business action is triggered then call this contentPanel.setStyleAttribute("background","url('new image link')");

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜