ListView gwt how to organise images

Question

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("");

    }-*/;
}

can u please post the screen shot of the view you are trying to develop? — Adarsha, Feb 27 '13 at 14:45
Are you adding any CSS to the page? I suspect that whichever example you are basing this off of (can you link to it?) is using CSS to make 'thumb' and 'thumb-wrap' mean something. — Colin Alworth, Feb 27 '13 at 18:15

score 0 · Accepted Answer · answered Feb 27 '13 at 23:33

Sounds like you are probably talking about this example: http://www.sencha.com/examples-2/#listview

(images available at this post, another incarnation of the same question http://www.sencha.com/forum/showthread.php?257343-ListView-Template)

In the template you are using, you reference the css classes thumb and thumb-wrap. These are not just strings added to the html structure, they have meaning in the CSS on the page. Here are some selected bits according to firebug that apply here:

#images-view .thumb-wrap {
    border: 1px solid white;
    float: left;
    margin: 4px 0 4px 4px;
    padding: 5px;
}


#images-view .thumb {
    background: none repeat scroll 0 0 #DDDDDD;
    padding: 3px;
}

These rules describe how to style elements with the thumb and thumb-wrap classes when placed inside a container with the images-view id. You have the id set elsewhere in your code, but if you want to remove that, you may be able to simplify these rules.

The float:left; style is specifically what is causing them to line up left-to-right, then top-to-bottom. It is up to you of course what other styling you want to use, but if these rules aren't in a CSS file on your page, those elements won't be styled by them.

I've made the what I wanted but not adding any css classes to the css file(because it didn't work) but just adding the necessary string to the templatelike:private native String getTemplate(String base)/*-{return ['', '
', '
', ' {name}
', '', '
'].join(""); }-*/; — Nikitin Mikhail, Mar 12 '13 at 11:44
How ever you add the styles to the page, the same effect can be achieved. Without knowing more about how you added these styles, it is hard to say why it didn't work - did you add them to a css file that was on the page? Was there another rule that interfered? Did `images-view` get added as an ID of a parent? etc. The principle works, as you can see in that example with firebug. That said, yes, your method will work, but ends up with longer strings getting added to the dom. — Colin Alworth, Mar 12 '13 at 14:45

ListView gwt how to organise images

1 Answers1