<div class="{style.thumb}"><img
        src="file:////d:/myproject/project/src/com/grandprix/gpline/client/module/ipr/ViewPanel/ScreenShots/CarouselTest/images/Screenshot.bmp"
           title="{photo.name}"></div>
<span class="x-editable">{photo.name:shorten(18)}</span>

http://www.sencha.com/examples/#ExamplePlace:listview

<div class="{style.thumb}"><img
        src="file:////d:/myproject/project/src/com/grandprix/gpline/client/module/ipr/ViewPanel/ScreenShots/CarouselTest/images/Screenshot.bmp"
           title="{photo.name}"></div>
<span class="x-editable">{photo.name:shorten(18)}</span>

<div class="{style.thumb}"><img
        src="{photo.path}"
           title="{photo.name}"></div>
<span class="x-editable">{photo.name:shorten(18)}</span>

listView.setCell(new SimpleSafeHtmlCell<Photo>(new AbstractSafeHtmlRenderer<Photo>() {
        @Override
        public SafeHtml render(Photo object) {
          return renderer.renderItem(object, style);
        }
      }));

public class ListViewExample implements IsWidget, EntryPoint {
 
  @FormatterFactories(@FormatterFactory(factory = ShortenFactory.class, name = "shorten"))
  interface Renderer extends XTemplates {
    @XTemplate(source = "ListViewExample.html")
    public SafeHtml renderItem(Photo photo, Style style);
  }
 
  interface Resources extends ClientBundle {
    @Source("ListViewExample.css")
    Style css();
  }
 
  static class Shorten implements Formatter<String> {
    private int length;
 
    public Shorten(int length) {
      this.length = length;
    }
 
    @Override
    public String format(String data) {
      return Format.ellipse(data, length);
    }
  }
 
  static class ShortenFactory {
    public static Shorten getFormat(int length) {
      return new Shorten(length);
    }
  }
 
  interface Style extends CssResource {
    String over();
 
    String select();
 
    String thumb();
 
    String thumbWrap();
  }
 
  private FramedPanel panel;
 
  @Override
  public Widget asWidget() {
    if (panel == null) {
      final ExampleServiceAsync rpcService = GWT.create(ExampleService.class);
 
      RpcProxy<Object, List<Photo>> proxy = new RpcProxy<Object, List<Photo>>() {
        @Override
        public void load(Object loadConfig, AsyncCallback<List<Photo>> callback) {
          rpcService.getPhotos(callback);
        }
      };
 
      Loader<Object, List<Photo>> loader = new Loader<Object, List<Photo>>(proxy);
 
      ModelKeyProvider<Photo> keyProvider = new ModelKeyProvider<Photo>() {
        @Override
        public String getKey(Photo item) {
          return item.getName();
        }
      };
 
      ListStore<Photo> store = new ListStore<Photo>(keyProvider);
       
      loader.addLoadHandler(new ListStoreBinding<Object, Photo, List<Photo>>(store));
      loader.load();
 
      final Resources resources = GWT.create(Resources.class);
      resources.css().ensureInjected();
 
      final Style style = resources.css();
 
      final Renderer renderer = GWT.create(Renderer.class);
 
      ListViewCustomAppearance<Photo> appearance = new ListViewCustomAppearance<Photo>("." + style.thumbWrap(),
          style.over(), style.select()) {
        @Override
        public void renderEnd(SafeHtmlBuilder builder) {
          String markup = new StringBuilder("<div class=\"").append(CommonStyles.get().clear()).append("\"></div>").toString();
          builder.appendHtmlConstant(markup);
        }
 
        @Override
        public void renderItem(SafeHtmlBuilder builder, SafeHtml content) {
          builder.appendHtmlConstant("<div class='" + style.thumbWrap() + "' style='border: 1px solid white'>");
          builder.append(content);
          builder.appendHtmlConstant("</div>");
        }
      };
 
      ListView<Photo, Photo> listView = new ListView<Photo, Photo>(store, new IdentityValueProvider<Photo>() {
        @Override
        public void setValue(Photo object, Photo value) {
        }
      }, appearance);
      listView.setCell(new SimpleSafeHtmlCell<Photo>(new AbstractSafeHtmlRenderer<Photo>() {
        @Override
        public SafeHtml render(Photo object) {
          return renderer.renderItem(object, style);
        }
      }));
      listView.getSelectionModel().addSelectionChangedHandler(new SelectionChangedHandler<Photo>() {
        @Override
        public void onSelectionChanged(SelectionChangedEvent<Photo> event) {
          panel.setHeadingText("Simple ListView (" + event.getSelection().size() + " items selected)");
        }
      });
      listView.setBorders(false);
 
      final ListViewSelectionModel<Photo> selectionModel = listView.getSelectionModel();
 
      SimpleComboBox<String> comboType = new SimpleComboBox<String>(new StringLabelProvider<String>());
      comboType.setTriggerAction(TriggerAction.ALL);
      comboType.setEditable(false);
      comboType.setWidth(100);
      comboType.add("Multi");
      comboType.add("Simple");
      comboType.setValue("Multi");
      comboType.addSelectionHandler(new SelectionHandler<String>() {
        @Override
        public void onSelection(SelectionEvent<String> event) {
          boolean simple = event.getSelectedItem().equals("Simple");
          selectionModel.deselectAll();
          selectionModel.setSelectionMode(simple ? SelectionMode.SIMPLE : SelectionMode.MULTI);
        }
      });
 
      ToolBar toolBar = new ToolBar();
      toolBar.add(new LabelToolItem("Selection Mode: "));
      toolBar.add(comboType);
 
      VerticalLayoutContainer vlc = new VerticalLayoutContainer();
      vlc.setBorders(true);
      vlc.add(toolBar, new VerticalLayoutData(1, -1));
      vlc.add(listView, new VerticalLayoutData(1, 1));
 
      panel = new FramedPanel();
      panel.setCollapsible(true);
      panel.setAnimCollapse(false);
      panel.setId("images-view2");
      panel.setHeadingText("Simple ListView (0 items selected)");
      panel.setPixelSize(555, 400);
      panel.setBodyBorder(false);
      panel.add(vlc);
      panel.addStyleName("margin-10");
    }
 
    return panel;
  }
 
