Unfortunately I can't post images yet, but I'll try to explain. I have images and I'd like to use them like buttons like in blank page in chrome browser or opera. But as a result I have line with the image and the next image is on the next line and all the line (not only image) is active.
So, how can I do this. I've been trying to found any differences(important differences) between my code and the code from example given on ext gwt 2.2 explorer site. Here is my code:
public class QueryPanel extends LayoutContainer {
public QueryPanel(final String customerId, final String login, final String password){
setLayout(new FitLayout());
final ContentPanel gallery = new ContentPanel();
gallery.setHeading("Reports");
gallery.setLayout(new FitLayout());
gallery.setCollapsible(true);
gallery.setAnimCollapse(false);
gallery.setFrame(true);
gallery.setId("images-view");
gallery.setWidth(535);
ListStore<GalleryButtonModel> store = new ListStore<GalleryButtonModel>();
store.add(new GalleryButtonModel("Copy all messages", "CopyIcon.png", new CopyMsgs(customerId)));
store.add(new GalleryButtonModel("Spam report", "spam.gif", new SpamReport(customerId, login, password)));
store.add(new GalleryButtonModel("Top customers report", "topCustomers.gif", new TopCustomersReport(customerId, login, password)));
store.add(new GalleryButtonModel("Total report", "total-report.gif", new TotalReport(customerId, login, password)));
store.add(new GalleryButtonModel("Message througput report", "message-troughput.gif", new MessageThroughputReport(customerId, login, password)));
store.add(new GalleryButtonModel("Delivery time report", "delivery-time.gif", new DeliveryTimeReport(customerId, login, password)));
store.add(new GalleryButtonModel("Action type report", "report.gif", new ActionTypeReport(customerId, login, password)));
ListView<GalleryButtonModel> view = new ListView<GalleryButtonModel>() {
@Override
protected GalleryButtonModel prepareData(GalleryButtonModel model) {
String s = model.get("name");
model.set("shortName", Format.ellipse(s, 15));
return model;
}
};
view.setId("img-chooser-view");
view.setTemplate(getTemplate(""));
view.setStore(store);
view.setItemSelector("div.thumb-wrap");
view.getSelectionModel().select(0, false);
view.getSelectionModel().addListener(Events.SelectionChange,
new Listener<SelectionChangedEvent<GalleryButtonModel>>() {
public void handleEvent(SelectionChangedEvent<GalleryButtonModel> be) {
be.getSelectedItem().getExample().getButtonModel();
}
});
VBoxLayoutData vFlex = new VBoxLayoutData();
vFlex.setFlex(1);
gallery.add(view, new FitData(5,5,5,5));
add(gallery, vFlex);
}
private native String getTemplate(String base)/*-{
return ['<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="/gxt/images/default/button/{path}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'].join("");
}-*/;
}