GXT Paging ListView

Simply bind the store to ListView and loader to PagingToolBar.
Here is the source code. You might need to refer to my previous posting on JSON reader and paging grid.

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.ppktechnology.assetmanagement.client;

import java.util.List;

import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.ListViewEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Format;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ListView;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.ppktechnology.assetmanagement.client.model.ImagesModel;
import com.vcari.client.utils.DataUtils;

/**
 * 
 * @author peyo
 */
@SuppressWarnings({ "rawtypes", "unchecked", "unused" })
public class ImagesList extends LayoutContainer {

    ListStore store = ImagesModel.getInstance().getPagingStore();
    int limit = 20;

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        final ContentPanel panel = new ContentPanel();
        setLayout(new FitLayout());
        
        panel.setCollapsible(true);
        panel.setAnimCollapse(false);
        panel.setFrame(true);
        panel.setId("images-view");
        panel.setHeading("Simple ListView (0 items selected)");
        panel.setBodyBorder(false);
        panel.setLayout(new FitLayout());
                
        ListView<ModelData> view = new ListView<ModelData>() {
            @Override
            protected ModelData prepareData(ModelData model) {
                String s = model.get("imagedesc");
                model.set("imagedesc", Format.ellipse(s, 15));
                String thumbnail="images/" +  model.get("thumbnail");
                model.set("thumbnail", DataUtils.formatURL(thumbnail));
                String imagefile="images/" +  model.get("imagefile");
                model.set("imagefile", DataUtils.formatURL(imagefile));
                return model;
            }

        };

         view.addListener(Events.OnDoubleClick, new Listener<ListViewEvent<ModelData>>() {

                @Override
                public void handleEvent(ListViewEvent<ModelData> be) {
                    String imgurl = be.getModel().get("imagefile");
                    com.google.gwt.user.client.Window.open(imgurl, "_blank", "");
                }
            });
        
        final PagingToolBar pagingToolBar = new PagingToolBar(limit);
        pagingToolBar.bind((BasePagingLoader) store.getLoader());
        panel.setBottomComponent(pagingToolBar);
          
        view.setTemplate(getTemplate());
        view.setStore(store);
        view.setItemSelector("div.thumb-wrap");
        view.getSelectionModel().addListener(Events.SelectionChange, new Listener<SelectionChangedEvent<ModelData>>() {

            public void handleEvent(SelectionChangedEvent<ModelData> be) {
                panel.setHeading("Simple ListView (" + be.getSelection().size() + " items selected)");
            }

        });
        panel.add(view);
        add(panel);
        store.getLoader().load();
    }

    private native String getTemplate() /*-{
        return [ '<tpl for=".">', '<div class="thumb-wrap" id="{imageid}">',
                '<div class="thumb"><img src="{imagefile}" title="{imagedesc}"></div>',
                '<span class="x-editable">{imagedesc}</span></div>', '</tpl>',
                '<div class="x-clear"></div>' ].join("");

    }-*/;

}