ListView GWT, как организовать изображения

Question

К сожалению, я пока не могу опубликовать изображения, но я постараюсь объяснить. У меня есть изображения, и я хотел бы использовать их как кнопки, как на пустой странице в браузере Chrome или Opera. Но в результате у меня есть строка с изображением, а следующее изображение находится на следующей строке, и вся строка (не только изображение) активна.

Итак, как я могу это сделать. Я пытался найти какие-либо отличия (важные отличия) между моим кодом и кодом из примера, приведенного на сайте ext gwt 2.2 explorer. Вот мой код:

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

    }-*/;
}

Answer 1

Похоже, вы, вероятно, говорите об этом примере: http://www.sencha.com/examples-2/

(изображения доступны в этом посте, другое воплощение того же вопроса http://www.sencha.com/forum/showthread.php?257343-ListView-Template)

В шаблоне, который вы используете, вы ссылаетесь на классы CSS thumb а также thumb-wrap, Это не просто строки, добавленные в html-структуру, они имеют значение в CSS на странице. Вот некоторые выбранные биты в соответствии с firebug, которые применяются здесь:

#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;
}

Эти правила описывают, как стилизовать элементы с thumb а также thumb-wrap классы при помещении в контейнер с images-view идентификатор У вас есть идентификатор, установленный в другом месте вашего кода, но если вы хотите удалить его, вы можете упростить эти правила.

float:left; стиль - именно то, что заставляет их выстраиваться слева направо, а затем сверху вниз. Конечно, вам решать, какой другой стиль вы хотите использовать, но если эти правила отсутствуют в файле CSS на вашей странице, эти элементы не будут ими стилизованы.