PDA

View Full Version : Need Image and Text on same line



NotChris
11 Oct 2010, 12:54 PM
I have a textfield where I am displaying an image to the right of the textfield using the left/right ColumnData setup. I also would like to display an image with text directly below the textfield. I was able to get the image displayed by creating a plugin and appending the image as a child element but I'm not sure how to get additional text to display directly to the right of the image.





ComponentPlugin plugin = new ComponentPlugin() {
public void init(Component component) {
component.addListener(Events.Render, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
WidgetComponent errorIcon;
El elem = be.getComponent().el().findParent(".x-form-element", 3);

Image image = new Image("images/icons/warning.gif");
errorIcon = new WidgetComponent(image);
elem.appendChild(errorIcon.getElement());
// How do I get the text next to image?
}
});
}
};
FormPanel p = new FormPanel();
p.setWidth(600);

LayoutContainer l = new LayoutContainer(new ColumnLayout());

WidgetComponent newIcon;
Image newimage = new Image("images/icons/newicon.png");
newIcon = new WidgetComponent(newimage);

FormLayout formLayout1 = new FormLayout();
LayoutContainer left = new LayoutContainer(formLayout1);
FormLayout formLayout2 = new FormLayout();
LayoutContainer right = new LayoutContainer(formLayout2);

TextField<String> t = null;

t = new TextField<String>();
t.setFieldLabel("Email");
t.addPlugin(plugin);
left.add(t, new FormData("100%"));
right.add(newIcon, new FormData("100%"));

l.add(left, new ColumnData(.97d));
l.add(right, new ColumnData(.03d));

p.add(l, new FormData("100%"));




I've searched through the forums for a considerable amount of time and have not found a solution on this.

Thanks.