  @Override
  public void onModuleLoad() {
    RootPanel.get().add(asWidget());
  }
 
}

<div class="{style.thumb}"><img
        src="thumbs/Screenshot.jpg"
           title="{photo.name}"></div>
<span class="x-editable">{photo.name:shorten(18)}</span>

  listView.setCell(/*new IconCellDecorator<String>(AppBundle.IMAGE.userIcon16(), new ImageCell()*/
            new SimpleSafeHtmlCell<InfoPerimetr>(new AbstractSafeHtmlRenderer<InfoPerimetr>() {
                @Override
                public SafeHtml render(InfoPerimetr object) {
                    //ZSafeUri path = new ZSafeUri(object.getPath());
                  //  object.setPath(Images.INSTANCE.image1().getSafeUri().asString());
                    object.setPath(AppBundle.IMAGE.alert16().getSafeUri().asString());
                    return renderer.renderItem(object, style);

 interface Renderer extends XTemplates {
        @XTemplate("<div class=\"{style.thumb}\"><img\n" +
                "        src = \"{photo.path}\"\n" +
                "           title=\"{photo.name}\"></div>\n" +
                "<span class=\"x-editable\">{photo.name:shorten(18)}</span>"/*source = "ListViewExample.html"*/)
        public SafeHtml renderItem( InfoPerimetr photo, Style style);
    }

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABjUlEQVR42mNgoCWYP3++wKpVq/jJ0tzX16fr7eGxFogXz546VZMkzfX19Uxurs5tnu6urz3dXF+6uThVz5w5k5V4A2pqvFwcHI67Ojr+BWEg+0BHR4c7UZrLypJ4nWxsljvZ2rwE4gtOtrYXgfRzRxurufX1BQIEDbA2M8uxtTC/ZWVi/A8mBmLbmpvfsDE3z8arOTY0VNHSyOgoUMMfdANAYpYmRnsyk5LUcRpgqqcz1UxP7425gf4/dANAYmb6eq9N9fQmYtXs6eTkZKSledtYW+uvsY4WhgEgMbCcluaV8IAATxTNxsbGrHpqqnv01VW/Gair/QNhoKb/UKeD2TBxkBo9VZUdoZaWnHADzPR1MrSV5F/rKCv+BeJ/IIzuApg4SI22ssJTbSXZQqAUI4OalJSIuqz0fQ05md8a8jL/NOVl/4NodAOQ5YBq/wD13NRQkFBgUJYUn6EiJf5dVUrin6o0GP8H01JoGE0OqOczEK9kUBIX+QbEv4H4DxD/JRL/ger5yQD2B/mYAQBT5LascwtAdwAAAABJRU5ErkJggg==

<div class="com-grandprix-gpline-client-module-ipr-ViewPanel-ScreenShots-CarouselTest-ListViewExample-Style-thumb"><img
        src = "#"
           title="Screenshot.jpg"></div><span class="x-editable">Screenshot.jpg</span>

http://127.0.0.1:8888/gplineGray/F05875D5AC30C184BE65444655BA6F77.cache.bmp