GXT之旅：第五章：高级Components(3)——Paging

Paging

Paging是GXT提供的非常有用的功能。顾名思义，就是分页显示数据，而不是一页显示所有的数据。GXT支持远程和本地的分页：远程分页就是真分页，每次server端返回数据都是数据库里分页后的数据；本地的分页就是假分页，数据库一次性load全部数据后，前端再分页内存里面的数据。为了方便起见，仅仅使用假分页，给大家展示一下Paging的功能。

介绍一下分页工作的相关类

PagingLoadResult

分页的数据，其必须被填充到PagingLoadResult。PagingLoadResult是ListLoadResult的扩展接口，提供了额外的功能（TotalLength和Offset），

PagingLoadConfig

PagingLoadConfig封装了请求分页数据的参数，指定了offset，数据返回起始点等。

接下来，我们要在RSSReader项目里，新建一个方法，返回PagingLoadResult<Item>

• FeedService接口里，定义第二个loadItems方法，
  

PagingLoadResult<Item> loadItems(String feedUrl, final
PagingLoadConfig config);

• FeedServiceAsync接口里，定义其回调方法

void loadItems(String feedUrl, PagingLoadConfig config,
AsyncCallback<PagingLoadResult<Item>> callback);

• FeedServiceImpl里，实现这个抽象方法。

    @Override
    public PagingLoadResult<Item> loadItems(String feedUrl,
            PagingLoadConfig config) {
        List<Item> items = loadItems(feedUrl);
        return getPagingLoadResult(items, config);
    }

• getPagingLoadResult的方法实现如下：

private PagingLoadResult<Item> getPagingLoadResult(List<Item> items,
			PagingLoadConfig config) {
		//定义pageItems，存储Item，作为返回的数据源
		List<Item> pageItems = new ArrayList<Item>();
		//通过PagingLoadConfig，获得相关参数（offset）
		int offset = config.getOffset();
		//获得全部数据大小
		int limit = items.size();
		//根据offset获得limit
		if (config.getLimit() > 0) {
			limit = Math.min(offset + config.getLimit(), limit);
		}
		//定义好边界之后，开始读取数据
		for (int i = offset; i < limit; i++) {
			pageItems.add(items.get(i));
		}
		//通过pageItems，转化成BasePagingLoadResult，同时赋值上offset和totalLength
		return new BasePagingLoadResult<Item>(pageItems, offset, items.size());

	}

PagingModelMemoryProxy

对于返回分页的数据的方法的代理proxy需要使用PagingModelMemoryProxy，针对于PagingModelMemoryProxy的loader是PagingLoader

PagingLoader

PagingLoader的构造函数里，参数指明了类型是PagingModelMemoryProxy，PagingLoader会通过PagingModelMemoryProxy，load分页的数据集到store里。

PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy);

对于load数据的时候，需要指定offset和pageSize

loader.load(0, 4);//public void load(int offset, int pageSize);

对于其过程使用的store是ListStore，因为数据本身来说，就是一般的list数据集，分页的操作只是从大的list数据集里面获取部分数据集。

PagingToolBar

PagingToolBar extends ToolBar，预定义了相关的分页功能。

对于PagingToolBar来说，他数据源所绑定的是PagingLoader，大致代码如下：

toolBar.bind(loader);
add(toolBar);

接下来，我们要在RSSReader项目里实现上面提到的所有概念。

• 新建ItemPagingGrid类，整个代码内容如下：

package com.danielvaughan.rssreader.client.grids;

import java.util.ArrayList;
import java.util.List;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.danielvaughan.rssreader.shared.model.Item;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class ItemPagingGrid extends LayoutContainer {

	private static final int PAGE_SIZE = 2;

	public ItemPagingGrid() {
		setLayout(new FitLayout());
	}

	@Override
	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);
		// ColumnModel
		final List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
		GridCellRenderer<ModelData> itemsRenderer = new GridCellRenderer<ModelData>() {
			@Override
			public Object render(ModelData model, String property,
					ColumnData config, int rowIndex, int colIndex,
					ListStore<ModelData> store, Grid<ModelData> grid) {
				String title = model.get("title");
				String description = model.get("description");
				return "<b>" + title + "</b><br/>" + description;
			}
		};
		ColumnConfig column = new ColumnConfig();
		column.setId("items");
		column.setRenderer(itemsRenderer);
		column.setHeader("Items");
		columns.add(column);
		final ColumnModel columnModel = new ColumnModel(columns);

		// Proxy:
		final String TEST_DATA_FILE = "http://127.0.0.1:8888/rss2sample.xml";
		final FeedServiceAsync feedService = Registry
				.get(RSSReaderConstants.FEED_SERVICE);
		RpcProxy<PagingLoadResult<Item>> proxy = new RpcProxy<PagingLoadResult<Item>>() {
			@Override
			protected void load(Object loadConfig,// loadConfig是GXT内部自动传入的
					AsyncCallback<PagingLoadResult<Item>> callback) {
				feedService.loadItems(TEST_DATA_FILE,
						(PagingLoadConfig) loadConfig, callback);
			}
		};
		// Loader：根据proxy，生成loader，因为返回的类型正好是PagingLoadResult，不需要数据转换
		PagingLoader<PagingLoadResult<Item>> loader = new BasePagingLoader<PagingLoadResult<Item>>(
				proxy);
		// Store:
		ListStore<ModelData> itemStore = new ListStore<ModelData>(loader);
		// PagingToolBar：定义的时候需要传入分页大小
		final PagingToolBar toolBar = new PagingToolBar(PAGE_SIZE);
		toolBar.bind(loader);
		// Grid：定义的时候，需要传入store和columnModel
		Grid<ModelData> grid = new Grid<ModelData>(itemStore, columnModel);
		grid.setBorders(true);
		grid.setAutoExpandColumn("items");
		loader.load();//此时的load应用了默认的PagingLoadConfig
                // Grid不直接加入到LayoutContainer，而是Grid添加到ContentPanel，ContentPanel添加到LayoutContainer
		ContentPanel panel = new ContentPanel();
		panel.setLayout(new FitLayout());
		panel.add(grid);
		panel.setHeaderVisible(false);
		panel.setBottomComponent(toolBar);
		add(panel);
	}
}

• 最后把ItemPagingGrid添加到RssMainPanel里，显示出来。注释掉之前的components
  

package com.danielvaughan.rssreader.client.components;

import com.danielvaughan.rssreader.client.grids.ItemPagingGrid;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;

public class RssMainPanel extends ContentPanel {
	public RssMainPanel() {
		setHeading("Main");
		setLayout(new FitLayout());
//		add(new ItemGrid());
//		add(new ItemCategoryGrid());
		add(new ItemPagingGrid());
	}
}

• 运行结果如下

• 如果想让Grid在加载数据的时候直接到第二页。可以使用：loader.load(2, PAGE_SIZE);
  

• 只要绑定了（toolBar.bind(loader);）loader之后，其翻页操作不需要我们实现，PagingToolBar内部已经实现好了。